|
|||
float:left immer erforderlich
hi,
hätte da mal ne Frage hinsichtlich des floatens mein code: Code:
html { height: 100.3%; } body{ font-family: Verdana, sans-serif; font-size:0.8em; background: #efeded; color: #000000; } * { margin: 0; padding: 0; } div#wrapper { width: 840px; margin:5px auto; } h1 { background: url(../images/logo.png) no-repeat; height:262px; text-indent: -999em; border-bottom-style:double; border-width:5px; border-color: #c1c0c0; } ul#navigation { margin-top: -34px; list-style-type:none; } ul#navigation li { display:inline; } Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Jaki und Klaiber</title> <link href="css/jk.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <h1>Jaki und Klaiber</h1> <ul id="navigation"> <li><a href="unternehmen.html">Unternehmen</a></li> <li><a href="leistungen.html">Leistungen</a> <ul> <li><a href="heizung.html">Heizung</a></li> <li><a href="bad.html">Bad</a></li> <li><a href="sanitaer.html">Sanitär</a></li> </ul> </li> <li><a href="partner.html">Partner</a></li> <li><a href="karriere.html">Karriere</a></li> <li><a href="kontakt.html">Kontakt</a> <ul> <li><a href="ansprechpartner.html">Ansprechpartner</a></li> <li><a href="kontaktformular.html">Kontaktformular</a></li> <li><a href="anfahrt.html">Anfahrt</a></li> </ul> </li> </ul> Jaki und Klaiber |
Sponsored Links |
|
|||
......kann mir jemand noch einen Tipp geben, warum meine Sidebar hinter dem maintext steht;
wenn ich für maintext ein float:leftdefiniere, müsste sich doch automatisch die sidebar rechts vom div#maintext schieben; tut sie aber nicht......warum muss ich da für die sidebar wieder explizit ein float:left definieren? Code:
div#maintext { float:left; background-color:#ffffff/*#E0E0E0*/; background-repeat: repeat-y; width: 600px; height: 620px; margin-top:12px; padding-top:15px; padding-left: 15px; padding-right:10px; border-left:1px solid #b2b2b2; } ul#sidebar { list-style-type:none; font-family: Verdana, sans-serif; font-size:0.85em; background-color:#D6D6D6; background-repeat: repeat-y; width:188px; height: 615px; margin-top:12px; padding-top: 20px; padding-left: 22px; border-left:3px double #A4A4A4; border-right:1px solid #A4A4A4; line-height: 1.8em; } |
|
|||
Dir fehlt noch einwenig das Grundverständnis für die floats
Zum Beispiel deine Navigation. Jedes Listenelement lässt du floaten. Soweit so gut. Jetzt fehlt aber der nächste Schritt: wer floatet muss auch clearen. Bau mal noch den clearfix ein und gib deiner ul (Navigation) die Klasse clearfix. Und wenn du kein float angibst, woher soll das Element wissen was es machen soll? Standardwert für float ist none
__________________
Gruß haggy |
|
|||
....ok vielen dank für den Tipp; aber ich habe immer gedacht, wenn ich - hier in meinem Beispiel - maintext ein float: left gebe; dann wird die weitere Box (sidebar) automatisch rechts angefügt ohne das ich der sidebar ein float mitgebe.......
|
|
|||
Zitat:
Und du hast ja per se auch zwei unterschiedliche Elemente: maintext = div und navigation = ul. Mein Tipp: genannte Artikel von oben lesen, der ist wirklich gut und leicht verständlich. Dann bastel in deinem CSS folgenden Code: Code:
.clearfix:before, .clearfix:after {content: ""; display: block; height: 0; visibility: hidden} .clearfix:after {clear: both} .clearfix {zoom: 1} .fl {float: left} .fr {float: right} HTML-Code:
<ul id="navigation" class="clearfix"><li class="fl">...</li> <!-- usw. --> </ul>
__________________
Gruß haggy |
|
|||
...aber mir gerade folgendes beispiel erstellt:
Code:
html { height: 100.3%; } body{ font-family: Verdana, sans-serif; font-size:0.8em; background: #efeded; color: #000000; } div#wrapper { } div#box1 { width:200px; float:left; background-color:#ffffff; } ul#box2 { font-family: Verdana, sans-serif; font-size:0.85em; background-color:#F00; } Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>J</title> <link href="css/bsp.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <h1>beispielseite</h1> <div id="box1"> hier steht der Inhalt </div> <ul id="box2"> blub </ul> </div> |
|
|||
Wenn du einem Element ein float verpasst, wird es automatisch zum Blockelement. Genau dann braucht es auch eine Breitenangabe. Wenn diese Breitenangabe fehlt, kommt es auf die Interpretation des Browsers drauf an.
Es kann sich also so verhalten wie du dir das dachtes (dein kleines gedachtes Beispiel von gerade eben), oder eben nicht (bsp. der IE). Setz mal eine Breite auf ul#box2 und du siehst diesen Effekt.
__________________
Gruß haggy |
Sponsored Links |
|
|||
Zitat:
Zitat:
Wenn auch das zweite Element floatet weicht die Box dem vorherigen Float aus. Float-Grundlagen: FAQ Punkt 2
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navigation rutscht heraus | Muamicus | CSS | 19 | 04.01.2011 19:04 |
Wordpress: Content im Quelltext VOR allem anderen, aber wie? | Bichareh | CSS | 4 | 13.06.2009 16:15 |
Content Bereich verschiebt sich im IE | Hotbananaoli | CSS | 12 | 26.02.2009 17:33 |
Css style | je-de | CSS | 6 | 26.09.2008 19:40 |
Problem mit Float bei der Navigation | Julez84 | CSS | 1 | 09.08.2007 11:08 |