nicht angemeldet
Float Problem
Hallo,
ich versuche ein zweispaltiges Layout zu bauen, bei dem wenn der viewport zu klein wird zuert die rechte und darunter die linke Spalte angezeigt wird.
Wenn genügend Platz ist natürlich die rechte rechts neben der linken.
Das fuktioniert soweit auch, allerdings wird mir die rechte Spalte rechtsbündig angezeigt, ich hätte sie aber gerne linksbündig (and der linken Spalte)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
#rechts { float:right; width:780px; background:yellow;}
#links { float:left; width:380px; background:red; }
#content { color:#494949; margin-left:4px; width:776px; overflow:hidden; min-height:700px; background:green; }
#footer { overflow:hidden; background:#587DBE; color:white; font-size:12px; height:17px; margin-left:10px; width:780px; text-align:right; }
</style>
<title>Floattest</title>
</head>
<body>
<div id='container'>
<div id='rechts'>
<div id='content'>
<p>Some Text rechts</p><p>Some Text rechts</p><p>Some Text rechts</p>
</div> <!-- content -->
<div id="footer">Footer</div>
</div> <!-- rechts -->
<div id='links'>
<p>Links</p><p>Links</p><p>Links</p><p>Links</p><p>Links</p>
</div> <!-- links -->
</div> <!-- container -->
</body>
</html>
-
Denke entweder konsequent von rechts nach links, oder von links nach rechts.
Das heisst, auch deinen Link-Container musst du rechts floaten. Er sollte aber dennoch links vom content angezeigt werden.mfg Beat
-
Danke!
Das heisst, auch deinen Link-Container musst du rechts floaten. Er sollte aber dennoch links vom content angezeigt werden.
Meist Du so: Jetzt wird der rechts Container am rechten rand und der links container direkt links daneben
So schauts aus:
[leer][links][rechts]
so hätte ich´s gerne
[links][rechts][leer]<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } #rechts { float:right; width:780px; background:yellow;} #links { float:right; width:380px; background:red; } #content { color:#494949; margin-left:4px; width:776px; overflow:hidden; min-height:700px; background:green; } #footer { overflow:hidden; background:#587DBE; color:white; font-size:12px; height:17px; margin-left:10px; width:780px; text-align:right; } </style> <title>Floattest</title> </head> <body> <div id='container'> <div id='rechts'> <div id='content'> <p>Some Text rechts</p><p>Some Text rechts</p><p>Some Text rechts</p> </div> <!-- content --> <div id="footer">Footer</div> </div> <!-- rechts --> <div id='links'> <p>Links</p><p>Links</p><p>Links</p><p>Links</p><p>Links</p> </div> <!-- links --> </div> <!-- container --> </body> </html>-
Danke!
Das heisst, auch deinen Link-Container musst du rechts floaten. Er sollte aber dennoch links vom content angezeigt werden.
Meist Du so: Jetzt wird der rechts Container am rechten rand und der links container direkt links daneben
So schauts aus:
[leer][links][rechts]
so hätte ich´s gerne
[links][rechts][leer]Und was ist deine erwünschte rechte Leere anderes als die Differenz zwischen dem rechten Viewport und dem rechten Rand des Containers, der eine maximale Breite vorgeschrieben bekommt?
mfg Beat
--
<°)))o>< ><o(((°>o
-
Und was ist deine erwünschte rechte Leere anderes als die Differenz zwischen dem rechten Viewport und dem rechten Rand des Containers, der eine maximale Breite vorgeschrieben bekommt?
Das verstehe ich leider nicht. Muss ich dem <div id='container'> eine Breite geben?
Das habe ich mal versucht, aber dann klappt es nicht meht, dass der rechte container unter dem linken angezeigt wird, wenn der Platz ausgeht.
-
Und was ist deine erwünschte rechte Leere anderes als die Differenz zwischen dem rechten Viewport und dem rechten Rand des Containers, der eine maximale Breite vorgeschrieben bekommt?
Das verstehe ich leider nicht. Muss ich dem <div id='container'> eine Breite geben?
Das habe ich mal versucht, aber dann klappt es nicht meht, dass der rechte container unter dem linken angezeigt wird, wenn der Platz ausgeht.
Du hast min-width max-width und width zur Verfügung, sowie absolute und relative Einheiten. Nichts zwingt dich dazu, zu allen drei Breitenparametern den gleichen Einheits-Typ zu verwenden.
mfg Beat
-
Du hast min-width max-width und width zur Verfügung, sowie absolute und relative Einheiten. Nichts zwingt dich dazu, zu allen drei Breitenparametern den gleichen Einheits-Typ zu verwenden.
Im gewünschten Layout habe die beiden Spalten eine fixe grösse.
Bitte nicht ganz so in Rätseln sprechen :-)-
Du hast min-width max-width und width zur Verfügung, sowie absolute und relative Einheiten. Nichts zwingt dich dazu, zu allen drei Breitenparametern den gleichen Einheits-Typ zu verwenden.
Im gewünschten Layout habe die beiden Spalten eine fixe grösse.
Bitte nicht ganz so in Rätseln sprechen :-)Konzentriere deinen Blick auf den Viewport, und auf #container.
(dem du zu diesem Zweck vielleicht mal einen Border gibst.)
Dann überlege dir das Verhalten dieses Containers bezüglich einem unbekannt dimensionierten Viewport. Denn in diesem Container prügeln sich deine Float Bereiche. Dein Float Anliegen ist da nämlich nur die halbe Antwort.mfg Beat
-
Konzentriere deinen Blick auf den Viewport, und auf #container.
(dem du zu diesem Zweck vielleicht mal einen Border gibst.)
Dann überlege dir das Verhalten dieses Containers bezüglich einem unbekannt dimensionierten Viewport. Denn in diesem Container prügeln sich deine Float Bereiche. Dein Float Anliegen ist da nämlich nur die halbe Antwort.WEnn der Container ne Breite hat, werden die divs links und rechts immernoch am rechten Rand ausgerichted.
Wenn des Fenster kleiner als div id='container' wird, wird jetz einfach abgeschnitten.<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } #container { width:1200px; min-height:20px; background:grey; text-align:left; border:3px solid black;} #rechts { float:right; w_idth:780px; background:yellow;} #links { float:right; width:380px; background:red; } #content { color:#494949; margin-left:4px; width:776px; overflow:hidden; min-height:700px; background:green; } #footer { overflow:hidden; background:#587DBE; color:white; font-size:12px; height:17px; margin-left:10px; width:780px; text-align:right; } </style> <title>Floattest</title> </head> <body> <div id='container'> <div id='rechts'> <div id='content'> <p>Some Text rechts</p><p>Some Text rechts</p><p>Some Text rechts</p> </div> <!-- content --> <!-- <div id="footer">Footer</div> --> </div> <!-- rechts --> <div id='links'> <p>Links</p><p>Links</p><p>Links</p><p>Links</p><p>Links</p> </div> <!-- links --> </div> <!-- container --> </body> </html>-
Konzentriere deinen Blick auf den Viewport, und auf #container.
(dem du zu diesem Zweck vielleicht mal einen Border gibst.)
Dann überlege dir das Verhalten dieses Containers bezüglich einem unbekannt dimensionierten Viewport. Denn in diesem Container prügeln sich deine Float Bereiche. Dein Float Anliegen ist da nämlich nur die halbe Antwort.WEnn der Container ne Breite hat, werden die divs links und rechts immernoch am rechten Rand ausgerichted.
Das ist bei float:right normal, oder?
Wenn des Fenster kleiner als div id='container' wird, wird jetz einfach abgeschnitten.
Das liegt an deiner festen Breite.
Stelle deine Richtlinien klar: absolut relativ (geeignetes ankreuzen)
Wie breit soll der Container maximal sein [ ] [ ]
Wie breit soll er minimal sein [ ] [ ]
Wie breit soll er optimal (normal) sein. [ ] [ ]Richte dann die Breitenangaben der inneren Bereiche nach diesen Vorgaben aus.
mfg Beat
-
WEnn der Container ne Breite hat, werden die divs links und rechts immernoch am rechten Rand ausgerichted.
Das ist bei float:right normal, oder?
Wenn des Fenster kleiner als div id='container' wird, wird jetz einfach abgeschnitten.
Das liegt an deiner festen Breite.Stelle deine Richtlinien klar: absolut relativ (geeignetes ankreuzen)
Wie breit soll der Container maximal sein [x] [ ]
Wie breit soll er minimal sein [x] [ ]
Wie breit soll er optimal (normal) sein. [x] [ ]Vielleicht gehe ich das ganze Problem ja völlig falsch an.
Was ich erreichen will, sind zwei Sachen.- zwei Spalten fester Breite am linken Bildschirmrand ausgerichtet nebeneinander, wenn der Platz horizontal ausreicht.
- Wenn der Platz horizontal nicht ausreicht, soll die vorher rechte Spalte als erste, dann darunter die vorher linke Spalte jeweils am linken Bildschirmrand ausgerichtet dargestellt werden (wieder mif der fixen Breite).
Vielleicht löst man das ganz anders, als ich es versucht hatte.
-
Stelle deine Richtlinien klar: absolut relativ (geeignetes ankreuzen)
Wie breit soll der Container maximal sein [x] [ ]
Wie breit soll er minimal sein [x] [ ]
Wie breit soll er optimal (normal) sein. [x] [ ]Du bist aber böse. Das ist auch nicht sinnvoll.
Wenn etwas eine Breite von 100px hat, dann ist min-width 200px per se ein widerspruch. Wie wird sich ein Browser verhalten?gute Beispiele schlechte Beispiele
normal 1000px 100% 1000px 100%
min 50% 500px 50pt 50%
max 100% 1200px 365mm 150%Vielleicht gehe ich das ganze Problem ja völlig falsch an.
Eventuell. Du kannst nicht normal fest und min/max AUCH feste Einheiten haben.
Was ich erreichen will, sind zwei Sachen.
- zwei Spalten fester Breite am linken Bildschirmrand ausgerichtet nebeneinander, wenn der Platz horizontal ausreicht.
Warum müssen sie feste Breite haben? Auf einem modernen Browser hat praktisch nur noch der Bildschirm eine feste Breite.
- Wenn der Platz horizontal nicht ausreicht, soll die vorher rechte Spalte als erste, dann darunter die vorher linke Spalte jeweils am linken Bildschirmrand ausgerichtet dargestellt werden (wieder mif der fixen Breite).
Das ist sicher löblich.
Aber das W3C hat definiert, dass Dimensionen von root nach den childelemnten zu berechnen sind. Also musst du die Bedingungen der übergeordneten Elemente definieren.Vielleicht löst man das ganz anders, als ich es versucht hatte.
Denke nochmals über Einheiten und normal/min/max nach.
mfg Beat
-
Du bist aber böse. Das ist auch nicht sinnvoll.
Warum müssen sie feste Breite haben? Auf einem modernen Browser hat praktisch nur noch der Bildschirm eine feste Breite.
die linke Spalte enthält nur eine "schmückende" Grafik. die hat ne feste Breite.
für die rechte, die Inhaltsspalte wird auch eine feste Breite gewünscht, da das Verhältnis zu einer im rechten Container liegenden Grafik fix sein soll.Moderne Browser skalen doch trotzdem mitsamt den Bilderen hoch.
Was mir alternativ auch gefallen würde wäre, dass die Linke Spalte mit der Grafik schmaler wird, wenn der Platz nicht reicht.
habe hier mal min-width:10px versucht (Beispielcode unten), das wirkt aber nicht.Mir ist das ganz width Modell nicht ganz klar. Wann wird denn ein Element auf seine min-Größe reduziert.
<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } #container { width:1200px; min-height:20px; background:grey; text-align:left; border:3px solid black; } #rechts { float:left; width:780px; background:yellow; } #links { float:left; min-width:10px; width:380px; background:red; overflow:hidden;} #content { color:#494949; margin-left:4px; width:776px; overflow:hidden; min-height:700px; background:green; } #footer { overflow:hidden; background:#587DBE; color:white; font-size:12px; height:17px; margin-left:10px; width:780px; text-align:right; } </style> <title>Floattest</title> </head> <body> <div id='links'> <p>Links</p><p>Links</p><p>Links</p><p>Links</p><p>Links</p> </div> <!-- links --> <div id='rechts'> <div id='content'> <p>Some Text rechts</p><p>Some Text rechts</p><p>Some Text rechts</p> </div> <!-- content --> <!-- <div id="footer">Footer</div> --> </div> <!-- rechts --> <div id='links'> <p>Links</p><p>Links</p><p>Links</p><p>Links</p><p>Links</p> </div> <!-- links --> </body> </html>-
Yerf!
Mir ist das ganz width Modell nicht ganz klar. Wann wird denn ein Element auf seine min-Größe reduziert.
Wenn du width und min-width in Pixeln angibst: nie.
Das ist auch das, was dir Beat versucht hat zu sagen. Du musst für eine der beiden Angaben ein relative Angabe verwenden.
In deinem Fall würde sich
width:100%; max-width:1200px; min-width:780px;für #container anbietenGruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
die linke Spalte enthält nur eine "schmückende" Grafik. die hat ne feste Breite.
für die rechte, die Inhaltsspalte wird auch eine feste Breite gewünscht, da das Verhältnis zu einer im rechten Container liegenden Grafik fix sein soll.
Moderne Browser skalen doch trotzdem mitsamt den Bilderen hoch.Webdesign, dass Browser Zoom überhaupt als Möglichkeit denkt, ist irgendwie auf dem falschen Pfad.
Fixe Dimensionierung gibt schnell horizontale Scrollbalken.Hier ist meine bevorzugte Dimensionierung für Fliesstext:
div.text{ width:35em; max-width:99%; }
Vielleicht hat dabei eine Randglosse noch neben dem div platz. Wenn nicht, wird sie runtergeschoben.
div.text{ float:left; width:35em; max-width:99%; }
div.glosse{ width:15em; }<div class=text>Text</div>
<div class=glosse>Glosse</div>mfg Beat
-
div.text{ width:35em; max-width:99%; }
in welcher Situation ist denn dein Bsp oben unterschiedlich zu:?
div.text{ width:35em; }-
div.text{ width:35em; max-width:99%; }
in welcher Situation ist denn dein Bsp oben unterschiedlich zu:?
div.text{ width:35em; }Ich sage explizit. Mache mir ein div für Fliesstext 35em gross. Wenn die Schriftgrösse skaliert wird, dann wird auch das Div entsprechend der Schriftgrösse skaliert.
ABER, wenn die Breite nun 99% des übergeodneten Elements errreicht (könnte das body Element sein), dann verbreitere nicht mehr.
Mein Fliesstext wird auch auf schmalen Bildschirmen angezeigt. Auf sehr grossen Bildschirmen ist aber die Breite Begrenzt auf 35em. Ob der Buchstabe nun 10cm gross auf einer Grossleinwand ist, oder 2mm auf einem Kleinstdisplay.mfg Beat
-
-
-
-
Hi,
Vielleicht löst man das ganz anders, als ich es versucht hatte.
Nö - das Problem ist mMn nach gar nicht lösbar.
Denkbar sind folgende Szenarien:
1. Inhalt float:right, Menü float:left
2. Inhalt float:right, Menü static
3. Menü float:left, Inhalt static
4. Menü float:left, Inhalt float: left|rightIn keinem Fall ist Dein Wunsch realisierbar.
1. und 2. ergeben Rechtsausrichtung,
3. und 4. zeigt das Menü zuerst an.Dein Wunsch dürfte nur mit einem rechts floatendem Menü umzusetzen sein.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-
-