✔ Dreispaltiges Layout mit relativer Breite für mittlere Spalte

[Necro_nomicon]

Ich habe nach dem 3-spaltigen CCS-Layout die Seite aufgebaut.
Da ist das clearfix ja bereits enthalten.

Jetzt habe ich im Content einen Text mit float:left; und daneben ganz normal ein Bild.

Wenn ich die Fenstergroesse minimiere wird das Bild nur mehr teilweise dargestellt.

Und generell geht der Hintergrund (Farbe) nicht runter bis zum Footer unabhaengig von der Menge des Inhaltes.

 

[Maik]

Hi,

das einzige Problem, das mir hier beim Skalieren des Fensters auffällt, ist das Umbrechen des Grafikelements nach unten, da sich der mittlere Spaltenblock vollends zusammenstauchen lässt.

Abhilfe schafft in diesem Fall eine Angabe zur Mindestbreite für den umschliessenden Block #wrapper:

div#wrapper {
position: relative;
margin: 0 auto;
width: 100%; /*** width: 800px bei fixer Layout-Breite ***/
min-width:1180px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
/*** background: url(3cols.png) repeat-y; ***/
/*** border-left: 1px solid #b8b8b8; ***/ /*** ::::: RAUS: sonst Scrollbalken ::::: ***/
/*** border-right: 1px solid #b8b8b8; ***/
}

Dass sich der Hintergrund nicht bis zum Footer erstreckt, hast du mit der rotmarkierten und von dir auskommentierten Regel aus meinem CSS-Tutorial CSS-Layout mit 100%-Höhe, selbst außer Kraft gesetzt, denn der von dir deklarierte Hintergrund für #centerCol erstreckt sich nur so weit, wie es sein Inhalt von ihm abverlangt.

mfg Maik

 

[Necro_nomicon]

huch! Danke.
Da hab ich es falsch verstanden. Weil ich mir dachte, ich brauch ja kein Bild. Aber es ging dabei an sich um den Hintergrund.

Das mit dem #wrapper werd ich sofort ausprobieren.

 

[Necro_nomicon]

hm... also ich hab mir jetzt das 3col.png angesehen.
Das geht ja ueber die ganze Breite.

Somit muesste ich ja eine fixe Breite definieren. Ich moechte aber, dass die Seite flexibel bleibt in der Breite.

Ist es nicht moeglich, dass ich einzeln die 3 Spalten mit einem Hintergrund belegen kann, der keine fixe Breite, sondern eben nur die 100% Hoehe hat?

und mit min-width:800px; (im #wrapper) passiert interessanterweise genau gar nichts.

 

[Maik]

Ich hab mal fix eine entsprechende Vorlage incl. der benötigten Hintergrundbilder für dein Seitenkonzept gezimmert.

@min-width: "1180px" ist in deinen vorgestellten Seitenverhältnissen der Wert zum Erfolg

* {
margin:0;
padding:0;
}

html, body {
height:100%;
}

body {
background:#fcfcee url(leftCol.png) repeat-y left top;
}

#wrapper{
min-width:1180px;
min-height:100%;
height:auto !important;
height:100%;
position:relative;
background:url(rightCol.png) repeat-y right top;
}

#header {
height:102px;
background:#fff;
}

#leftCol {
width:256px;
float:left;
}

#rightCol {
width:200px;
float:right;
}

#centerCol {
margin:0 200px 0 256px;
}

#footer {
position:absolute;
clear:both;
bottom:0;
width:100%;
height:74px;
background:#fff;
}

mfg Maik

 

[Necro_nomicon]

Danke Maik!

Das ist total nett, dass du dies fuer mich durchgesehen hast.

Ich mache mich gleich ans Werk.

 

[Necro_nomicon]

hm. Ok. Jetzt ueberlappt sich der Inhalt mit den Spalten rechts und links (Colleft und Colright) ein wenig. Aber das ist sicher wegen meinen margin-Angaben.

(Habe versucht mit margin einen Abstand zwischen den Spalten zu machen)

Nur leider wird der Inhalt ja nun trotzdem auch abgeschnitten (nun nicht nur im centerCol, sondern auch im rechten).


*** edit ****
Ueberlappen:
Habe nun die margin, wie auch bei dir in der Vorlage rausgegeben und es funkt. (ueberlappt sich nichts mehr).

Abstand zwischen Spalten:
Habe stattdessen jetzt einen Border um den centerCol gegeben mit dem ich den Abstand zwischen den einzelnen Spalten machen kann. Jetzt muss ich nur noch ein padding im centerCol generell machen, damit mir der Text nicht so links klebt.

Min-width: 1180px:
Shit, das ist verdammt viel. Wenn ich das Bild verkleiner koennte ich doch auch die min-width um die 950 bringen oder? Haengt ja mit der Breite des Bildes zusammen.

 

[Maik]

Kannst du das mal in deiner Seite aktualisieren, denn mir ist nicht klar, wo da vom Inhalt etwas abgeschnitten wird.

Wenn du zwischen die Spaltenblöcke noch einen Abstand (mit weißem Hintergrund) einfügen möchtest, müssen auch die beiden Hintergrundbilder, die den weißen Hintergrund besitzen, entsprechend verbreitert werden.

mfg Maik

 

[Maik]

*** edit ****

Min-width: 1180px:
Shit, das ist verdammt viel. Wenn ich das Bild verkleiner koennte ich doch auch die min-width um die 950 bringen oder? Haengt ja mit der Breite des Bildes zusammen.

Korrekt

mfg Maik

 

[Necro_nomicon]

neue Files sind oben.
Das Ueberlagern war von meinen margin-Angaben, die bei deinem Beispiel aber schon draussen waren. Ich musste sie erst rausnehmen.


hm... ok, ich hab nun den Border um die centerCol raus und stattdessen nun den Hintergrund um die 30 px breiter gemacht. Hat aber nicht den gewuenschten Effekt.

Selbst wenn ich das Bild kleiner mache und die min-width verringere.

Irgendwie verschiebt sich nun alles, wenn ich was aendern will.

Ich moechte das Menue link etwas eingerueckt habe.
Dann zwischen den Spalten einen Abstand (mit weissem Hintergrund)
Und oben (von der centerCol) moechte ich auch etwas nach unten ruecken mit dem ganzen, dass oben mehr weiss ist.
Und das Bild wieder groesser, kann ruhig in naechste Zeile ruecken, sollte aber dann nicht abgeschnitten werden. (Wenn das mit float aber so ist, dass es abgeschnitten wird. Dann bau ich einfach ne table in das centerCol).

Nur eben die Abstaende, das funkt gar nicht.