nicht angemeldet
float:left-Problem
Hi!
Wunsch:
Zwei divs stehen nebeneinander, zwischen Ihnen eine senkrechte Linie. Der Inhalt des rechten div wird unter Umständen mehrzeilig sein; bei wachsender Höhe soll die Trennlinie mitwachsen. Nachfolgende Elemente sollen unterhalb dieses Konstrukts weiterfließen.
Wirklichkeit:
Verzweifeltes rumprobieren ohne den gewünschten Erfolg!
Das brauchbarste Ergebnis sieht so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Unbenannt</title>
<style type="text/css">
#vll,#vlr,#ftx{ vertical-align:top;padding:10px;margin:0px; }
#vll{ float:left;width:100px;text-align:right; }
#vlr{ float:left;border-left:1px solid #666; }
#ftx{ float:none; }
</style>
</head>
<body>
<div id="vll">linke Seite</div>
<div id="vlr">rechte Seite<br>zweite Zeile<br>dritte Zeile</div>
<div id="ftx">Folgetext</div>
</body>
</html>
Dabei befindet sich jedoch der Folgetext rechts vom rechten div - wie zu erwarten, wenn für das rechte div float:left angegeben ist. Nehme ich dieses float:left jedoch heraus, so explodiert die ganze Angelegenheit. Ein float:none für den Folgetext hat keinen Effekt.
Ich test mit IE 6 - mit anderen Browsern wird die Depression wahrscheinlich noch stärker!
Fällt Euch was zielführendes dazu ein?
TIA Robert
-
Hallo,
versuchs mal mit Span-Tags anstatt DIVs oder mit position:relative in den DIV-Tags, obwohl die Inlinelayer wohl eher funktionieren dürften.
#vll,#vlr,#ftx{ vertical-align:top;padding:10px;margin:0px; } erstmal zum Testen weglassen.Wenn ich Dich richtig verstanden habe, versuch mal das:
<style type="text/css">
.vll{ float:left;width:100px;text-align:right; }
.vlr{ float:left;border-left:1px solid #666; }
.ftx{ float:none; }
.main { vertical-align:top;padding:10px;margin:0px; }
SPAN {position:relative;font-size:normal;}
DIV {position:absolute;top:10px;left:10px;border:ridge 1px blue;}
/* Border nur zum Testen sichtbar gemacht.
/* für einen test :
.main2{ vertical-align:top;padding:10px;margin:0px;font-size:2px; }
*/
</style><DIV id="Layout" class="main" ><P class"main2" >
<SPAN class="vll">linke Seite</SPAN>
<SPAN class="vlr">rechte Seite<br>zweite Zeile<br>dritte Zeile</SPAN>
<SPAN class="ftx">Folgetext</SPAN>
</P>
</DIV>Gruss
Michael
-
Hallo Michael,
danke für die Anregung! Leider sieht das Ergebnis so aus:
<img src="http://www.aperion.de/test_hs/vl1.gif" border=0 alt="">
So soll es aussehen:
<img src="http://www.aperion.de/test_hs/vl2.gif" border=0 alt="">
Robert
-
-
Hallo,
ich würde es so machen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Unbenannt</title><style type="text/css">
#vll,#vlr,#ftx {
vertical-align:top;
padding:10px;
margin:0px;
}
#holder {
float:left;
width:200px;
}
#vll {
display:inline;
width:100px;
background:green;
text-align:right;
}
#vlr {
display:inline;
width:100px;
background:red;
border-left:1px solid #666;
}
#ftx {
}
</style>
</head><body>
<div id="holder">
<div id="vll">
linke Seite
</div>
<div id="vlr">
rechte Seite<br />
zweite Zeile<br />
zweite Zeile<br />
zweite Zeile<br />
zweite Zeile<br />
zweite Zeile<br />
zweite Zeile<br />
dritte Zeile
</div>
</div>
<br clear="all" />
<div id="ftx">Folgetext</div>
</body></html>
Gruss
MarkHi!
Wunsch:
Zwei divs stehen nebeneinander, zwischen Ihnen eine senkrechte Linie. Der Inhalt des rechten div wird unter Umständen mehrzeilig sein; bei wachsender Höhe soll die Trennlinie mitwachsen. Nachfolgende Elemente sollen unterhalb dieses Konstrukts weiterfließen.Wirklichkeit:
Verzweifeltes rumprobieren ohne den gewünschten Erfolg!Das brauchbarste Ergebnis sieht so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Unbenannt</title>
<style type="text/css">
#vll,#vlr,#ftx{ vertical-align:top;padding:10px;margin:0px; }
#vll{ float:left;width:100px;text-align:right; }
#vlr{ float:left;border-left:1px solid #666; }
#ftx{ float:none; }
</style>
</head><body>
<div id="vll">linke Seite</div>
<div id="vlr">rechte Seite<br>zweite Zeile<br>dritte Zeile</div>
<div id="ftx">Folgetext</div>
</body></html>
Dabei befindet sich jedoch der Folgetext rechts vom rechten div - wie zu erwarten, wenn für das rechte div float:left angegeben ist. Nehme ich dieses float:left jedoch heraus, so explodiert die ganze Angelegenheit. Ein float:none für den Folgetext hat keinen Effekt.
Ich test mit IE 6 - mit anderen Browsern wird die Depression wahrscheinlich noch stärker!
Fällt Euch was zielführendes dazu ein?
TIA Robert
-
Hi Mark,
Deine Lösung funktioniert im IE.
Aber - Netscape 6:<img src="http://www.aperion.de/test_hs/vl4.gif" border=0 alt="">
und Opera 6:
<img src="http://www.aperion.de/test_hs/vl3.gif" border=0 alt="">
Scheinbar kann ich nicht alles haben - NS, Opera, IE, XHTML 1.1 und mein Wunsch-Layout! Da ich so langsam die Geduld verliere, werde ich wahrscheinlich auf eine Tabelle mit zwei Zellen zurückgreifen; dabei frage ich mich, was die Hardliner zu einer Seite sagen, welche als DocType XHTML 1.1 deklariert und an einigen Stellen Tabellen zu Layoutzwecken nutzt?
Danke!
Robert
-
-
Hallo,
vielleicht gefällt Dir dies:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Links-Rechts-Probe</title>
<style type="text/css">
#vll,#vlr,#ftx{ vertical-align:top;padding:10px;margin:0px; }
#vll{ float:left;width:100px;text-align:right;background-color:blue }
#vlr{ border-left:1px solid #666;margin-left:120px;background-color:orange }
#ftx{ clear:left;background-color:green }
</style>
</head><body>
<div id="vll">linke Seite</div>
<div id="vlr">rechte Seite<br>zweite Zeile<br>dritte Zeile</div>
<div id="ftx">Folgetext</div>
</body></html>
Beachte, dass der DOCTYPE 'strict' angegeben ist, sonst macht IE6 einen Abstand zwischen vll und vlr (jedenfalls bei mir).
Gruß
juergen.ter
-
Hallo Jürgen,
vielleicht gefällt Dir dies:
und ob!
#vll,#vlr,#ftx{ vertical-align:top;padding:10px;margin:0px; }
#vll{ float:left;width:100px;text-align:right;background-color:blue }
#vlr{ border-left:1px solid #666;margin-left:120px;background-color:orange }
#ftx{ clear:left;background-color:green }Beachte, dass der DOCTYPE 'strict' angegeben ist, sonst macht IE6 einen Abstand zwischen vll und vlr (jedenfalls bei mir).
Unter XHTML 1.1 werden im IE6 durch das linke div die in gleicher Höhe liegenden Zeilen des rechten divs um zwei Pixel nach rechts verschoben. Wenn die reche Seite höher ist als die linke, wird ein kleiner Versatz erzeugt. Das Problem verschwindet, indem man die rechte Seite auch nach links floaten läßt:
#vll,#vlr,#ftx{ vertical-align:top;padding:10px;margin:0px; }
#vll{ float:left;width:100px;text-align:right; }
#vlr{ border-left:1px solid #666;margin-left:0px;float:left; }
#ftx{ padding:0px;clear:left; }Der Knackpunkt liegt in der Eigenschaft clear. Da dachte ich, wenigstens alltagstaugliche CSS-Grundkenntnisse zu besitzen - keinen blassen Schimmer habe ich! Wie kann man einen auch nur halbwegs kontrollierten Fluß im Dokument erzeugen, ohne clear zu kennen?
Das bringt mich wirklich voran und wird auch für einige andere Probleme, die noch in der Schublade liegen, einen neuen Ansatz liefern.
Vielen Dank!
Robert
-
-
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>csstest</title>
<style type="text/css">
/*<![CDATA[*/
p {
margin:0px;
font:400 11px verdana,sans-serif;
color:#000;
background:transparent;
}#container {
width:200px;
}
#container2 {
clear:both;
}
#erstespalte {
float:left;
padding-right:5px;
width:100px;
text-align:right;
background:#f5f5f5;
}
html>body #erstespalte {
width:95px;
}
#zweitespalte {
float:left;
padding-left:5px;
width:100px;
text-align:left;
background:#d3d3d3;
border-left:1px solid #000;
}
html>body #zweitespalte {
width:94px;
}/*]]>*/
</style></head>
<body id="body">
<div id="container1">
<div id="erstespalte">
<p>
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
</p>
</div><div id="zweitespalte">
<p>
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
welt<br />
</p>
</div></div>
<div id="container2">
<p>
weiter gehts weiter gehts weiter gehts weiter gehts weiter gehts weiter gehts weiter gehts weiter gehts
</p>
</div></body>
</html>
Gruss
Mark-
#container2 {
clear:both;Hallo Mark,
danke für Deine Bemühungen! Habe das Problem heute morgen mit Jürgens Lösung beseitigen können. Wie bei Deiner Lösung ist der entscheidende Punkt die Eigenschaft "clear" des Selektors für den Bereich unterhalb der beiden aneinandergereihten divs.
Es wundert mich, daß mir so etwas wichtiges wie das Attribut "clear" nicht schon vorher hier im Forum begegnet ist - vermutlich wurde es absichtlich verheimlicht, um mich bei allen möglichen Schwierigkeiten mit tabellenlosen XHTML-Ansätzen ahnungslos rumprobieren zu lassen!-)
Robert
-