• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdown Menü durch Overflow:hidden verdeckt

X

XirLion

Mitglied
Hallo ich habe das Poblem das mein Dropdown Menü aus der Navigation hinter dem Slider oder auf Unterseiten hinter dem nächsten Wrapper verschwindet.

Navigation.jpg


Ich habe bereits was über den Z-Index gelesen und ausprobiert, doch dies hat nicht geholfen.

Wenn ich teilweise das Overflow:hidden oder das Margin: 0 auto; der Navigationsleiste entferne wird es zwar richtig angezeigt, zerschießt mir aber das restliche Layout:

OHNE Overflow:hidden in der Navigation:
Navigation2.jpg

MIT Overflow:hidden in der Navigation:
Navigation3.jpg

Würde mich freuen wenn mir vielleicht jemand von euch bei meinem Problem weiterhelfen kann :)

Hier etwas aus meinem CSS Code:

@charset "utf-8";
/*
* CSS-Design
*Webseite
*/

/* Reset * * * * * * * * */
*{
margin: 0;
padding: 0;
}
body{
font: 400 15px/24px'Montserrat', Helvetica, Arial, sans-serif;
color: #fff;
width: 100%;
}
/* Layout * * * * * * * * */
.wrapper{
width:1164px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: #fff;
padding: 22px 0;
}
#teaser{
}
#contenttop{
text-align: center;
margin-top: 20px;
padding-top: 80px;
padding-bottom: 20px;
background-color: #030303;
}
#contenttop h2{
color: #b9587a;
font-family: 'Poppins', sans-serif;
font-style: italic;
font-weight: 300;
font-size: 32px;
padding-bottom: 25px;
}
#contenttop h1{
color: #fff;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 35px;
}
#content{
background-color: #030303;
}
a .img-content{
position: absolute;
top: 204px;
width: 368px;
text-align: center;
background: #146685;
padding: 5px 15px 5px 20px ;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 30px;
line-height: 30px;
}
a .img-content:hover{
color: #146685;
background: #fff;
}
#content h2{
color: #b9587a;
font-size: 28px;
font-family: 'Poppins', sans-serif;
font-weight: 300;
margin-bottom: 15px;
font-style: italic;
padding-bottom: 10px;
}
#content h3{
color: #b9587a;
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 300;
margin-bottom: 15px;
font-style: italic;
padding-bottom: 10px;
}
#content p{
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 100;
font-size: 18px;
line-height: 28px;
word-spacing: 2px;
color: #fff;
}
#content p .button{
background-color: #146685;
float: right;
color: #fff;
text-decoration: none;
margin-top: 20px;
padding: 3px 25px;
border-radius: 6px;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
#content p .button:hover{
color: #146685;
background-color: #fff;
font-weight: 500;
}
#content .col_1_5 p{
font-family: 'Montserrat', sans-serif;
font-weight: 100;
font-size: 16px;
}

/* Spalten * * * * * * * * */
.col_1, .col_1_2, .col_1_3, .col_1_4, .col_1_5, .col_1_6, .col_1_7{
float: left;
}
.col_1{
width:455px;
margin: 105px 10px;
float: right;
}
.col_1_2{
width: 620px;
margin: 60px 10px;
}
.col_1_3{
margin: 20px 10px;
width: 368px;
position: relative;
}
.col_1_4{
margin: 60px 10px;
}
.col_1_5{
width: 555px;
margin: 40px 40px;
position: relative;
}
.col_1_6{
float: left;
margin: 20px 10px;
position: relative;
}
.col_1_7{
margin: 25px 40px;
}
/* NavBar * * * * * * * * */
.navbar{
float: right;
font-size: 18px;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
}
.navbar ul{
display: inline-block;
width: 100%;
}
.navbar ul li{
display: inline-block;
position: relative;
}
.navbar ul li a{
display: inline-block;
color: #146685;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 15px;
transition: all ease 0.3s;
}
.navbar ul li a:hover{
color: #b9587a !important;
}
.navbar ul li.dropdown ul{
background-color: #fff;
color: #146685;
font-size: 16px;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 0;
padding-left: 0;
min-width: 142px;
display: none;
z-index: 12;
}
.navbar ul li.dropdown ul li a{
color: #146685;
width: 180px;
}
.navbar ul li.dropdown:hover ul{
display: block;
}
 
Zuletzt bearbeitet:
Der Css Code alleine hilft uns nicht viel.
Poste mal bitte den ganzen Code ( html ,css und js wenn es darauf einfluss nimmt ).
Oder gib uns den Link oder mach bei codepen.io ein Beispiel fertig mit deinen Code.

Ich denke mal das man es mit Flexbox schon beheben könnte.
Deine ganzen positions und float Angaben sind auch nicht schön.
Dann denke ich mal das man mit deinen ganzen font Angaben auch was machen könnte( abspecken ),doch das kann ich erst beurteilen wenn man die Seite komplett sieht
 
Ok, hier der HTML Teil:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Werbeagentur FISCHKOPP-Webseite</title>
<link rel="stylesheet" href="styles/styles.css">
<!-- Webfonts-Einbindung -->
<link href="https://fonts.googleapis.com/css2?f...pins:ital,wght@1,200;1,300;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta name="description" content="Ich bin FISCHKOPP und entwerfe moderne Webseiten mit ganz viel Liebe zum Detail.">
<meta name="keywords" content="FISCHKOPP, Werbeagentur, Graal-Müritz, Webdesign, Multimedia, Printdesign, Social Media">
</head>
<body>
<!-- Header -->
<div id="header">
<div class="wrapper">
<a href="index.html"><img src="images/logo.png" height="66" width="257" alt="Logo FISCHKOPP - Die Werbeagentur"></a>

<div class="navbar">
<div class="col_0">
<ul>

<li><a href="ueber.html">ÜBER MICH</a></li>

<li class="dropdown">
<a href="leistungen.html">LEISTUNGEN</a>

<ul>
<li><a href="printdesign.html">Printdesign</a></li>
<li><a href="webdesign.html">Webdesign</a></li>
<li><a href="multimedia.html">Multimedia</a></li>
</ul>

</li>

<li><a href="referenzen.html">REFERENZEN</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>

</ul>
</div>
</div>
</div>
</div>
<!--Teaser Slider-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/teaser.jpg" class="d-block w-100" alt="Ostsee Wellen">
</div>
<div class="carousel-item">
<img src="images/teaser2.jpg" class="d-block w-100" alt="Steine in der Ostsee">
</div>
<div class="carousel-item">
<img src="images/teaser3.jpg" class="d-block w-100" alt="Boot am Strand der Ostsee">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>

<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Content -->
<!--Einspalter: Überschriften-->
<div id="contenttop">
<div class="wrapper">
<H2>KREATIV IM DETAIL</H2>
<H1>MEINE LEISTUNGEN - IHR EROLG!</H1>
</div>
</div>
<!-- Dreispalter: Bild mit Buttons-->
<div id="content">
<div class="wrapper">
<div class="col_1_3">
<a href="printdesign.html">
<span class="img-content">Printdesign</span></a>
<img src="images/content-print.jpg" width="368" height="244" alt="Printdesign">
</div>
<div class="col_1_3">
<a href="webdesign.html">
<span class="img-content">Webdesign</span></a>
<img src="images/content-web.jpg" width="368" height="244" alt="Webdesign">
</div>
<div class="col_1_3">
<a href="multimedia.html">
<span class="img-content">Multimedia</span></a>
<img src="images/content-media.jpg" width="368" height="244" alt="Multimedia">
</div>

<!-- Zweispalter: Text & Bild -->
<div class="col_1_2">
<h2>Erfolgreiche Webseiten für Jedermann</h2>
<p>Modern gestaltete Werbeauftritte ermöglichen es nicht nur, mit<br>
Ihren Kunden in Kontakt zu treten, sondern können auch aktiv an<br>
der Steigerung Ihres Absatzes mitwirken und so Ihrem<br>
Geschäftsmodell zu mehr Wachstum verhelfen.
<br><br>
Ich arbeite tatkräftig mit Ihnen zusammen, um das volle Potenzial<br>
aus Ihrer (neuen) Webseite herauszuholen. Meine Erfahrung<br>
hilft mir dabei, exakt auf Ihre Bedürfnisse sowie die Ihrer Kunden<br>
einzugehen.</p>
<p><a href="webdesign.html" class="button big">mehr Infos</a></p>
</div>
<div class="col_1">
<img src="images/mockup.png" width="455" height="247" alt="Beipsiel Webseite auf einem Laptop und Smartphone">
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="wrapper">
<div class="col_1_7">
<a href="kontakt.html">KONTAKT</a>
<p>Werbeagentur FISCHKOPP<br>Am Wasserturm 1 / Haus 2<br>18181 Graal-Müritz</p><p>Telefon: +49 001 98765432<br>E-Mail:
<a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="col_1_7">
<a href="ueber.html">ÜBER MICH </a>
<a href="leistungen.html">LEISTUNGEN</a>
<a href="referenzen.html">REFERENZEN</a>
</div>

<div class="col_1_7">
<h2>SOCIAL MEDIA</h2>
<br>
<a href="https://www.instagram.com/werbeagentur_fischkopp/">
<img src="images/instagram.png" width="32" height="32" alt="instagram.com/werbeagentur_fischkopp"></a>
<a href="www.youtube.com">
<img src="images/youtube.png" width="32" height="32" alt="facebook.com"></a>
<a href="www.facebook.com">
<img src="images/facebook.png" width="32" height="32" alt="facebook.com"></a>
<br>
<br>
<br>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
<a href="AGBs.html">AGBs</a>
</div>
</div>
</div>
<!--jQuery, Popper.js, Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
 
und der CSS Teil:
@charset "utf-8";
/*
* CSS-Design
*Webseite
*/
/* Reset * * * * * * * * */
*{
margin: 0;
padding: 0;
}
body{
font: 400 15px/24px'Montserrat', Helvetica, Arial, sans-serif;
color: #fff;
width: 100%;
}
/* Layout * * * * * * * * */
.wrapper{
width:1164px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: #fff;
padding: 22px 0;
}
#teaser{
}
#contenttop{
text-align: center;
margin-top: 20px;
padding-top: 80px;
padding-bottom: 20px;
background-color: #030303;
}
#contenttop h2{
color: #b9587a;
font-family: 'Poppins', sans-serif;
font-style: italic;
font-weight: 300;
font-size: 32px;
padding-bottom: 25px;
}
#contenttop h1{
color: #fff;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 35px;
}
#content{
background-color: #030303;
}
a .img-content{
position: absolute;
top: 204px;
width: 368px;
text-align: center;
background: #146685;
padding: 5px 15px 5px 20px ;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 30px;
line-height: 30px;
}
a .img-content:hover{
color: #146685;
background: #fff;
}
hr{
background: #fff;
border: 0;
height: 1px;
width: 1164px;
float: left;
margin: 20px 0;
}
#content h2{
color: #b9587a;
font-size: 28px;
font-family: 'Poppins', sans-serif;
font-weight: 300;
margin-bottom: 15px;
font-style: italic;
padding-bottom: 10px;
}
#content h3{
color: #b9587a;
font-size: 25px;
font-family: 'Poppins', sans-serif;
font-weight: 300;
margin-bottom: 15px;
font-style: italic;
padding-bottom: 10px;
}
#content p{
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 100;
font-size: 18px;
line-height: 28px;
word-spacing: 2px;
color: #fff;
}
#content p .button{
background-color: #146685;
float: right;
color: #fff;
text-decoration: none;
margin-top: 10px;
padding: 3px 25px;
border-radius: 6px;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
#content p .button:hover{
color: #146685;
background-color: #fff;
font-weight: 500;
}
#content .col_1_5 p{
font-family: 'Montserrat', sans-serif;
font-weight: 200;
font-size: 16px;
}
#content .col_1_5_1 p{
font-family: 'Montserrat', sans-serif;
font-weight: 200;
font-size: 16px;
}
#footer{
color: #146685;
font-size: 18px;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-style: normal;
}
#footer a:hover{
color: #b9587a;
}
#footer h2{
color: #146685;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
margin-top: 5px;
}
#footer p{
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
padding-top: 5px;
}
#footer a{
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
padding-right: 18px;
text-decoration: none;
color: #146685;
margin-top: 5px;
}
/* Spalten * * * * * * * * */
.col_0, .col_1, .col_1_1, .col_1_2, .col_1_3, .col_1_4,
.col_1_5, .col_1_5_1, .col_1_5_2, .col_1_6, .col_1_6_1, .col_1_7{
float: left;
}
.col_0{
width: 620px;
}
.col_1{
width:455px;
margin: 105px 10px;
float: right;
}
.col_1_1{
width:414px;
margin: 105px 10px;
float: right;
}
.col_1_2{
width: 620px;
margin: 60px 10px;
}
.col_1_3{
margin: 20px 10px;
width: 368px;
position: relative;
}
.col_1_4{
margin: 60px 10px;
}
.col_1_5{
float: right;
width: 690px;
margin: 40px 40px;
position: relative;
}
.col_1_5_1{
float: left;
width: 690px;
margin: 40px 10px;
position: relative;
}
.col_1_5_2{
float: left;
width: 690px;
margin: 40px 10px;
margin-bottom: 100px;
position: relative;
}
.col_1_6{
float: left;
margin: 20px 10px;
position: relative;
}
.col_1_6_1{
float: right;
margin: 20px 10px;
position: relative;
}
.col_1_7{
margin: 25px 40px;
}
/* NavBar * * * * * * * * */
.navbar{
float: right;
font-size: 18px;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
}
.navbar ul{
display: inline-block;
width: 100%;
}
.navbar ul li{
display: inline-block;
position: relative;
}
.navbar ul li a{
display: inline-block;
color: #146685;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 15px;
transition: all ease 0.3s;
}
.navbar ul li a:hover{
color: #b9587a !important;
}
.navbar ul li.dropdown ul{
background-color: #fff;
color: #146685;
font-size: 16px;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 0;
padding-left: 0;
min-width: 142px;
display: none;
}
.navbar ul li.dropdown ul li a{
color: #146685;
width: 180px;
}
.navbar ul li.dropdown:hover ul{
display: block;
}
#carouselExampleIndicators{
z-index: -1;
}
 
Du solltest dir Flexbox anschauen.

CSS Flexible Box Layout Module - verschiedene Beispiele einzelner CSS3-Flexbox-Eigenschaften

www.css-wiki.com

Mal so als Idee , mit Flexbox könnte man es so machen

Schönheitsfehler habe ich jetzt nicht behoben.
Deine ganzen festen größen machen ein Responsives verhalten fast unmöglich.
Du möchtest deine Seite ja bestimmt auch für Handys und Tabletts anpassen und da helfen Feste größe noch wenniger.
Für Handy und Tabletts solltest du dir noch
@mediaqueries anschauen.

Media Queries: Einfaches responsives Webdesign | mediaevent.de

Media Queries passen das Layout der Webseite durch Breakpoints im CSS an Monitorklassen an. An den Breakpoints springt das Design um. Media Queries sind nicht so anspruchsvoll, wie es auf den ersten Blick scheint, aufwändig ist nur der Plan für die unterschiedlichen ViewPorts.
www.mediaevent.de www.mediaevent.de
 
basti1012 schrieb:
Du solltest dir Flexbox anschauen.

CSS Flexible Box Layout Module - verschiedene Beispiele einzelner CSS3-Flexbox-Eigenschaften

www.css-wiki.com

Mal so als Idee , mit Flexbox könnte man es so machen

Schönheitsfehler habe ich jetzt nicht behoben.
Deine ganzen festen größen machen ein Responsives verhalten fast unmöglich.
Du möchtest deine Seite ja bestimmt auch für Handys und Tabletts anpassen und da helfen Feste größe noch wenniger.
Für Handy und Tabletts solltest du dir noch
@mediaqueries anschauen.

Media Queries: Einfaches responsives Webdesign | mediaevent.de

Media Queries passen das Layout der Webseite durch Breakpoints im CSS an Monitorklassen an. An den Breakpoints springt das Design um. Media Queries sind nicht so anspruchsvoll, wie es auf den ersten Blick scheint, aufwändig ist nur der Plan für die unterschiedlichen ViewPorts.
www.mediaevent.de www.mediaevent.de
Zum Vergrößern anklicken....

Super Danke für die Tipps und schnelle Antwort, werde mir das mal alles anschauen :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben