CSS DIV Layout Höhenproblem

[Didl]

Hallo,
ich weiß, dass mit height und den DIV's ist ein kompliziertes Thema. Nun habe ich mein CMS aber auf dem neuesten Stand und wollte mich auch vom Tabellenlayout lösen, hin zum rein CSS-basierten DIV-Layout.

So sieht meine Vorlage aus:

Code: Select all

<div id="container"><div id="header">
<div class="nlu_horiz1">{NAV_LIST_UL:HCSS,,0,act_path,active}</div>
<div id="navi"><div class="breadcrumb">{BREADCRUMB}</div></div></div>
<div id="left-navigation" ></div>
<div id="content">{CONTENT}</div>
<div id="right-box">
<div id="footer"></div>
</div>
 

und so die entscheidenden CSS:

Code: Select all

html {min-height: 100%}
body  { font-size: 11px; font-family: Verdana, Helvetica, Arial, sans-serif; background-color: #e6e6e6; height:100%;}

#container      { background-color: #fff; margin: 10px auto; padding: 10px; width: 980px; border: solid 1px #ccc; w\idth: 960px }

#navi    { color: #666; font-size: 10px; font-family: Verdana, Arial, sans-serif; background-color: #efefef; text-align: center; margin-top: 0; margin-bottom: 0; padding: 0; height: 20px; border-top: 0 #ccc; border-right: #ccc; border-bottom: 0 #ccc; border-left: #ccc }

#header        { background-color: #efefef ; margin-bottom: 0; padding: 0; height: auto; border-style: solid solid none; border-width: 1px 1px 0; border-color: #ccc }

#left-navigation               { background-color: #f5f5f5; text-align: left; margin: 0; padding: 0; width: 195px;height:100%; float: left; border-left: 1px solid #808080 }

#content          { background-color: #fff; text-align: left; margin-top: 0; padding: 0; width: 560px;height:100%; float: left; border-top: medium none #efefef;  }

#right-box         { background-color: #fc0; text-align: left; margin: 0; padding: 0; width: 200px; height: 100%; float: right; border-right: 1px solid #808080 }

Klappt nicht! In der linken Navigationsbox left-navigation wird ein border-left immer nur bis Abschluss der Inhalte gezogen, nicht bis zum Footer. Gibt es da eine Lösung?
Selbst wenn ich eine Fixe Höhe eingebe, wenn der Inhalt überfließt, so wird auch dann weder der Border, noch z.B. der definierte Hintergrund mitgezogen.

[Jensensen]

Hi,

es gibt mittlerweile zwar diverse CSS Lösungen für dieses Problem (im Web suchen), aber da dein Layout feste Breiten hat, kannst du in

der #container box eine hintergrundgrafik montieren, die, sich wiederholend, die senkrechten Linien "bis unten" abbildet.
(prinzipiell, ggf. boxen umbauen, ergänzen)


Löse Dich von "height 100% Faxen". Das wird von Browsern anders gerendert bzw. abgebildet, als Du Dir das offenbar wünschst.
Wenn Deine #navi bspw. alle Links offeriert --> 100prozentig abbildet, aber in der Mitte der Seite endet, dann ist das für die Browser eine Box, die 100% da ist! (weil mehr is nich drin!!!)

Aber eben nicht bis zum Seitenende (Deine Auffassung von 100%) fortgeführt wird.


Umgekehrt: setze #navi mal auf <100% also bspw. 50% und schau Dir an, was passiert. (Müsste nur noch halb zu sehen sein, wenn überhaupt !! - da der Broswser die Inhalte ja irgendwo unterbringen muss - oder wird halt abgeschnitten...)


Box-Model halt

Tipp:

Mach ne Hintergrundgrafik 960px breit mit senkrechten trennlinien bei
195px --> #left-navigation
195+560px --> breite #content

und stell die bei #container in den BGround.

Greetz

[flip-flop]

Ja, das alte Problem mit dem so zirka 90% der CSS-Layouts kämpfen.

Hier ist ein Layout bei dem genau das berücksichtigt wurde.



Und hier kannst du dieses Layout herunterladen:

Code: Select all

http:// mz.ja-nek .de/picture/upload/File/layout07_2_v130.ZIP

Knut

[Klappstuhl28]

Ganz allgemein ist das hier ganzh hilfreich:

http://css-discuss.incutio.com/
http://www.positioniseverything.net

leider beides englisch

lars

[flip-flop]

Das obige Layout basiert auf einer Grundkonstruktion von Big John's Piefecta (http://www.positioniseverything.net/piefecta-rigid.html) welche wiederum überarbeitet wurde von Bruno Fassino.
Ich habe es dann letztendlich für phpWcms angepasst.

Knut

[digidotter]

Auch ich habe mich zwei Tage mit der Konstruktion auf 100% Höhe mit div beschäftigt. In IE7 und Firefox hatte ich es geschafft,- Hurra! Dann schaute ich durch Zufall nochmal auf IE6, da hatte ich einen "Picasso". Habe dann wieder in Tabellen gearbeitet.
Warum auch nicht (aber der Ehrgeiz war da).

Winfried

[pico]

Hi

wirf mal ein Blick auf YAML http://www.yaml.de
läst sich relativ einfach auch in phpwcms nutzen

[Didl]

Wer lange sucht...
Ich habe ein kleines Script gefunden unter http://www.dynamicdrive.com/style/blog/ ... ht-script/
Wer möchte und nichts gegen JS hat, kann es ja mal testen, es schenint zu funzen, leider kann ich nur FF und IE 7 testen. Egal ob zwei oder Dreispaltig, dass Script passt die Höhe der Spalten an. Die Lösung finde ich besser als wieder zum Tabellenlayout zu wechseln.

Nochmal ein anderes Problem:
Wie kann ich denn in einem DIV ein Element ganz nach unten bekommen analog html tabelle? Habe schon viel getestet mit vertical-align pp. irgendwie schaff ich es nicht.

[Heiko H.]

So sieht meine Vorlage aus:

Code: Select all

Code:
<div id="container"><div id="header">
<div class="nlu_horiz1">{NAV_LIST_UL:HCSS,,0,act_path,active}</div>
<div id="navi"><div class="breadcrumb">{BREADCRUMB}</div></div></div>
<div id="left-navigation" ></div>
<div id="content">{CONTENT}</div>
<div id="right-box">
<div id="footer"></div>
</div>

Hallo,
mal was Anderes. Wenn ich mich nach 3x nachzählen nicht vertan habe, zähle ich 9 öffnende div-Tags, aber nur 8 schließende.
Das Du so in jedem Browser andere Ergebnisse erziehlst, ist dann nicht zu vermeiden.

Grüße Heiko...

[Jensensen]

Wie kann ich denn in einem DIV ein Element ganz nach unten bekommen analog html tabelle? Habe schon viel getestet mit vertical-align pp. irgendwie schaff ich es nicht.

die frage ist nicht ganz eindeutig gestellt:
was, wo, wie nach unten --> ggf. DIV-Struktur umbauen??!!??

oder:
schau dir mal die seite an, die flip-flop verlinkt hat.
dort sind links und rechts zwei grüne boxen --> unten positioniert!

wie? --> suche mal nach

ap-test

im code sowie in den CSS (.ap-test)

greetz
jensensen