nicht angemeldet
div float:left ohne umbruch
0 0 0 
Matthias Apsel
div float:left ohne umbruch
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
-
hi leuts
bin gerade am verzweifeln.
Du gibst dem Browser Anweisung float:left und verzweifelst, wenn er sich daran hält?
Deine Frage kann mit einer Tabelle und width:100% gelöst werden. Sie belegt zunächst die volle Breite. Beim Zusammenschieben werden die Zellen immer schmaler, Text in Ihnen würde umbrechen. Das kannst du mit white-space:nowrap verhindern.
Nur - was soll das? Warum sollte bei einem schmalen Viewport Inhalt "versteckt" werden?
Chorus
-
hi chorus
danke für deine antwort.
ja - ich hab bissl falsch gedacht - habs jetzt anders gelöst.
gruss
micha -
Om nah hoo pez nyeetz, Chorus!
Deine Frage kann mit einer Tabelle und width:100% gelöst werden.
Kann man tun. Sollte man nicht tun. http://blog.selfhtml.org/2013/02/02/html5-serie-der-weg-zu-html5/
Matthias
-
