Sponsored Links |
|
|||
Hi
du kannst leider nicht jedes einzelne Float clearen. Soll es am Ende so aussehen wie im Anhang? Wenn ja, brauchst du für den Mittelteil doch gar kein float, gib ihm einfach einen Außenabstand nach links
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. << |
Sponsored Links |
|
||||
Du meinst ich sollte das hier löschen:
Code:
div.links { float:left; } div.mitte { clear:left; }
__________________
Mit freundlichem Gruß MJA Geändert von MJA (31.05.2006 um 12:57 Uhr) |
|
|||
Wozu hat das div.mitte ein clear:left?
Was willst du eigentlich erreichen? Wenn du möchtest, dass .mitte zwischen .links und .rechts steht, dann gib dem .rechts ein float:right. Dein Code oben ist unvollständig und fehlerhaft. Validier bitte deinen Code, bevor du ihn hier einstellst (HTML und CSS). |
|
||||
Entschuldigt, ich habe mich wohl etwas zu sehr in die Sache hineingesteigert und dabei einige Flüchtigkeitsfehler gemacht.
Nein, der Berecht „mitte“ (Name etwas blöd gewählt, gebe ich zu) soll nicht zwischen „links“ und „rechts“, sonder darunter! So soll das also aussehen: (Siehe Graftik: clear_2.gif) Mein Problem ist jetzt das, wenn im Bereich „links“ so viel Text steht, dass ein Zeilenumbruch entsteht, das der Bereich „mitte“ nicht mehr da steht wo er hin soll! Mit einem „clear:left“ Befehl kann ich das Problem nicht lösen, da die Navigation auch mit einem „float:left“ Befehl versehen ist! Hier noch mal das Script (ich hoffe ohne Flüchtigkeitsfehler ): Code:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>clear</title> <style type="text/css"> div.navi { float:left; width:100px; background-color:#CCCCCC; } div.inhalt { margin-left:100px; } div.links { width:100px; float:left; background-color:#FF0000; } div.rechts { margin-left:100px; background-color:#00FF00; } div.mitte { background-color:#FFFF00; } </style> </head> <body> <div class="navi"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div> <div class="inhalt"> <div class="links">links mit viel Text</div> <div class="rechts">rechts</div> <div class="mitte">mitte</div> </div> </body> </html>
__________________
Mit freundlichem Gruß MJA |
|
|||
Aha, jetzt ist's klarer.
Wenn du möchtest, dass sich ein clear nur innerhalb des Elements .inhalt auswirkt, dann musst du die Elemente in einem eigenen "Block Formatting Context" einkapseln. Hier hat iChao aufgelistet, welche Eigenschaften sich dafür eignen. In deinem Fall crossbrowsertauglich nicht ganz einfach anzuwenden. Ich würde folgenden Ansatz versuchen: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>clear</title> <style type="text/css"> #wrap { margin-left:100px; } /* \*/ * html #wrap { height:1%; } /* */ div.navi { float:left; width:100px; margin-left:-100px; background-color:#CCCCCC; } /* \*/ * html .navi { display:inline; /* anti doubled float-margin bug */ position:relative; } /* */ div.inhalt { float:left; width:100%; } div.links { width:100px; float:left; background-color:#FF0000; } div.rechts { margin-left:100px; background-color:#00FF00; } div.mitte { background-color:#FFFF00; clear:left; } </style> </head> <body> <div id="wrap"> <div class="navi"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div> <div class="inhalt"> <div class="links">links mit viel Text</div> <div class="rechts">rechts</div> <div class="mitte">mitte</div> </div> </div> </body> </html> Der IE braucht ein bisschen Nachhilfe, aber in meinem Schnelltest (nur Win) gab's keine Probleme mehr. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Gelöst!- CSS Problem - clear Befehl | madmaxy | CSS | 2 | 01.08.2011 23:23 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
overflow nur für bestimmte Elemente im div | Samhayne | CSS | 5 | 22.02.2010 14:32 |
Div Float Clear usw... Ich dreh durch ;) | buggix | CSS | 14 | 11.02.2010 09:42 |
Elemente in einem Div Container links & rechts ausrichte | oliwa | CSS | 8 | 16.07.2004 15:39 |