float:left immer erforderlich

seeadler · #1 (**permalink**) 26.09.2011, 16:48

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>

.......ist es eigentlich notwendig bzw. ratsam bei ul#navigation li noch ein float:left zu definieren oder kann ich es einfach weglassen?
Jaki und Klaiber

K.Roland · #2 (**permalink**) 26.09.2011, 18:00

Hi,

falls du nicht klar kommst:
Einfach mal nach "suckerfish" oder "Dropdown-Menü " googeln.

____________
Gruß,
Roland

seeadler · #3 (**permalink**) 26.09.2011, 18:33

........mmh ok; also rein optisch benötige ich ja kein float; aber würdet ihr aus der Erfahrung heraus ein float empfehlen?

seeadler · #4 (**permalink**) 27.09.2011, 11:40

......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;
}

Jaki und Klaiber

haggy · #5 (**permalink**) 27.09.2011, 12:44

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

seeadler · #6 (**permalink**) 27.09.2011, 12:57

....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.......

haggy · #7 (**permalink**) 27.09.2011, 13:07

Zitat:

Zitat von seeadler

....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.......

Gegenfrage: woher soll denn die weitere Box (sidebar) wissen wie sie floaten soll?

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}

Jetzt kannst du deine DOM-Elemente bequem floaten und clearen:

HTML-Code:

<ul id="navigation" class="clearfix"><li class="fl">...</li> <!-- usw. --> </ul>

seeadler · #8 (**permalink**) 27.09.2011, 13:54

...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>

.....und habe festgestellt das ich nur box1 floate; box2 schmiegt sich direkt an box1 an...........ich kann den Fehler nicht finden, warum ich bei meinem ersten Beispiel jeweils für jede Box (maintext und sidebar) float definieren muss??

haggy · #9 (**permalink**) 27.09.2011, 14:21

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.

fricca · #10 (**permalink**) 27.09.2011, 14:26

Zitat:

Zitat von seeadler

.....und habe festgestellt das ich nur box1 floate; box2 schmiegt sich direkt an box1 an

Nein. Nur der Inhalt weicht dem Float aus, nicht die Box. Die Box verhält sich, als wäre das Float gar nicht da.

Zitat:

...........ich kann den Fehler nicht finden, warum ich bei meinem ersten Beispiel jeweils für jede Box (maintext und sidebar) float definieren muss??

Oben kann der Inhalt nicht ausweichen, weil die Breite zu gering ist.

Wenn auch das zweite Element floatet weicht die Box dem vorherigen Float aus.

Float-Grundlagen: FAQ Punkt 2

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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