Auf Thema antworten 2026

Beitrag

<blockquote data-quote="enjoyHB" data-source="post: 2623817">Hallo liebe Community,ich habe ein Problem das mich verrückt macht :=)Ich habe eine simple Dropdown-Navigation gebaut. Unter der Dropdown Navigation befindet sich ein Header. Der Header wird mit einem background image gefüllt.Nun passiert folgendes Problem:Der aufgeklappte Teil der Dropdown Navigation legt sich unter den Header. Ich verstehe leider nicht wieso und finde daher keinen Lösungsansatz <img src="/styles/default/xenforo/smilies/uhm.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Frown&nbsp; &nbsp; :(" data-shortname=":(" />Ich habe das ganze einmal hochgeladen:[SPOILER=&quot;Code sehen:&quot;]Hier der Code für den Header:[code=CSS]#teaser {&nbsp; &nbsp; background-image: url(&quot;header.jpg&quot;);&nbsp; &nbsp; background-position: 80% 80%;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-attachment: fixed;&nbsp; &nbsp; background-size: cover;&nbsp; &nbsp; height:460px;&nbsp; &nbsp; z-index: -1;}[/code]Code für die Navigation:[code=CSS]nav {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; background-color: #f6f6f6;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}nav ul {&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; overflow: hidden;}nav li {&nbsp; &nbsp; float: left;}nav li.entry {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; left:25%;}nav li.entry a {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; font-family:&#039;cl&#039;;&nbsp; &nbsp; display: block;&nbsp; &nbsp; color: #131313;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; padding: 30.5px 16px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-size:18px;&nbsp; &nbsp; letter-spacing:1px;}nav li.entry a:hover:not(.active) {&nbsp; &nbsp; transition:0.5s;&nbsp; &nbsp; background-color: #eee;}nav .active {&nbsp; &nbsp; background-color: #eee;}nav li.logo {&nbsp; &nbsp; padding:14px 16px;}nav li.nav-padding {&nbsp; &nbsp; padding:22px 1px;&nbsp; &nbsp; float:right;}nav li.nav-padding-search {&nbsp; &nbsp; padding:21px 1px;&nbsp; &nbsp; float:right;}nav .search-input {&nbsp; &nbsp; background: url(search-small.jpg) no-repeat scroll right;&nbsp; &nbsp; background-color:white;&nbsp; &nbsp; height:32px;&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; border: #dfdfdf solid 1px;&nbsp; &nbsp; padding:0px 5px;}[/code]Und hier der Code für den Dropdown-Bereich[code=CSS]ul li:hover &gt; ul{&nbsp; &nbsp; visibility:visible;&nbsp; &nbsp; opacity:1;}ul ul, ul ul li ul {&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; visibility:hidden;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; z-index: 99999;&nbsp; &nbsp; width:180px;&nbsp; &nbsp; background:#f8f8f8;&nbsp; &nbsp; box-shadow:1px 1px 3px #ccc;&nbsp; &nbsp; opacity:0;&nbsp; &nbsp; -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;&nbsp; &nbsp; -moz-transition:opacity 0.2s linear, visibility 0.2s linear;&nbsp; &nbsp; -o-transition:opacity 0.2s linear, visibility 0.2s linear;&nbsp; &nbsp; transition:opacity 0.2s linear, visibility 0.2s linear;&nbsp;&nbsp; }ul ul {&nbsp; &nbsp; top: 43px;&nbsp; &nbsp; left: 1px;}ul ul li ul {&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 181px;}ul ul li {&nbsp; &nbsp; clear:both;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; border:0 none;&nbsp; &nbsp; border-bottom:1px solid #c9c9c9;}ul ul li a {&nbsp; &nbsp; background:none;&nbsp; &nbsp; padding:7px 15px;&nbsp; &nbsp; color:#616161;&nbsp; &nbsp; text-shadow:1px 1px 0px #fff;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; display:inline-block;&nbsp; &nbsp; border:0 none;&nbsp; &nbsp; float:left;&nbsp; &nbsp; clear:both;&nbsp; &nbsp; width:150px;}[/code]Und wahrscheinlich wollt ihr das HTML Grundgerüst auch sehen:[code]&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;header&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;nav&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container-inner&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;logo&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;src/img/logo.png&quot;&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;entry&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;Damen&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=&quot;ul-second-area&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;li-second-area&quot;&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;li-second-area&quot;&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;entry&quot;&gt;&lt;a href=&quot;#&quot;&gt;Herren&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;nav-padding&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;user.jpg&quot;&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;nav-padding-search&quot;&gt;&lt;input placeholder=&quot;search&quot; class=&quot;search-input&quot;&gt;&lt;/input&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/header&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;section id=&quot;teaser&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;first-contact&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input placeholder=&quot;PLZ eingeben&quot; class=&quot;central-searcht&quot;&gt;&lt;/input&gt;&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class=&quot;checkbox-stadtteile-einbeziehen&quot;&gt;&lt;input type=&quot;checkbox&quot;&gt;Angrenzende Stadtteile mit einbeziehen&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &nbsp; &lt;/body&gt;[/code][/SPOILER]Ich freue mich über anregende Ideen für die Lösung :=) VIelen Dank liebe Community!//Edit:z-index funktioniert leider nicht... :/</blockquote>

[QUOTE="enjoyHB, post: 2623817"] Hallo liebe Community, ich habe ein Problem das mich verrückt macht :=) Ich habe eine simple Dropdown-Navigation gebaut. Unter der Dropdown Navigation befindet sich ein Header. Der Header wird mit einem background image gefüllt. Nun passiert folgendes Problem: Der aufgeklappte Teil der Dropdown Navigation legt sich unter den Header. Ich verstehe leider nicht wieso und finde daher keinen Lösungsansatz :( Ich habe das ganze einmal hochgeladen: [SPOILER="Code sehen:"] [B]Hier der Code für den Header:[/B] [code=CSS]#teaser { background-image: url("header.jpg"); background-position: 80% 80%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height:460px; z-index: -1; }[/code] [B]Code für die Navigation: [/B] [code=CSS]nav { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav li { float: left; } nav li.entry { position: relative; left:25%; } nav li.entry a { position: relative; font-family:'cl'; display: block; color: #131313; text-align: center; padding: 30.5px 16px; text-decoration: none; font-size:18px; letter-spacing:1px; } nav li.entry a:hover:not(.active) { transition:0.5s; background-color: #eee; } nav .active { background-color: #eee; } nav li.logo { padding:14px 16px; } nav li.nav-padding { padding:22px 1px; float:right; } nav li.nav-padding-search { padding:21px 1px; float:right; } nav .search-input { background: url(search-small.jpg) no-repeat scroll right; background-color:white; height:32px; width: 200px; border: #dfdfdf solid 1px; padding:0px 5px; }[/code] [B]Und hier der Code für den Dropdown-Bereich [/B] [code=CSS]ul li:hover > ul { visibility:visible; opacity:1; } ul ul, ul ul li ul { list-style: none; margin: 0; padding: 0; visibility:hidden; position: absolute; z-index: 99999; width:180px; background:#f8f8f8; box-shadow:1px 1px 3px #ccc; opacity:0; -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear; } ul ul { top: 43px; left: 1px; } ul ul li ul { top: 0; left: 181px; } ul ul li { clear:both; width:100%; border:0 none; border-bottom:1px solid #c9c9c9; } ul ul li a { background:none; padding:7px 15px; color:#616161; text-shadow:1px 1px 0px #fff; text-decoration:none; display:inline-block; border:0 none; float:left; clear:both; width:150px; }[/code] [B] Und wahrscheinlich wollt ihr das HTML Grundgerüst auch sehen:[/B] [code] <body> <header> <nav> <div class="container-inner"> <ul> <li class="logo"><a href="#"><img src="src/img/logo.png"></a></li> <li class="entry"><a href="#" class="active">Damen</a> <ul class="ul-second-area"> <li class="li-second-area"><a href="#">Test</a></li> <li class="li-second-area"><a href="#">Test</a></li> </ul> </li> <li class="entry"><a href="#">Herren</a></li> <li class="nav-padding"><a href="#"><img src="user.jpg"></a></li> <li class="nav-padding-search"><input placeholder="search" class="search-input"></input></li> </ul> </div> </nav> </header> <section id="teaser"> <div id="first-contact"> <input placeholder="PLZ eingeben" class="central-searcht"></input> <input type="checkbox">Angrenzende Stadtteile mit einbeziehen </div> </section> </body>[/code] [/SPOILER] Ich freue mich über anregende Ideen für die Lösung :=) VIelen Dank liebe Community! //Edit: z-index funktioniert leider nicht... :/ [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?