float: WAS ist das nachfolgende element???
michaah
float: WAS ist das nachfolgende element???
michaah
Taag,
es gelingt mir nicht, die blaue box so floaten zu lassen, dass der "inhalt: eine ul-liste" *neben* der roten zu liegen kommt. Geht das überhaupt?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style=" margin: 3em auto; background: #FBEDC1; width: 66%; height: auto; color: #000; background-color: yellow;">
<h1 style="width:100%;">Unser Angebot an <strong>bli bla blub</strong></h1>
<div style=" width:33%; margin:3em 5em 0 1.5em; background-color: red;">
<p>nur ausnahmsweise finden werden. </p>
<p>Folgen sie einfach dieser kleinen Tour </p>
<p>einige Informationen und Eindrücke</p>
<p>Als ganz besondernen Service</p>
<p>
<img src="1.jpg" height="137" width="191" style="padding:0 0 0em 0">
<br>
<img src="2.jpg" height="128" width="191" style="padding:0 0 0em 0">
<br>
<img src="3.jpg" height="103" width="191" style="padding:0 0 0em 0">
<br>
<img src="4.jpg" height="122" width="191" style="padding:0 0 0em 0">
</p></div>
<div style="width:50; margin:0 1.5em 0 1.5em; padding: 0 0 0 35%; background-color:blue;">
<ul>inhalt: eine ul-liste
<li>inhalt</li>
<li>inhalt</li>
<li>inhalt</li>
<li>inhalt</li>
<li>inhalt</li>
<li>inhalt</li>
<li>inhalt</li></ul>
</div>
</div>
</body>
</html>
gruß
michaah
-
hallo,
es gelingt mir nicht, die blaue box so floaten zu lassen, dass der "inhalt: eine ul-liste" *neben* der roten zu liegen kommt. Geht das überhaupt?
Selbstverständlich. Du mußt ihn bloß da hinschreiben, wo du diesen Text haben willst, so, wie du es angegeben hast, kann es nicht wunschgemäß funktionieren. Mach es so:
<div style="width:33%; margin:3em 5em 0 1.5em; background-color: red; float:left;">
<p>nur ausnahmsweise finden werden. </p>
<p>Folgen sie einfach dieser kleinen Tour </p>
<p>einige Informationen und Eindrücke</p>
<p>Als ganz besondernen Service</p>
<p><img src="1.jpg" height="137" width="191" style="padding:0 0 0em 0"><br>
<img src="2.jpg" height="128" width="191" style="padding:0 0 0em 0"><br>
<img src="3.jpg" height="103" width="191" style="padding:0 0 0em 0"><br>
<img src="4.jpg" height="122" width="191" style="padding:0 0 0em 0"></p>
</div><p style="margin:13em 15em 0 1.5em;"> inhalt: eine ul-liste</p>
Grüße aus Berlin
Christoph S.
-
Danke für deine erste antwort, hatte mich zwar schon dafür bedankt, aber irgendwie dieses posting wohl ins nirvana geschickt. Nurn gibt es eine nachfolgefrage:
Die oberste zeile in der roten und in der blauen box sind als absatz formatiert. Der abstand, wie im styles bereich definiert, wirkt sich auf die oberste zeile der blauen box nicht aus. ( Auch dass die rote box nicht mehr die höhe der schwarzen box bestimmt ist mir ein rätsel. Vor allem da sich der wert für den unteren rand auch nicht auf den abstand auswirkt. )
Warum ist das so und wie ist damit sinnvoll umzugehen? Ich will ja nicht bie jeder floatenden box meine stylesheet überarbeiten müssen. Danke für hilfreiche tipps!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style type="text/css" media="screen">
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}html {
height: 100%;
}body {
height: 100%;
background: #FBEDC1;
font-size: 100.01%;
}#inhalt { width: 85%; color: #000; background-color: green;}
#inhalt p {
font-size: 1em;
line-height: 1.5em;
color: black;
/*der marginwert "2" ist hier das problem. Ist er auf "0", sind jeweils die erste zeile in der blauen und in der roten box auf gleicher höhe. Ist der wert ungleich "0", wirkt er sich auf die oberste zeile der blauen box NICHT aus, warum?*/
margin: 2em 0em 2em 0em ;
}</style>
</head><body>
<div id="inhalt">
<h1 style="width:100%;">Unser Angebot an <strong>bli bla blub</strong></h1>
<div style="width:90%; margin:5em auto; background-color: white;">
<div style="width:66%; margin:0em 0em 0em 0em; background-color: red; float:left;">
<p>nur ausnahmsweise finden werden. </p>
<p>Folgen sie einfach dieser kleinen Tour </p>
<p>einige Informationen und Eindrücke</p>
<p>Als ganz besondernen Service</p>
<p><img src="1.jpg" height="137" width="191" style="padding:0 0 0em 0"><br>
<img src="2.jpg" height="128" width="191" style="padding:0 0 0em 0"><br>
<img src="3.jpg" height="103" width="191" style="padding:0 0 0em 0"><br>
<img src="4.jpg" height="122" width="191" style="padding:0 0 0em 0"></p>
</div><div style="margin:0em 0em 0em 0em; background-color:blue;">
<p>inhalt: eine ul-liste</p>
<p>m vnbn nnp9 </p>
<p>o oivn ioj on</p>
<p> ojio odoohio</p>
<p> iohiodfh ioc </p>
<p>oifh ioiofnoh oid oisdnio</p>
<p>miuh hsih iskxhclkx kkxc is i idhc laiha olch ishc ishoiah ishoa isch oaish osh a</p>
</div>
</div>
</div>-
Vorabe: Bitte entschuldigt die doppelpostings. Mir ist das oben passiert, das ich eeine frage ohne code geposted habe, das hat nun einen Rattenschwanz and hin und her postings ergeben. tut mir leid. Nun antworte ich mir selber um hier die überschrift klarer zu machen, sonst habe ich ja überhaupt keine chance mehr, dass da jemand reinschaut, ich hoffe dass das jetzt geht, wenn ich eine vorschau generieren lasse:
Danke für deine erste antwort, hatte mich zwar schon dafür bedankt, aber irgendwie dieses posting wohl ins nirvana geschickt. Nurn gibt es eine nachfolgefrage:
Die oberste zeile in der roten und in der blauen box sind als absatz formatiert. Der abstand, wie im styles bereich definiert, wirkt sich auf die oberste zeile der blauen box nicht aus. ( Auch dass die rote box nicht mehr die höhe der schwarzen box bestimmt ist mir ein rätsel. Vor allem da sich der wert für den unteren rand auch nicht auf den abstand auswirkt. )
Warum ist das so und wie ist damit sinnvoll umzugehen? Ich will ja nicht bie jeder floatenden box meine stylesheet überarbeiten müssen. Danke für hilfreiche tipps!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style type="text/css" media="screen">
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}html {
height: 100%;
}body {
height: 100%;
background: #FBEDC1;
font-size: 100.01%;
}#inhalt { width: 85%; color: #000; background-color: green;}
#inhalt p {
font-size: 1em;
line-height: 1.5em;
color: black;
/*der marginwert "2" ist hier das problem. Ist er auf "0", sind jeweils die erste zeile in der blauen und in der roten box auf gleicher höhe. Ist der wert ungleich "0", wirkt er sich auf die oberste zeile der blauen box NICHT aus, warum?*/
margin: 2em 0em 2em 0em ;
}</style>
</head><body>
<div id="inhalt">
<h1 style="width:100%;">Unser Angebot an <strong>bli bla blub</strong></h1>
<div style="width:90%; margin:5em auto; background-color: white;">
<div style="width:66%; margin:0em 0em 0em 0em; background-color: red; float:left;">
<p>nur ausnahmsweise finden werden. </p>
<p>Folgen sie einfach dieser kleinen Tour </p>
<p>einige Informationen und Eindrücke</p>
<p>Als ganz besondernen Service</p>
<p><img src="1.jpg" height="137" width="191" style="padding:0 0 0em 0"><br>
<img src="2.jpg" height="128" width="191" style="padding:0 0 0em 0"><br>
<img src="3.jpg" height="103" width="191" style="padding:0 0 0em 0"><br>
<img src="4.jpg" height="122" width="191" style="padding:0 0 0em 0"></p>
</div><div style="margin:0em 0em 0em 0em; background-color:blue;">
<p>inhalt: eine ul-liste</p>
<p>m vnbn nnp9 </p>
<p>o oivn ioj on</p>
<p> ojio odoohio</p>
<p> iohiodfh ioc </p>
<p>oifh ioiofnoh oid oisdnio</p>
<p>miuh hsih iskxhclkx kkxc is i idhc laiha olch ishc ishoiah ishoa isch oaish osh a</p>
</div>
</div>
</div>-
Hallo michaah
Die oberste zeile in der roten und in der blauen box sind als absatz formatiert. Der abstand, wie im styles bereich definiert, wirkt sich auf die oberste zeile der blauen box nicht aus.
Du hast ein Problem mit collapsing-margins (zusammenfallenden Rändern).
Bei der roten Box hast du dieses Problem nicht, weil diese durch float einen neuen Block formatting context erzeugt.Abhilfe z.B. ein Border um die blaue Box, der den Margin dieser von dem der umschließenden Box trennt.
( Auch dass die rote box nicht mehr die höhe der schwarzen box bestimmt ist mir ein rätsel. Vor allem da sich der wert für den unteren rand auch nicht auf den abstand auswirkt. )
Gefloatete Elemente werden aus dem Elementfluss genommen, sie haben keinen Einfluss mehr auf andere Blockelemente, es sei denn, nachdem das Float aufgehoben wurde (clear), oder dieses Element selbst einen Block formatting context erzeugt (im IE - Hashlayout).
Lies dazu mal Grundlagen für Spaltenlayout mit CSS - Umgebungen verschachteln.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi,
danke für deine antworten, ich saß etwas auf kohlen, da ich mich weiter oben wohl durch meine over-flüssigen doppelpostings etwas aus dem elementfluß genommen habe, wobei overflow in html in der version "hidden" dann doch wieder ganz hilfreich sein kann ... wenn ich das irgendwann auch wirklich verstehe.
Du hast ein Problem mit collapsing-margins (zusammenfallenden Rändern).
Agrrr, das ist leider nicht das erste mal, und an sich war mir das problem bekannt ... nur eben nicht bewußt in dem augenblick, wo es sinnvoll gewesen wäre. Danke fürs draufstubbsen. Grundsätlich: Müte ich nicht beiden boxen eine rhamen geben, weil die rahmenhöhe sich ja zum margin addiert udn es somit eine unterschied zwischen den beiden boxen gäbe?
( Auch dass die rote box nicht mehr die höhe der schwarzen box bestimmt ist mir ein rätsel. Vor allem da sich der wert für den unteren rand auch nicht auf den abstand auswirkt. )
Gefloatete Elemente werden aus dem Elementfluss genommen, sie haben keinen Einfluss mehr auf andere Blockelemente, es sei denn, nachdem das Float aufgehoben wurde (clear), oder dieses Element selbst einen Block formatting context erzeugt (im IE - Hashlayout).
Das ist noch etwas verwirrend, ich mache jetzt mal learning by antwortschreibing:
Interessant war die feststellung, dass die rote box die höhe der schwarzen box dann bestimmt, wenn ich der schwarzen box auch den wert "float:left" zuweise. Aber genau dies bewirkt nun eine komplette begriffsverwirrung. Was ist mit "gefloatete element" gemeint, das element, die box, in deren style "float:wasauchimmer" definiert ist, oder die (nachfolge) box, die dadurch ja eigentlich aus dem normalen elementfluß genommen wird. Aber genau die definiert entgegen (?) deienr beschreibung ja die höhe der schwarzen box... wie eben auch die rote box, wenn ich wie weiter ober erwähnt vorgehe.
So, zu guter letzt auch noch eine erweiterung des float boxen problems. Die neu dazugekommene kleine box ganu unter links ist eigentlich meine navi box. Die war bislang mit position:absolute ganz nach rechts geklebt worden, unter den kopf bereich. Das klappt aber nur dan gut, wenn der kopfbereich eine feste höhe auf allen unterseiten hat ... was auf grund verschiedenzeiliger überschriften nicht der fall ist ... also möchte ich sie um die schwarze box floaten lassen. Sie floatet nicht! Ich befürchte, dass ich nur damit weiterkomme, diese box auf 100% auszudehnen und den inhalt mit padding an der rechten ran zu drücken und zu haffen dass es dann klappt. Nur wird mir dann jetze schon übel bei dem gedanken, dass ich sämtlichen boxfehler ja anschließend noch IE tauglich von 5.x bis 7.0 machen muß und keine ahnung habe, wele klöpse ich mir hier nun selber in den weg lege.
Für eine hinweis zur grundsätzlichen strategie diesbezüglich wäre ich sehr dankbar. Heir nun der cod für das erweiterte layout:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style type="text/css" media="screen">
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}html {
height: 100%;
}body {
height: 100%;
background: #FBEDC1;
font-size: 100.01%;
}#inhalt { width: 85%; color: #000; background-color: green; float:left;}
#inhalt p {
font-size: 1em;
line-height: 1.5em;
color: black;
/*der marginwert "2" ist hier das problem. Ist er auf "0", sind jeweils die erste zeile in der blauen und in der roten box auf gleicher höhe. Ist der wert ungleich "0", wirkt er sich auf die oberste zeile der blauen box NICHT aus, warum?*/
margin: 2em 0em 2em 0em ;
}
#navi { background: #001058; width: 15%; height: auto; color: #ffffff; padding: 0em 0em 0em 0em; }ul#navih {
width: 100%;
height:auto;
margin: 0; padding: 0.3em;
text-align: center;
background-color: #001058;
}ul#navih li { color: #FBEDC1; display: inline;}
</style>
</head><body>
<div style="background: #001058; width: 100%; border-width:1px; border-style:solid; border-color:#001058;">
<h1 style="text-align:left;
font-weight:bolder;
font-size:150%;
letter-spacing:0.2em;
color: #f60;
margin: 0.7em 0 0.3em 1.5em;">Über-<br>Schrift<br>keyword</h1><p style="text-align:right; margin-right:5.5em; margin-top:1.5em;">
<img style="position: absolute; right:5.5em; top:1.5em;" src="./logo.gif" title="ein name" name="logo" alt="logo der mamens GMBH"></p><ul id="navih" class="klein" style="color:#FBEDC1; clear:left" >
<li>Das | </li><li>ist | </li><li>eine | </li><li>horizontale | </li><li>navigations- | </li><li>leiste | </li><li>mit ul | </li><li>und | </li><li>li | </li><li>inline</li>
</ul>
</div><!--<div style=" margin: 3em auto; background: #FBEDC1; width: 66%; height: auto; color: #000; background-color: yellow;">-->
<div id="inhalt"><h1 style="width:100%;">Unser Angebot an <strong>bli bla blub</strong></h1>
<div style="width:90%; margin:5em auto; background-color: white;">
<div style="width:66%; margin:0em 0em 0em 0em; background-color: red; float:left;">
<p>nur ausnahmsweise finden werden. </p>
<p>Folgen sie einfach dieser kleinen Tour </p>
<p>einige Informationen und Eindrücke</p>
<p>Als ganz besondernen Service</p>
<p><img src="1.jpg" height="137" width="191" style="padding:0 0 0em 0"><br>
<img src="2.jpg" height="128" width="191" style="padding:0 0 0em 0"><br>
<img src="3.jpg" height="103" width="191" style="padding:0 0 0em 0"><br>
<img src="4.jpg" height="122" width="191" style="padding:0 0 0em 0"></p>
</div><div style="margin:0em 0em 0em 0em; background-color:blue;;">
<p>inhalt: eine ul-liste</p>
<p>m vnbn nnp9 </p>
<p>o oivn ioj on</p>
<p> ojio odoohio</p>
<p> iohiodfh ioc </p>
<p>oifh ioiofnoh oid oisdnio</p>
<p>miuh hsih iskxhclkx kkxc is i idhc laiha olch ishc ishoiah ishoa isch oaish osh a</p>
</div>
</div>
</div><div id="navi">
<p>Navigation</p>
<p>o oivn ioj on</p>
<p> ojio odoohio</p>
<p> iohiodfh ioc </p>
<p>oifh ioiofnoh oid oisdnio</p></div>
</body>
</html>-
Hallo michaah
... wobei overflow in html ...
Hat nichts mit HTML zu tun.
... in der version "hidden" ...
Wenn für ein Element overflow mit einem von visible abweichenden Wert gesetzt ist, erzeugt es einen eigenen block formatting context, genauso, wie auch float mit einem von none abweichenden gültigen Wert. Wobei hidden nicht immer optimal ist, weil es dabei passieren kann, dass Inhalte unerreichbar abgeschnitten werden. Bei
overflow:autowürden in diesem Extremfall eben Scrollbalken angezeigt.
IE kennt keinen block formatting context sondern stattdessen Hashlayout, was etwa aufs gleiche hinauskommt und z.B. mit einer Höhenangabe ausgelöst werden kann.Agrrr, das ist leider nicht das erste mal, und an sich war mir das problem bekannt ... nur eben nicht bewußt in dem augenblick, wo es sinnvoll gewesen wäre.
Bei den Absätzen verlässt du dich auf die collapsing-margins (sonst wären sie 4em auseinander).
Grundsätlich: Müte ich nicht beiden boxen eine rhamen geben, weil die rahmenhöhe sich ja zum margin addiert udn es somit eine unterschied zwischen den beiden boxen gäbe?
Hmm - ein Unterscheid von einem Pixel, wenn der auffallend oder störend ist, dann ja.
Ein Border ist auch nicht immer nötig, oft lässt sich durch die Verwendung von padding oder eine günstige Kombination von margin und padding der unerwünschte Effekt bei zusammenfallenden Rändern vermeiden.Was ist mit "gefloatete element" gemeint,
Das Element, dem du ein float (left oder right) zugewiesen hast. Es hat damit _keinen_ Einfluss mehr auf umschließende oder nachfolgende Blockelemente, die sich im normalen Fluss befinden.
das element, die box, in deren style "float:wasauchimmer" definiert ist,
Nicht "wasauchimmer" sondern ein zulässiger Wert außer none, also left oder right.
oder die (nachfolge) box, die dadurch ja eigentlich aus dem normalen elementfluß genommen wird.
Nein, diese Box befindet sich im ganz normalen Elementfluss. Sie wird genau dort angezeigt, wo sie auch angezeigt würde, wenn das gefloatete Element nicht vorhanden wäre, auch in ihr enthaltene Blockelemente. Nur Texte und Inlineelemenente werden durch das gefloatete Element verdrängt bzw. umfließen es. (Bei dem Beispiel siehst du es, wenn du genau hinschaust.)
Die neu dazugekommene kleine box ganu unter links ist eigentlich meine navi box. Die war bislang mit position:absolute ganz nach rechts geklebt worden, unter den kopf bereich. Das klappt aber nur dan gut, wenn der kopfbereich eine feste höhe auf allen unterseiten hat ... was auf grund verschiedenzeiliger überschriften nicht der fall ist ...
Du könntest mal nachlesen, auf welches Element sich position:absolute bezieht.
... also möchte ich sie um die schwarze box floaten lassen.
Du meinst oben rechts in #inhalt anordnen und durch den weiteren Inhalt umfließen lassen?
Sie floatet nicht!
Du solltest #navi vielleicht als erstes Element in #inhalt anordnen und ihm ein
float:rightverpassen. Außerdem müsstest du dann die Regeln bei #inhalt p für diese wieder aufheben (#navi p {...}).
Sollte #navi nicht vielleicht auch eher eine Liste statt eines Divs mit Textabsätzen darin sein?Noch etwas:
Entferne bitte die Inlinestyles und schreibe _alles_ ins zentrale CSS. Es wird damit übersichtlicher.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef;
danke für deine erklärungen.
Was ist mit "gefloatete element" gemeint,
Das Element, dem du ein float (left oder right) zugewiesen hast. Es hat damit _keinen_ Einfluss mehr auf umschließende oder nachfolgende Blockelemente, die sich im normalen Fluss befinden.
Manchaml sind die einfachsten erklärungen die wichtigsten. Ich habe "gefloatetes element" fälschlischerweise immer irgendwie mit "umfloatendem" und nicht mit "umfloateTem" (= gefloatete) element assoziert. Das war natürlich schlampig und und hat zu missverständnissen bei meiner vorstellung geführt.
oder die (nachfolge) box, die dadurch ja eigentlich aus dem normalen elementfluß genommen wird.
... Nur Texte und Inlineelemenente werden durch das gefloatete Element verdrängt bzw. umfließen es. (Bei dem Beispiel siehst du es, wenn du genau hinschaust.)
Puhhh, das steht doch noch mächtig denkarbeit an:
... Aber auch da ist es wohl ein assoziierungproblem: Ich stell(t)e mir immer die box als das sich verschiebende elemnt vor, obwohl ich ja weiß, dass rechts liegende boxen sich eigentlich unter den linksliegenden fortsetzen (soweit es kein float:right-boxen sind). Aber dein hinweis macht mir das nochmal klar, dass es die texte und inline-inhalte sind, die umfließen und dabei die sie umschließende box gewissermaßen mitnehmem. Vllt ist letzteres eine bildliche vorstellung, die den tatsachen am besten entspricht. Zumindest verhindert sie bei mir die falsche vorstellung, dass die box sich verschieben würde. Es ist der inhalt der box, der sich verschiebt.
Die neu dazugekommene kleine box unten links ist eigentlich meine navi box. Die war bislang mit position:absolute ganz nach rechts geklebt worden, unter den kopf bereich. Das klappt aber nur dann gut, wenn der kopfbereich eine feste höhe auf allen unterseiten hat ... was auf grund verschiedenzeiliger überschriften nicht der fall ist ...
Du könntest mal nachlesen, auf welches Element sich position:absolute bezieht.
Das ist mir soweit klar, in meinem fall ist das da html-element selbst.
Du solltest #navi vielleicht als erstes Element in #inhalt anordnen und ihm ein
float:rightverpassen.Irgend eine andere idee, die NICHT erfordert, das navi element als erstes element in die #inhaltsbox zu schreiben? Wenn es gar nicht anders geht verpasse ich dem kopfberich doch noch eine fixe höhe und positioniere dann das navi absolut.
..Außerdem müsstest du dann die Regeln bei #inhalt p für diese wieder aufheben (#navi p {...}).
Sollte #navi nicht vielleicht auch eher eine Liste statt eines Divs mit Textabsätzen darin sein?Noch etwas:
Entferne bitte die Inlinestyles und schreibe _alles_ ins zentrale CSS. Es wird damit übersichtlicher.Du hast vollkommen recht, das soll natürlich auch im endergebnis nicht so sein, das habe ich nur so schnell aus dem orginal zusammenkopiert, navi ist natürlich eine liste und die styles gehören alle ins stylesheet. Ich schreibe das nur beim ausprobiern meist schnell in die elemente, damit es auch wirklich dort ankommt wo es hinsoll. Aber ich sollte wohl mal beginnen, in meinem steylesheet häufiger kommentare bzw. hinweise und merkzeichen einzufügen, damit ich schneller die jeweiligen elemente finde.
Danke nochmal, man wird sich hoffentlich weiterlesen ...
Michael
-
Hallo Michael
... Nur Texte und Inlineelemenente werden durch das gefloatete Element verdrängt bzw. umfließen es. (Bei dem Beispiel siehst du es, wenn du genau hinschaust.)
Puhhh, das steht doch noch mächtig denkarbeit an:
Übrigens, das verlinkte Beispiel entstand ursprünglich, um selbst das Verhalten gefloateter Elemente zu kapieren.
Du könntest mal nachlesen, auf welches Element sich position:absolute bezieht.
Das ist mir soweit klar, in meinem fall ist das da html-element selbst.
Wohl nicht wirklich. Hast du nachgelesen, oder es nur überflogen, ohne zu verstehen, was dort steht?
Irgend eine andere idee, die NICHT erfordert, das navi element als erstes element in die #inhaltsbox zu schreiben? Wenn es gar nicht anders geht verpasse ich dem kopfberich doch noch eine fixe höhe und positioniere dann das navi absolut.
Um #navi absolut zu positionieren braucht der Kopfbereich keine feste Höhe. Es reicht aus, wenn #navi Kind von #inhalt ist und du dafür sorgst, dass sich die absolute Positionieren nicht auf den Viewport sondern auf #inhalt bezieht.
(absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das _nicht_ die Normaleinstellung position:static aufweist.)
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Du könntest mal nachlesen, auf welches Element sich position:absolute bezieht.
Das ist mir soweit klar, in meinem fall ist das da html-element selbst.
Wohl nicht wirklich. Hast du nachgelesen, oder es nur überflogen, ohne zu verstehen, was dort steht?
Nun, wie du weiter unten beschreiben hast, bezieht sich position:absolute auf das nächste oberhalb liegende als nicht-static definierte elternelement. In ermangelung eines solchen bezieht es sich dann doch eben auf das oberste element, nicht? Oder ist body absolut positioniert?
..nochmal nachgelesen: ok, da war ich zu weit gegangen, wobei es nicht unbedingt einleuchtet, warum das so ist, denn zunächstmal heißt das ja, das bodyelement wäre abweichend von static positioniert:
"Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element."
Und das hat mir Gunnar ja schon klar gemacht, dass body in seiner lage nicht mit dem html-element übereinstimmen muß. In soweit hätte ich erwartet, dass das oberste element eben das äußerste ist, das html element. ???Irgend eine andere idee, die NICHT erfordert, das navi element als erstes element in die #inhaltsbox zu schreiben? Wenn es gar nicht anders geht verpasse ich dem kopfberich doch noch eine fixe höhe und positioniere dann das navi absolut.
Um #navi absolut zu positionieren braucht der Kopfbereich keine feste Höhe. Es reicht aus, wenn #navi Kind von #inhalt ist und du dafür sorgst, dass sich die absolute Positionieren nicht auf den Viewport sondern auf #inhalt bezieht.
Das ist das, was ich von anfang an ver- und gesucht habe, aber ich bin immer davon ausgegangen, dass ich bei undefinierter höhe von #kopf die darunterliegende box nicht sauber positionieren kann ausser durch die standardeinstellung. Aber eben fällt mir ein, ich könnte natürlich mein inhaltselement mit "position:relative; top:0; left:0;" als nicht-static definieren, dann müßte es gehn. Wenn das klappt werde ich es ja selbst sehen, wenn das jedoch auch falsch ist ( oder es eine bessere möglichkeit gib ) hoffe ich hier weiteres zu hören.
Danke, wieder ein paar unklarheiten weniger, werde ich aber wohl nicht mehr heute umsetzen.
Man wird sich lesen ;-)
Michael
-
Um #navi absolut zu positionieren braucht der Kopfbereich keine feste Höhe. Es reicht aus, wenn #navi Kind von #inhalt ist und du dafür sorgst, dass sich die absolute Positionieren nicht auf den Viewport sondern auf #inhalt bezieht.
Das ist das, was ich von anfang an ver- und gesucht habe, aber ich bin immer davon ausgegangen, dass ich bei undefinierter höhe von #kopf die darunterliegende box nicht sauber positionieren kann ausser durch die standardeinstellung. Aber eben fällt mir ein, ich könnte natürlich mein inhaltselement mit "position:relative; top:0; left:0;" als nicht-static definieren, dann müßte es gehn. Wenn das klappt werde ich es ja selbst sehen, wenn das jedoch auch falsch ist ( oder es eine bessere möglichkeit gib ) hoffe ich hier weiteres zu hören.
Fast, die schwierigkeit ist noch folgende: Mein #inhalt erstreckt sich nur über 85% der breite, mein #navi die restlichen 15%. Nehme ich nun das #navi in das #inhalts-div mit hinein, dann habe ich nur noch 15% von 85%, aber erstaunlicherweise klappt sogar die angabe: right:-15%; um das #navi rechts ausserhalb des #inhalts anzuzeigen.
Möchte ja eigentlich ne div-suppe vermeiden, aber wenn ich damit meine probleme gelöst bekomme gibt es eben noch ein div mit 100% breite aussenherum und das #navi da hinein.
Jetzt aber s'nächtle ...
-
Hallo Michael
... , aber erstaunlicherweise klappt sogar die angabe: right:-15%; um das #navi rechts ausserhalb des #inhalts anzuzeigen.
Warum sollte das nicht klappen?
Bei right (Startposition von rechts) ist angeben, dass eine Numerische Angabe erlaubt ist.
CSS 2.1 -right sagt, dass außer auto <length> und <percentage> erlaubt sind.Möchte ja eigentlich ne div-suppe vermeiden, aber wenn ich damit meine probleme gelöst bekomme gibt es eben noch ein div mit 100% breite aussenherum und das #navi da hinein.
Du brauchst kein zusätzliches Div, eine Positionierung mit einem negativen Wert ist doch möglich und mir ist auch kein Browser bewusst, der damit Probleme hätte.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef
Möchte ja eigentlich ne div-suppe vermeiden, aber wenn ich damit meine probleme gelöst bekomme gibt es eben noch ein div mit 100% breite aussenherum und das #navi da hinein.
Du brauchst kein zusätzliches Div, eine Positionierung mit einem negativen Wert ist doch möglich und mir ist auch kein Browser bewusst, der damit Probleme hätte.
Der negative prozent wert ist nicht das problem, sondern dass ich dann nicht mehr 15% von 100% habe sondern 15% von 85%.
Das kann ich umgehen, wenn ich den inhalt bei 100% ( statt 85%) belasse. Aber dann klappt natürlich die zentrierung nicht mehr. Habe versucht dies mittels padding oder margin auszugleichen, aber irgendwie komme ich immer vom regen in die traufe.
-
-
-
-
-
-
-
-
-
-
-