Wieos öffnet sich das nicht (HTML)?

Hey,

habe ein Dropdown menü fürs Handy gemacht, aber bei mir öffnet sich das irgendwie nicht. Bin dabei einem Video gefolgt. Liegt es vlt. daran das ich unten das "Nav" ausgeblendet habe aber da auch "li und ul" drin war und ich es unten wieder brauche? Wenn ja, wie kann ich es ändern das es da bleibt aber unten wie ausgeblendet ist?

https://www.youtube.com/watch?v=FqbOu5ZRFag

HTML


<div class="site-nav">
<ul>
<li><a href="index.html"><i class="fa fa-home site-nav--icon"></i>Home</a></li>
<li><a href="Neumöbellogistik.html"><i class="fa fa-info site-nav--icon"></i>Neumöbellogistik</a></li>
<li><a href="LageruLogistik.html"><i class="fa fa-pencil site-nav--icon"></i>Lager & Logistik</a></li>
<li><a href="Werkstatt.html"><i class="fa fa-usd site-nav--icon"></i>Werkstatt</a></li>
<li><a href="Kontakte.html"><i class="fa fa-envelope site-nav--icon"></i>Kontakte</a></li>
</ul>
</div>

<div class="menu-toggle"> <div class="hamburger"></div> </div>

CSS

@media (max-width: 768px) {

nav {

display: none; width: 50px; }

}

.site-nav { position: absolute; top: 100%; right: 0%; background: black; clip-path: circle(0px at top right); overflow: hidden; transition: clip-path ease-in-out 700ms; }

.site-nav--open { clip-path: circle(250% at top right); }

.site-nav ul { margin: 0; padding: 0; list-style: none; }

.site-nav li { border-bottom: 1px solid #575766; }

.site-nav li:last-child { border-bottom: none; }

.site-nav a { color: #EBEBD3; display: block; padding: 2em 4em 2em 1.5em; text-transform: uppercase; text-decoration: none; }

.site-nav a:hover, .site-nav a:focus { background: #E4B363; color: #464655; }

.site-nav--icon { display: inline-block; font-size: 1.5em; margin-right: 1em; width: 1.1em; text-align: right; color: rgba(255,255,255,.4); }

.menu-toggle { padding: 1em; position: absolute; top: .5em; right: .5em; cursor: pointer; }

.hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; background: #484848; height: 3px; width: 1.55em; border-radius: 20px; transition: all ease-in-out 500ms; }

.hamburger::before { transform: translateY(-6px); }

.hamburger::after { transform: translateY(3px); }

.open .hamburger { transform: rotate(45deg); }

.open .hamburger::before { opacity: 0; }

.open .hamburger::after { transform: translateY(-3px) rotate(-90deg); }

@media (min-width: 768px) {

.menu-toggle { display: none; }

.site-nav { height: auto; position: relative; background: transparent; float: right; clip-path: initial; }

.site-nav li { display: inline-block; border: none; }

.site-nav a { padding: 0; margin-left: 3em; }

.site-nav a:hover, .site-nav a:focus { background: transparent; }

.site-nav--icon { display: none; }

}

JS

$('.menu-toggle').click(function() {

$('.site-nav').toggleClass('site-nav--open', 500); $(this).toggleClass('open');

})

Bitte um hilfe!

HTML, CSS, JavaScript, JS
3 Antworten
Wieso kann ich das nicht verschieben (HTML)?

Hey,

ich habe eine Frage, ich bin einem Tutorial gefolgt zum Thema Slideshow. Nun möchte ich es aber verschieben aber ich weiß nicht wie. Der Container dahinter verschiebt sich aber nicht das Bild selber, das geht nicht weg mit allem was ich versuche. Hier der Code: HTML

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="bilder/1.png" width="100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="bilder/2.png" width="100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="bilder/3.png" width="100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

CSS:

* {box-sizing:border-box}
.slideshow-container {   max-width: 100%;   position: relative;   margin: auto; }


.mySlides {     display: none; }


.prev, .next {   cursor: pointer;   position: absolute;   top: 50%;   width: auto;   margin-top: -22px;   padding: 16px;   color: white;   font-weight: bold;   font-size: 18px;   transition: 0.6s ease;   border-radius: 0 3px 3px 0; }


.next {   right: 0;   border-radius: 3px 0 0 3px; }


.prev:hover, .next:hover {   background-color: rgba(0,0,0,0.8); }


.numbertext {   color: #f2f2f2;   font-size: 12px;   padding: 8px 12px;   position: absolute;   top: 0; }


.dot {   cursor: pointer;   height: 15px;   width: 15px;   margin: 0 2px;   background-color: #bbb;   border-radius: 50%;   display: inline-block;   transition: background-color 0.6s ease; }


.active, .dot:hover {   background-color: #717171; }


.fade {   -webkit-animation-name: fade;   -webkit-animation-duration: 1.5s;   animation-name: fade;   animation-duration: 1.5s; }


@-webkit-keyframes fade {   from {opacity: .4}   to {opacity: 1} }

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

JS:

	var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls function plusSlides(n) {   showSlides(slideIndex += n); }


// Thumbnail image controls function currentSlide(n) {   showSlides(slideIndex = n); }

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

Hoffe ihr findet euch da zurecht und könnt mir weiterhelfen!

Website, HTML, IT, Webseite, CSS, JavaScript, JS, html5, web-development
2 Antworten
Wie mache ich das nebeneinander?

Hi, möchte eine Spoilerbox machen und daneben ein Bild, aber wenn ich diese Spoilerbox aufmache, verschiebt sich das Bild automatisch nach unten, wie verhindere ich das ?

HTML:

<input type="checkbox" id="spoiler7" />
	<label for="spoiler7" >Über uns!</label>
	<div class="spoiler6"></div>

CSS:

input[id^="spoiler7"]{
 display: none;
}
input[id^="spoiler7"] + label {
	height: 60px;
	position: relative;
	right: 27.5%;
	padding-top: 10px;
	font-family: Arial;
 width: 15%;
	top: 4%;
 margin: 0 auto;
 padding: 5px 20px;
 background: #5e5e5e;
 color: #fff;
 font-size: 24px;
 border-radius: 8px;
 cursor: pointer;
 transition: all .6s;
}
input[id^="spoiler7"]:checked + label {
 color: #333;
 background: #ccc;
}
input[id^="spoiler7"] ~ .spoiler6 {
 width: 27%;
	font-family: Arial;
	color: #484848;
	position: relative;
	right: 27.5%;
	top: 4%;
	text-align: center;
 height: 0;
 opacity: 0;
 margin: 10px auto 0;
 padding: 10px;
 background: #eee;
 border: 1px solid #ccc;
 border-radius: 8px;
 transition: all .6s;
}
input[id^="spoiler7"]:checked + label + .spoiler6{
 height: auto;
 opacity: 1;
 padding: 10px;
}

Jetzt das Bild was da rechts nebendran soll:

HTML:

	<div id="Picture">
		<img src="bilder/10.png" width="400px"height="400px" alt="" />
	</div>

Und CSS:

#Picture {
	margin-left: 70%;
	display: inline;
	position: relative;
}

Ich hoffe ihr könnt mir helfen!

Ich bedanke mich im Voraus!

CSS, html5
1 Antwort
Wie bringe ich das auf eine Ebene?

Hi, möchte eine Spoilerbox machen und daneben ein Bild, aber wenn ich diese Spoilerbox aufmache, verschiebt sich das Bild automatisch nach unten, wie verhindere ich das ?

HTML:

<input type="checkbox" id="spoiler7" />
	<label for="spoiler7" >Über uns!</label>
	<div class="spoiler6"></div>

CSS:

input[id^="spoiler7"]{
 display: none;
}
input[id^="spoiler7"] + label {
	height: 60px;
	position: relative;
	right: 27.5%;
	padding-top: 10px;
	font-family: Arial;
 width: 15%;
	top: 4%;
 margin: 0 auto;
 padding: 5px 20px;
 background: #5e5e5e;
 color: #fff;
 font-size: 24px;
 border-radius: 8px;
 cursor: pointer;
 transition: all .6s;
}
input[id^="spoiler7"]:checked + label {
 color: #333;
 background: #ccc;
}
input[id^="spoiler7"] ~ .spoiler6 {
 width: 27%;
	font-family: Arial;
	color: #484848;
	position: relative;
	right: 27.5%;
	top: 4%;
	text-align: center;
 height: 0;
 opacity: 0;
 margin: 10px auto 0;
 padding: 10px;
 background: #eee;
 border: 1px solid #ccc;
 border-radius: 8px;
 transition: all .6s;
}
input[id^="spoiler7"]:checked + label + .spoiler6{
 height: auto;
 opacity: 1;
 padding: 10px;
}

Jetzt das Bild was da rechts nebendran soll:

HTML:

	<div id="Picture">
		<img src="bilder/10.png" width="400px"height="400px" alt="" />
	</div>

Und CSS:

#Picture {
	margin-left: 70%;
	display: inline;
	position: relative;
}

Ich hoffe ihr könnt mir helfen!

Ich bedanke mich im Voraus!

CSS, html5
1 Antwort
Wie bekomme ich das in die Mitte (HTML5)?

Ich habe eine Frage, möchte Divs in die Mitte verschieben aber es geht nicht, es sind 3 Stück und die möchte ich nebeneinander haben also habe ich "display: inline-block;" gemacht aber nun will es sich nicht mehr bewegen..

Das ist das Script:

	<div class="container marketing">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="row"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="col-lg-4"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Lokal&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="col-lg-4"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Deutschlandweit&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="col-lg-4"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Europaweit&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;

Und CSS:

.col-lg-4{
	display: inline-block;
}
Computer, Technik, CSS, html5, Technologie
3 Antworten