|
|||
Dreispaltiges Layout: divs verrutschen + Höhen-Anpassung
Hallo,
Ich bastel grad an einer Website. Da ich das nur in meiner knapp bemessenen Freizeit mache, vermutlich auch mehr schlecht als recht. Was soll's, es muss 'ne neue her und ich muss mich nun einarbeiten, nachdem die letzte nach aktuellen Maßstäben eine ziemliche Katastrophe ist . Ich hab mich für ein dreispaltiges Layout entschieden. Dabei soll das mittlere div ("inhalt") sich automatisch der Textlänge anpassen in der Höhe. Die beiden divs links und rechts ("linkeseite" und "rechteseite" sollen sich dann dieser Höhe ebenfalls anpassen. Und das ist jetzt schon das Problem. Google wirft zu dem Thema ungefähr tausend Ergebnisse aus, ich hab auch schon zig durch, die FAQ in diesen und allen möglichen CSS-Seiten mehrfach gelesen und sitz jetzt seit Tagen dran und nicht mehr seit Stunden. Ich komm immer wieder auf "das geht überhaupt nicht..." zurück... Momentan hat das mittlere div ("inhalt") keine float-Eigenschaft mehr zugewiesen, weil es sonst - warum keine Ahnung - einen ominösen Abstand zum rechten div einhielt und bei Verkleinern des Browserfensters ganz unter die beiden Seiten-divs verschwand. Jetzt liegt es halt einfach "dahinter", aber dadurch wandert der Text auch links und rechts unter "linkeseite" und "rechteseite" - wo er nicht hinsoll. Ist der Text länger, verliert er sich inzwischen sogar unter das Fußteil ganz unten. Da soll der Text natürlich auch nicht hin. Faux columns helfen hier leider gar nicht, weil die Spalten nicht nur aus einer einzelnen reproduzierbaren Grafik oder Farbe bestehen sollen. Linkes div löschen und einfach die Grafik mit in den Hintergrund des mittleren stecken sieht besch*** aus und löst das Problem für die rechte Seite nicht. Und dann gibt's da noch das Problem, dass height 100% eigentlich doch auch nicht ganz richtig ist? Die Seite hat ja Kopfteil + Fußteil + 100 %. Wer kann helfen, wo ist das grundlegende Problem? Und vor allem: Wie kann man eine annehmbare Lösung draus machen? Hier der Einfachheit halber direkt zwei Links zur Baustelle: http://www.rottweiler-von-den-nibelu...ndex_test.html http://www.rottweiler-von-den-nibelu...tylesheets.css Grüße Alex |
Sponsored Links |
|
|||
Im ersten Schritt solltest Du deinen HTML-Code korrigieren:
[Invalid] Markup Validation of http://www.rottweiler-von-den-nibelungen.de/test/index_test.html - W3C Markup Validator Danach könntest Du dir mal die Beispiele hier für faux columns anschauen: 4 Methods For Creating Equal Height Columns In CSS - Vanseo Design |
Sponsored Links |
|
|||
Zitat:
selfhtml.de - HTML & CSS Forum: mit box-border DIVs auf gleiche Hhe und 100% bringen Mit dem damaligen Mozilla-Browser hat es nicht 100%ig funktioniert, aber das war ein Moz-Bug, der mittlerweile längst behoben ist. Ja, ich weiß, daß ich das bsp dringend überarbeiten müßte, aber vor 9 Jahren war ich eben auch noch ein Anfänger. Das sollte jetzt also nur mal eine Demo sein, daß gleich-lange Spalten mit border funktionieren. |
|
|||
Das ist schonmal erledigt.
Danke für die Links, nur komm ich damit bisher sehr begrenzt weiter. Hier z.B. ist ja das, was ich gemacht habe. Jedes div soll einer Spalte entsprechen. Und float hab ich jedem einzelnen als Eigenschaft zugewiesen - nur genau das funzt ja nicht. Dann verschwindet das mittlere div nach unten. Und wenn ich dem mittleren div height auto zuweise oder ganz weglasse, liegt es statt zwischen den beiden Seiten-divs dahinter...siehe verlinktes Beispiel oben. Grüße Alex |
|
|||
Nachtrag: Hab auch versucht, den inhalt mittels position: relative auszurichten, aber das ist nicht das Gelbe vom Ei. Sobald man dann das Browserfenster verkleinert, wandert der Text wieder über den Fußteil und das inhalts-div pappt natürlich über allem anderen drüber...
Gaby, deine Version hab ich auch probiert mit dem wrapped-Teil usw. Nur irgendwas mach ich da falsch. Damit verschwinden die beiden Seitenteile komplett, obwohl sie nach wie vor als divs definiert sind, Inhalt haben usw. Ich geb auf für heute... |
|
|||
...immernoch niemand eine Idee?
Hier nochmal die Codes... das menu-div wegen seiner Länge rausgelassen. HTML-Code:
<body> <div id="title"> <img src="logo4.png" alt="Das ist unser Zwingername ;)" id="zwingername" /> </div> <div id="linkeseite"> </div> <div id="rechteseite"> </div> <div id="inhalt"> <div id="text"> </div></div> <div id="fusszeile"><img src="test_logografik.jpg" alt=">Fußzeile"/></div> </body> Code:
html{ height:100%;} body { background-color: #4E4737; font-weight : normal; font-size:small; font-family: Arial, Helvetica, Verdana; sans-serif; text-align:justify; color: #FFF0C4; width: 100%; height:100%; } h1 {font-size:18px;color:#FFF0C4;} h2 {font-size:16px;color:#FFF0C4;} h3 {font-size:14px;color:#FFF0C4;} p {margin-top:0px;} a:link, a:visited { text-decoration:none; font-weight:normal; color:#634142; font-size:small; } a:active, a:hover { text-decoration:none; font-weight: normal; } #title { height:100px; overflow:hidden; background-image: url(kopfzeile_hintergrund.jpg); } #zwingername { float:left; width:524px; height:65px; margin-left:20px; margin-top: 25px; } #linkeseite, #rechteseite { margin-left: 0px; margin-right: 0px; overflow:hidden; background-color:green; border:none; height:100%; } #linkeseite { float:left; background-image: url(linkeseite.png); width: 240px; border-right: medium solid #3B3523; border-right-style: double; } #rechteseite { float:right; background-image: url(rechteseite.png); width: 100px; border-left: medium solid #3B3523; border-left-style: double; } #inhalt { float:right; width: 60%; margin-left:20px; margin-right:20px; margin-top:20px; margin-bottom:20px; background-image: url(mini_hg.png); height:100%; border: medium solid #3B3523; border-style: double; -moz-box-shadow: 0px 0px 10px 4px #000000; -webkit-box-shadow: 0px 0px 10px 4px #000000; box-shadow: 0px 0px 10px 4px #000000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000'); 09. } #text { float:left; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom10px; background: #4E4737; height:80%; font-weight : normal; font-size:12px; font-style : normal; font-family: Arial, Helvetica, sans-serif; text-align:justify; color: #FFF0C4; padding: 20px; border: 1px solid #3B3523; } #fusszeile { clear: both; margin-top:1em; background:#efefef; text-align:center; padding:0px; overflow:hidden; height: 100px; width: 100%; } .menutitle { font-weight:normal; margin-top:15px; } .rahmen { border: 2px solid #CCB49F;} * { margin: 0; padding: 0; } #menu { width: 100%; padding: 0px; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 13px; float: left; background-image: url(mini_hg.png); /* für den Hintegrund hinters Menü--*/ } #menu ul {/*--definiert die einzelnen Menüpunkte--*/ float: left; width: 115px; list-style-type: none; } /*--definiert die "Drop-Down-Links" im Normalzustand--*/ #menu a { text-decoration: none; display: block; border: none; text-align: center; background: #4E4737; background-image: url(mini_hg.png); height: 20px; width: 115px; border: medium solid #3B3523; border-style: double; line-height: 1.4; /*--Hintergrundbild für normale Unterpunkte der Navi--*/ color: #FFF0C4; } /*--definiert die "Drop-Down-Links" im Hoverzustand--*/ #menu a:hover { color: #FFF0C4; background: #4E4737; /*-- background-image: url(navi_hintergrund_hell.jpg); Hintergrundbild für Hover der Navi--*/ } /*verhindert im Zusammenhang mit position absolute bei ul ul *eine Höhenvergrößerung von #menu beim Hovern-- */ #menu li { position: relative; } /*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/ #menu ul ul { position: absolute; z-index: 2; display: none; } /*--lässt die Dropdown-Links beim Hovern erscheinen--*/ #menu ul li:hover ul { display: block; } /*--nur für IE-Versionen <=6 erkennbar--*/ * html #menu ul li { float: left; width: 100%; } /*--nur für IE 7 erkennbar--*/ *+ html #menu ul li { float: left; width: 100%; } /*--bewirkt Hover-Effekt für IE <7 auch für ul- und li-Elemente--*/ *html body { behavior: url(csshover3-source.htc); font-size: 100%; } *html #menu ul li a { height: 1%; } /*-- lässt die dritte Ebene verschwinden--*/ #menu ul li:hover ul ul {display: none;} /*-- lässt die dritte Ebene beim Hovern über die zweite in Erscheinung treten--*/ div#menu ul ul li:hover ul {display: block; position: absolute; top: 0; left: 100%;} Geändert von alexcss (28.02.2013 um 21:11 Uhr) |
|
|||
Problem mehr oder minder gelöst. Die Seiten bekommen %-Angaben mit max-width. Wer dann das Browserfenster auf irgendne winzige Größe runterverkleinert oder mit ner mini Auflösung unterwegs ist, sieht dann halt weniger drumherum...Nicht so perfekt, aber ein Anfang.
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen. | darkwave | CSS | 5 | 07.04.2011 14:11 |
Dreispaltiges Layout, clearing-Problem mittlere Spalte | akb | CSS | 6 | 21.08.2010 18:16 |
3 Spalten Layout mit Divs - mitte fest, Seiten dynamische Breite | devnull | CSS | 3 | 02.02.2009 11:03 |
Dreispaltiges Layout, problem... | Rasch | CSS | 7 | 11.06.2005 14:42 |
Layout mit 3 DIVs nebeneinander bringt IE zum abstürzen | theonlyrobi | CSS | 6 | 23.05.2005 11:22 |