tropenberta: div float:left ohne umbruch

Beitrag lesen

SELF-Forum

div float:left ohne umbruch

tropenberta
– Informationen zu den Bewertungsregeln

hi leuts

bin gerade am verzweifeln.

bau gerade an nem grundgerüst und hier hab ich ne navi mit li elementen, die ich mit float:left nebeneinander zwing.

wenn ich jetzt das browserfenster zusammen schiebe springt der letzte rechte div in die nächste zeile, ich möchte aber das nix umbricht und statt dessen bei zusammenschieben des fensters die divs sich erst zusammen schieben und dann wenn der rechte rand erreicht ist die divs aus dem fenster verschwinden.

  
<html>  
<head>  
<title></title>  
<meta name="author" content="Michael">  
  
<style type="text/css">  
  
body,html { width:100%;  
            height:100%;  
            margin:0;  
            padding:0; }  
  
body { background:url(images/kinder_rennen_bg4.jpg) no-repeat;  }  
  
#wrapper { width: 100%;  
           overflow:hidden;  
           height:100%; }  
  
#header { width:100%;  
          height:50px;  
          background-color:white;  
          opacity:0.8; }  
  
#content { width:100%;  
           height:100%; }  
  
#footer { width: 100%;  
          height:80px;  
          position:absolute; bottom:0px; background-color:#9AC37A; }  
  
a:visited { color:#000000; text-decoration:none; }  
a:link    { color:#000000; text-decoration:none; }  
a:focus   { color:#000000; text-decoration:none; }  
a:hover   { color:#000000; text-decoration:none; }  
a:active  { color:#000000; text-decoration:none; }  
  
#navi { width:100%;  
        height: 50px;  
        background-color:white;  
        position:absolute;  
        opacity:0.8; }  
  
.navi_box { width:150px;  
            height: 30px;  
            float:left;  
            list-style:none;  
            text-align:center;  
            margin-left: 65px;  
            font-family: Futura Md BT;  
            font-size:22px;  
            font-weight:bold; }  
</style>  
  
</head>  
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">  
  
<div id="wrapper">  
    <div id="header">  
     <div id="navi">  
         <ul>  
           <li class="navi_box">Start</li>  
           <li class="navi_box" >Kindergarten</li>  
           <li class="navi_box" >Gruppe</li>  
           <li class="navi_box" >Konzeption</li>  
           <li class="navi_box" >Träger</li>  
           <li class="navi_box" >Aktuelles</li>  
         </ul>  
     </div>  
    </div>  
  
    <div id="content">  
      <div id="footer"></div>  
    </div>  
  
</div>  
  
</body>  
</html>

ich hab die class navi_box mal auf position:absolute gestellt und die einzelenen menüpunkte nen festen abstand nach links verpasst (left:200px, left:400px, ...). damit hab ich schonmal das erreicht was ich wollte. finde es nur recht unschön und suche nach ner eleganteren lösung.

gruss micha

Beitrag melden
–
Informationen zu den Bewertungsregeln