[Erledigt] Float Problem - Menü beeinflusst Content Bereich

odeces · 09.11.2011, 01:03

Guten Abend,

ich habe folgendes Problem: Mein Menü beeinflusst den Content bereich, wenn ich auf den Menüpunkt "shop" gehe, floatet der content hinter das Menüelement, dass ich nach unten ausklappt. Wohl möglich ein kleiner Flüchtigkeitsfehler, jedoch komm ich nicht drauf :/

index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body id="bg_1">
<div id="tail-top">
  <div id="wrapper">
    <div id="header">
      <a href="#"><img class="fleft pt10px" src="img/logo.png" /></a>
      <div class="fright pt10px"><div id="or_menu"><ul>
        <li><a href="#"><b>waren</b>korb</a></li>
        <li><a href="#">mein<b>konto</b></a></li>
      </ul></div></div>
    </div>
    
    <div id="menu"><ul>
      <li><a href="#">home</a></li>
      <li><a href="#">designer e marcas</a></li>
      <li><a href="#">shop</a>
        <ul>
          <li><a href="#">home 1</a></li>
          <li><a href="#">home 2</a></li>
          <li><a href="#">home 3</a></li>
          <li><a href="#">home 4</a></li>
        </ul>
      </li>
      <li><a href="#">contacto</a></li>
    </ul></div>
    
    <div id="content">
      <div id="produkt_liste"><ul>
        <li><div id="bild"></div><div id="details"><div id="top"></div><div id="bottom"></div></div></li>
        <li><div id="bild"></div><div id="details"><div id="top"></div><div id="bottom"></div></div></li>
        <li><div id="bild"></div><div id="details"><div id="top"></div><div id="bottom"></div></div></li>
        <li><div id="bild"></div><div id="details"><div id="top"></div><div id="bottom"></div></div></li>
      </ul></div>
      <div class="clear"></div>  
    </div>
  
  
  </div>
</div>
</body>
</html>

style.css

Code:

/* RESET ALL */
abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var {background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
table,table td { padding:0;border:none;border-collapse:collapse;}
img {vertical-align:top;}
embed {vertical-align:top;}

/* STANDART CLASSES */
.b1px{border:1px solid #000;}
.br5px{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.m1px{margin:1px;}.m2px{margin:2px;}.m5px{margin:5px;}.m10px{margin:10px;}
.p1px{padding:1px;}.p2px{padding:2px;}.p5px{padding:5px;}.p10px{padding:10px;}
.pt1px{padding-top:1px;}.pt2px{padding-top:2px;}.pt5px{padding-top:5px;}.pt10px{padding-top:10px;}
.row{display:block;margin-bottom:3px;}
.line{display:block;}
.fright{float:right;}.fleft{float:left;}.clear{clear:both;}
.ac{text-align:center;}.aj{text-align:justify;}.ar{text-align:right;}.al{text-align:left;}

/* Backgrounds */
#bg_1{background:url('bg_1.jpg') right top no-repeat fixed;}

/* */
body{font-family:"Century Gothic"}
img{border:0;}
a{text-decoration:none;color:#000;}
a:hover{color:#444;}

#tail-top{width:100%;background:url('tail-top.png') 50% 150px repeat-x;}
#wrapper{width:1000px;margin:0 auto;}
#header{width:100%;height:150px;}
#or_menu{}
#or_menu li a{padding-left:25px;background:url('bullet.png') 0 50% no-repeat;height:35px;line-height:35px;}
#menu{width:100%;height:35px;font-size:20px;z-index:200;}
#menu ul{}
#menu ul li{float:left;}
#menu ul li a{display:block;width:200px;height:35px;line-height:35px;text-align:center;}
#menu ul li a .active{background-color:#afd6db;}
#menu ul li:hover a{background-color:#afd6db;}
#menu ul li a:hover{background-color:#3bc1cd;}
#menu ul li ul{display:none;height:auto;}
#menu ul li:hover ul{display:block;}
#menu ul li ul li {float:none;width:200px;z-index:200;}
#menu ul li ul li a{display:block;height:35px;line-height:35px;text-align:center;background-color:#afd6db;}
#menu ul li ul li a:hover{background-color:#3bc1cd;}

#content{display:block;width:100%;}

#produkt_liste ul li{float:left;width:390px;height:190px;padding:4px;overflow:hidden;border:1px solid #000;}
#produkt_liste ul li #bild{float:left;height:190px;width:190px;padding-right:5px;overflow:hidden;}
#produkt_liste ul li #details{float:right;height:190px;width:185px;}
#produkt_liste ul li #details #top{height:140px;width:185px;}
#produkt_liste ul li #details #bottom{height:50px;width:185px;}

Beispiel hier anschauen...

Vllt. kann mir wer den nötigen Denkanstoss geben, Vielen Dank schonmal!

ChrisB · 09.11.2011, 01:42

Zitat:

Zitat von odeces

Mein Menü beeinflusst den Content bereich, wenn ich auf den Menüpunkt "shop" gehe, floatet der content hinter das Menüelement, dass ich nach unten ausklappt.

Natürlich, bei im normalen Fluss befindlichen Elementen kannst du doch kein anderes Verhalten erwarten.

Positioniere das aufklappende Menü absolut, um es aus dem Fluss zu nehmen.

odeces · 09.11.2011, 09:28

Tatsächlich...

Code:

#menu ul li ul{position:absolute;display:none;height:auto;z-index:200;}

und schon klappts

danke, von alleine wär ich da nich so schnell drauf gekommen :/

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS-Layout Menü IE6 <- Problem	duerov	HTML, Usability und Barrierefreiheit	7	21.11.2005 22:31
Problem mit Login Bereich (Sessions, MySQL)	nicobischof	PHP Tipps 2005-2	6	19.10.2005 09:54
[Erledigt] Problem mit div, float und clear		HTML, Usability und Barrierefreiheit	2	09.09.2005 18:51
problem mit passwort bereich		PHP Tipps 2005-2	9	24.08.2005 13:59
[Erledigt] FLOAT Problem		Datenbanken	2	17.06.2005 23:12
Komisches Div margin Problem nach float &amp; clear		HTML, Usability und Barrierefreiheit	1	15.05.2005 10:05
[Erledigt] arges float Problem		HTML, Usability und Barrierefreiheit	9	30.04.2005 14:31
Problem mit Menü	nullplan	PHP Tipps 2005	1	24.03.2005 22:11
problem mit Menü feld und datenbank auslese	4x4styling	Datenbanken	3	11.02.2005 11:17
Firefox float Problem....	MortakArtos	HTML, Usability und Barrierefreiheit	1	14.01.2005 12:18
Content bereich aus Mysql mit php code einbinden		Datenbanken	0	28.11.2004 16:06
dropdown menü problem		HTML, Usability und Barrierefreiheit	2	18.08.2004 09:13
Problem mit drop-down menu		HTML, Usability und Barrierefreiheit	3	04.08.2004 19:56
[Erledigt] Phpkit Problem. Komme im Admin nicht in den bereich Template		PHP Tipps 2004	10	11.07.2004 18:22
Problem mit dynamischen Menü		PHP Tipps 2004	0	02.07.2004 13:40


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

09.11.2011, 09:28
odeces Neuer Benutzer Registriert seit: 30.06.2011 Beiträge: 2 PHP-Kenntnisse: Fortgeschritten	Tatsächlich... Code: #menu ul li ul{position:absolute;display:none;height:auto;z-index:200;} und schon klappts danke, von alleine wär ich da nich so schnell drauf gekommen :/