Probleme mit faux columns (css)

[sdech]

Nabend zusammen,

ich hab da mal wieder ein kleines Problem. Zwar habe ich ein 3 spaltiges Layout.

Links Menü
Mitte Content
Rechts Module


Mit verschiedenen Hintergrundfarben. Nichts aufwendiges schlicht und einfach gehalten. Laut beschreibungen von verschiedenen Internetseiten soll ich um die nochmal einen Wrapper ziehen und denn mit einer Hintergrundgrafik befüllen wo jeweils die Farben der 3 spalten nebeneinander hat. Gesagt getan 1000px x 1px angelegt und mit denn Farben grau 200px weiß 600px und nochmals grau 200px angelegt. Im CSS die Hintergrundfarbe der Spalten rausgenommen und im Wrapper das Bild angegeben. Leider hab ich jetzt keine Farbe mehr und das Hintergrundbild im Wrapper zeigt es mir nicht an. Hab alles nochmals Kontrolliert bezüglich rechtschreibfehler oder sonstiges habe aber leider nichts gefunden. Wahrscheinlich ist es wieder ein kleiner Fehler wo ich nicht draufkomme. Könnt ihr mir hier weiterhelfen?


Willkommen bei Fensterbau Bender


Habe jetzt die Seite nochmal im Alten Zustand gelassen das man die Spalten ein bisschen auseinander halten kann.

Danke schonmal und Gruß

Steffen

 

[Herr_D]

AW: Probleme mit faux columns (css)

wrapper find ich in deinem css nicht...


whoops sorry... hab die andern 4 css nicht gesehen


/templates/fensterbau/css/template.css

#wrapper {
	background: 				#fff;
	margin: 					0px; 
	padding:					0px;
	width: 						1000px; 
	height:						auto;
}

Da ist keine Hintergrundgrafik eingebaut

 

[sdech]

AW: Probleme mit faux columns (css)

emm sorry bissl blöd von mir da mehrere drinn stehen

 

[Herr_D]

AW: Probleme mit faux columns (css)

hab ich dann entdeckt... da ist aber keine Grafik eingebaut...



ergänze das um

background-image:url(adresse);

 

[sdech]

AW: Probleme mit faux columns (css)

ich hatte sie schon eingebaut aber es hat trotzdem nicht funktioniert aber gib mir 2min ich lade die datei dann nochmal hoch

 

[sdech]

AW: Probleme mit faux columns (css)

so habe nun die 3 spalten mit der hintergrundfarbe mal gelassen und den wrapper das bild hinzugefügt. Normalerweise sollte sich eigentlich das Bild mit repeat-y nach unten wiederholen. Macht es leider nicht

 

[Herr_D]

AW: Probleme mit faux columns (css)

background-image: url(../images/wrapper.jpg) repeat-y;



mach mal:

background: url(../images/wrapper.jpg) repeat-y;


bzw.

background-image: url(../images/wrapper.jpg);
background-repeat:repeat-y;


draus

 

[sdech]

AW: Probleme mit faux columns (css)

Nein das wars leider auch nicht
Ich hab auch versucht einen Neuen Wrapper rum zu legen das brachte aber auch nichts.

 

[Lobster1956]

AW: Probleme mit faux columns (css)

gib deinem wrapper_right ein background:none
und, noch wichtiger, nimm es aus dem float raus, sonst enthält dein wrapper nur floats und hat keine höhe mehr...
alternativ ein weiteres div nach wraper_right mit clear:both
rené

 

[Samuelll]

AW: Probleme mit faux columns (css)

Wenn ich mich nicht zu so später Stunde verguckt habe, hast du das Float nicht richtig gecleart.
Der Wrapper scheint wrapper-right und left nicht wirklich zu umschliessen.
Setz mal testweise eine

<div class=clear></div>

an letzte Stelle innerhalb des Wrappers mit

.clear {clear : both;}

Das ist zwar kein schönes Clearing, aber es funktioniert in jedem Browser ohne extra Hacks oder dergleichen !

 

[sdech]

AW: Probleme mit faux columns (css)

Ok,

jetzt funktioniert es. Muss doch noch viel lernen hab ich gesehen. Kleinigkeiten wo so klar eigentlich sind. Danke für eure Unterstützung, aber eine frage hab ich noch an Lobster1956:

Was meinst du mit den floats und höhe?

 

[Samuelll]

AW: Probleme mit faux columns (css)

Ich antworte einfach mal, auch wenn die Frage nicht an mich gestellt war

Wenn man Divs nebeneinander stellen will, ist es gebräuchlich sie via Float nebeneinander an zu ordnen.

Hast du nun eine Box wrappen mit den boxen left und right darin

----- wrapper----
--L-- | --R--

muss das nebeneinander Stellen druch ein Clear beendet werden.

Ansonsten bleibt die Box wrapper "nicht im Fluss", was dazu führt das die anderen Boxen über sie hinaus gehen.
Es schaut dann aus als umschliesst der wrapper garnicht die anderen Boxen.

Lies dich mal in das CSS-Thema Boxmodelle und floating ein

 

[Lobster1956]

AW: Probleme mit faux columns (css)

vielleicht nochmal umgangssprachlich formuliert...
ein umschließendes div nimmt die Höhe der darin floatenden container nicht wahr...
es muß also entweder ein abschließendes clearing gemacht werden, oder der letzte der inneren container ist kein floatender (wenn er auf jeden fall länger als die anderen ist würde das schon reichen, wenn nicht braucht er ein eigenes clearing)

unter yaml.de findest du auch einiges zu diesem Problem der floatenden container