nicht angemeldet
Dreipaltiges CSS-Layout und float im inneren Div-Container
Hallo,
ich habe ein dreispaltiges CSS-Layout nach dem Vorbild des SELFHTML-Layouts erstellt. Das Problem: Möchte man nun im inneren "Content"-Container Elemente ebenfalls umfließend gestalten, wird das komplette äußere Layout zerwürfelt. Das heißt, Elemente die innerhalb des mittleren Containers mittels float positioniert werden sollen, "verlassen" das gesamte Layoutgerüst. Wie richtet man nun Elemente in diesem mittleren Container aus, so dass sich alle float-Angaben lediglich relativ auf den umfassenden Container beziehen?
Vielen Dank für jeden Tipp,
Robert.
-
Hi Robert,
ich habe ein dreispaltiges CSS-Layout nach dem Vorbild des SELFHTML-Layouts erstellt....Wie richtet man nun Elemente in diesem mittleren Container aus, so dass sich alle float-Angaben lediglich relativ auf den umfassenden Container beziehen?
Ein bisschen Code, von dem was du gemacht hast wäre ganz hilfreich, um dir helfen zu können.
Grüße,
Engin
GYRO-
Hi Engin,
ich habe ein dreispaltiges CSS-Layout nach dem Vorbild des SELFHTML-Layouts erstellt....Wie richtet man nun Elemente in diesem mittleren Container aus, so dass sich alle float-Angaben lediglich relativ auf den umfassenden Container beziehen?
Ein bisschen Code, von dem was du gemacht hast wäre ganz hilfreich, um dir helfen zu können.
Du hast Recht, ich hätte wohl gleich den Code posten sollen. Ich hatte das zunächst nicht gemacht, weil er doch recht lang ist und ich nicht weiß, wie das hier im Forum gehandhabt wird. Wie auch immer, hier ist er. Worauf es ankommt: Ich möchte die drei <p>-Blöcke im Content-Container eigentlich innerhalb des Containers darstellen, wobei diese nebeneinander platziert werden sollen:
Danke schonmal für weitere Tipps,
Robert:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0; padding: 0;
border: 1px dashed silver; background-color: #eee;
}
div#Info strong {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}div#Inhalt {
margin: 0 12em 0 16em;
padding: 0 1em;
border: 1px dashed silver;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 0.5em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
</style>
</head>
<body><ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul><div id="Info">
<strong>Info-Box</strong>
<p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.</p>
<p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
die Angabe einer Breite verzichtet werden und die Seite den ihr zur
Verfügung stehenden Raum ausnutzen.</p>
<p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
</div><div id="Inhalt">
<h1>CSS-basierte Layouts</h1>
<h2>3-spaltiges Layout</h2>
<div style="float:right; ">
<p style="float:right; ">In diesem Beispiel ist die Breite der Navigation etwas reduziert,
um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
die Schriftgröße der Navigation und Info-Box ist etwas verringert,
um den relativ geringen Breiten Rechnung zu tragen.</p>
<p style="float:right; ">Nur für die äußeren Boxen ist eine Breite und float angegeben.
Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
<p style="float:right; ">Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
gehalten und passt sich flexibel an die Fensterbreite an.</p>
</div>
</div></body>
</html>-
Hi Robert,
Du hast Recht, ich hätte wohl gleich den Code posten sollen. Ich hatte das zunächst nicht gemacht, weil er doch recht lang ist und ich nicht weiß, wie das hier im Forum gehandhabt wird.
Alles kein Problem, /hilfe/charta.htm, /hilfe/bedienung.htm.
Wie auch immer, hier ist er. Worauf es ankommt: Ich möchte die drei <p>-Blöcke im Content-Container eigentlich innerhalb des Containers darstellen, wobei diese nebeneinander platziert werden sollen:
Sorry das ich jetzt nicht dein beispiel erweitert hab, aber nach zwanzig Minütigem experimentieren und
einer schlaflosen Nacht und einem Stressigen tag kriegte ich das
nicht mehr hin, also habe ich kurzer Hand http://nimmet.de umstrukturiert,
im mittleren blog sind die links zu den CSS dateien, wenn es dir zusagt, dann nimmet dir. ;-)Grüße,
Engin
GYRO-
Hi Engin,
Sorry das ich jetzt nicht dein beispiel erweitert hab, aber nach zwanzig Minütigem experimentieren und
einer schlaflosen Nacht und einem Stressigen tag kriegte ich das
nicht mehr hin, also habe ich kurzer Hand http://nimmet.de umstrukturiert,
im mittleren blog sind die links zu den CSS dateien, wenn es dir zusagt, dann nimmet dir. ;-)Vielen Dank für deine Mühen. Dank auch für dein Beispiel, das schaue ich mir näher an und es scheint ebenfalls stark in Richtung Problemlösung zu tendieren.
Grüße,
Robert.
-
-
-
-
Hallo,
Hallo,
ich habe ein dreispaltiges CSS-Layout nach dem Vorbild des SELFHTML-Layouts erstellt.
Welches?
Das Problem: Möchte man nun im inneren "Content"-Container Elemente ebenfalls umfließend gestalten, wird das komplette äußere Layout zerwürfelt. Das heißt, Elemente die innerhalb des mittleren Containers mittels float positioniert werden sollen, "verlassen" das gesamte Layoutgerüst. Wie richtet man nun Elemente in diesem mittleren Container aus, so dass sich alle float-Angaben lediglich relativ auf den umfassenden Container beziehen?
Du müsstest dem Browser klarmachen, daß das umgebende Element ein eigener "Block" ist. Das ginge, indem Du die overflow Eigenschaft anders als den Standard visible definierst.
Für Nichtbrowser (sprich IE<7) geht es auch dem Element "hasLayout" zu verpassen, z.B. mit
height:1%;
.netten Tag
^da Powl-
Hi Powl,
danke für deine Antwort.
Hallo,
ich habe ein dreispaltiges CSS-Layout nach dem Vorbild des SELFHTML-Layouts erstellt.
Welches?
Dieses hier: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig
Du müsstest dem Browser klarmachen, daß das umgebende Element ein eigener "Block" ist. Das ginge, indem Du die overflow Eigenschaft anders als den Standard visible definierst.
Hat nix geholfen. Erscheint mir auch nicht die richtige Lösung zu sein. Mit overflow regele ich doch, wie sich ein Element innerhalb eines Blocks (zb. Div-Container) verhält, falls es größer als das umgebende Element ist. Das ist in meinem Fall nicht nötig, da die inneren Elemente (<p>-Blöcke) keine festen Größen besitzen. Sie sollen nur spaltenförmig nebeneinander angeordnet werden. Das funktioniert innerhalb des mittleren div-Containers aber irgendwie nicht mehr nach dem Floating-Prinzip.
Für Nichtbrowser (sprich IE<7) geht es auch dem Element "hasLayout" zu verpassen, z.B. mit
height:1%;Diesen Absatz verstehe ich gerade nicht?
Vielen Dank für weitere Tipps (siehe auch Quellcodelisting beim Reply auf die nachfolgende Nachricht.
Robert.
-
Hallo,
Hat nix geholfen. Erscheint mir auch nicht die richtige Lösung zu sein. Mit overflow regele ich doch, wie sich ein Element innerhalb eines Blocks (zb. Div-Container) verhält, falls es größer als das umgebende Element ist. Das ist in meinem Fall nicht nötig, da die inneren Elemente (<p>-Blöcke) keine festen Größen besitzen. Sie sollen nur spaltenförmig nebeneinander angeordnet werden. Das funktioniert innerhalb des mittleren div-Containers aber irgendwie nicht mehr nach dem Floating-Prinzip.
Jein, mit overflow gibst Du auch den "block-formatting-context" an, schau mal hier.
Für Nichtbrowser (sprich IE<7) geht es auch dem Element "hasLayout" zu verpassen, z.B. mit
height:1%;Diesen Absatz verstehe ich gerade nicht?
Das "hasLayout" ist ein MS-eigenes System. Da google einfach mal nach.
Deinen geposteten Code habe ich um ein div#foo erweitert, dann funktioniert das mit overflow. Eventuell funktioniert das auch ohne zusätzlichen div, wenn Du overflow eben für #inhalt setzt. Das habe ich aber nicht ausprobiert. Der rote Rahmen ist nur zum veranschaulichen und kann wieder verschwinden. Im IE habe ich das so nicht getestet, aber da sollte es, falls es so nicht geht, mit
* html div # foo {
height:1%;
}
auch funktionieren. Musst Du ausprobieren, was da nötig wird.
Alternativ kann man auch am Textende mit einem abschließenden Element und "clear:both;" arbeiten.netten Tag
^da PowlACHTUNG: Hier kommt ein Karton:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Dreispaltiges Layout</title> <style type="text/css"> body { color: black; background-color: white; font-size: 100.01%; font-family: Helvetica,Arial,sans-serif; margin: 0; padding: 1em; min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */ } ul#Navigation { font-size: 0.83em; float: left; width: 18em; margin: 0; padding: 0; border: 1px dashed silver; } ul#Navigation li { list-style: none; margin: 0; padding: 0.5em; } ul#Navigation a { display: block; padding: 0.2em; font-weight: bold; } ul#Navigation a:link { color: black; background-color: #eee; } ul#Navigation a:visited { color: #666; background-color: #eee; } ul#Navigation a:hover { color: black; background-color: white; } ul#Navigation a:active { color: white; background-color: gray; } div#Info { font-size: 0.9em; float: right; width: 12em; margin: 0; padding: 0; border: 1px dashed silver; background-color: #eee; } div#Info strong { font-size: 1.33em; margin: 0.2em 0.5em; } div#Info p { font-size: 1em; margin: 0.5em; } div#Inhalt { margin: 0 12em 0 16em; padding: 0 1em; border: 1px dashed silver; } div #foo { border:1px solid red; overflow:auto; } div#Inhalt h1 { font-size: 1.5em; margin: 0 0 0.5em; } div#Inhalt h2 { font-size: 1.2em; margin: 0.2em 0; } div#Inhalt p { font-size: 1em; margin: 1em 0; } </style> </head> <body> <ul id="Navigation"> <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li> <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li> <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li> <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li> <li><a href="browserweichen.htm">CSS-Browserweichen</a></li> </ul> <div id="Info"> <strong>Info-Box</strong> <p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.</p> <p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf die Angabe einer Breite verzichtet werden und die Seite den ihr zur Verfügung stehenden Raum ausnutzen.</p> <p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen durch das falsche Box-Modell des Internet Explorer auszugleichen.</p> </div> <div id="Inhalt"> <div id="foo"> <h1>CSS-basierte Layouts</h1> <h2>3-spaltiges Layout</h2> <div style="float:right; "> <p style="float:right; ">In diesem Beispiel ist die Breite der Navigation etwas reduziert, um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen; die Schriftgröße der Navigation und Info-Box ist etwas verringert, um den relativ geringen Breiten Rechnung zu tragen.</p> <p style="float:right; ">Nur für die äußeren Boxen ist eine Breite und float angegeben. Durch die Angabe der Breiten relativ zur Schriftgröße in 'em' können sich die Boxen einer Änderung des Schriftgrades anpassen.</p> <p style="float:right; ">Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand gehalten und passt sich flexibel an die Fensterbreite an.</p> <!-- <div style="clear:both"></div> --> </div><!-- #foo geschlossen --> </div> </div> </body> </html>-
Sorry:
ein Typo im selector, muss heissen
* html div #foo {
height:1%;
}netten Tag
^da Powl-
Mann Mann, das glaube ich mir echt nicht :(
FALSCH:
* html div# foo {
height:1%;
}RICHTIG:
* html div#foo {
height:1%;
}netten Tag
^da Powl*denEDITbuttonvermissthabe*
-
Hi Powl,
vielen Dank nochmal für deine Tipps.
Mann Mann, das glaube ich mir echt nicht :(
FALSCH:
* html div# foo {
height:1%;
}RICHTIG:
* html div#foo {
height:1%;
}Funktioniert leider noch nicht so richtig. Im IE haut's hin (inkl. height:1%), der Firefox tut aber nicht so, wie ich will. Dafür scheint mir dein Linktipp zum Thema "overflow" die Lösung meines Problemes zu beinhalten. Dank!
Robert.
-
-
-
-
-
