zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden clear Befehl und verschachtelte div Elemente

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.05.2006, 15:27
Benutzerbild von MJA
MJA MJA ist offline
Grün
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2006
Beiträge: 14
MJA befindet sich auf einem aufstrebenden Ast
Frage clear Befehl und verschachtelte div Elemente

Hi,
ich habe meine links Navigationsleiste mit einem float:left Befehl versehen. Zu Problemen kommt es nun, wenn im Inhaltsbereich noch ein float:left zu Einsatz kommt und dieser wieder mit clear:left beendet wird. Dann wird nämlich auch der float Befehl aus der Navigationsleiste beendet.

Etwas schwierig diesen Problem zu beschreiben, deswegen das ganze hier noch mal als kleines Beispiel:

Code:
<head>
<title>clear</title>
<style type="text/css">
div.navi {
	float:left;
	width:100;
	background-color:#CCCCCC;
}
div.inhalt {
	margin-left:100;
}
div.links {
	float:left;
	width:100px;
	background-color:#FF0000;
}
div.rechts {
	margin-left:100px;
	width:100px;
	background-color:#00FF00;
}
div.mitte {
	clear:left;
	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</div>
	<div class="rechts">rechts</div>
	<div class="mitte">mitte</div>
</div>
</body>
</html>
Habt ihr einen Tipp für mich wie ich clear Befehl nutzen kann, ohne den übergeordneten float Befehl der Navigation zu beenden?
Angehängte Grafiken
Dateityp: gif clear.gif (1,2 KB, 26x aufgerufen)

Geändert von MJA (31.05.2006 um 12:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.05.2006, 16:34
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

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. <<
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.05.2006, 17:47
Benutzerbild von MJA
MJA MJA ist offline
Grün
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2006
Beiträge: 14
MJA befindet sich auf einem aufstrebenden Ast
Standard

Du meinst ich sollte das hier löschen:

Code:
div.links {
	float:left;
}
div.mitte {
	clear:left;
}
Aber wie bekomme ich denn dann die Elemente "links" und "rechts" auf eine Zeile, ohne Umbruch?
__________________
Mit freundlichem Gruß
MJA

Geändert von MJA (31.05.2006 um 12:57 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 31.05.2006, 10:36
Benutzerbild von MJA
MJA MJA ist offline
Grün
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2006
Beiträge: 14
MJA befindet sich auf einem aufstrebenden Ast
Standard

Ich steh da momentan so ein bisschen aufm Schlauch. Wenn ich dem Bereich "div.links" kein float zuweise, wie bekomme ich dies dann auf eine Zeile mit "div.rechts"?
__________________
Mit freundlichem Gruß
MJA
Mit Zitat antworten
  #5 (permalink)  
Alt 31.05.2006, 10:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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).
Mit Zitat antworten
  #6 (permalink)  
Alt 31.05.2006, 12:56
Benutzerbild von MJA
MJA MJA ist offline
Grün
neuer user
Thread-Ersteller
 
Registriert seit: 01.02.2006
Beiträge: 14
MJA befindet sich auf einem aufstrebenden Ast
Standard

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>
Angehängte Grafiken
Dateityp: gif clear_2.gif (5,2 KB, 18x aufgerufen)
__________________
Mit freundlichem Gruß
MJA
Mit Zitat antworten
  #7 (permalink)  
Alt 31.05.2006, 13:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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>
Damit der Bereich .inhalt ein float und eine Breite von 100% bekommen kann, wird das ganze in einen #wrap mit linkem margin eingeschlossen. Die .navigation wird mit negativem margin nach links auf den margin-Bereich von #wrap gezogen.
Der IE braucht ein bisschen Nachhilfe, aber in meinem Schnelltest (nur Win) gab's keine Probleme mehr.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:45 Uhr.