✔ layerbackground auf 100%

[emonem]

Hi,

ich entwerfe grade eine CSS testpage.
Zu sehen ist diese unter diesem link
Mein Problem ist jetzt das der layer mit den grünen Hintergrund nicht bis zum
footer geht. Habe es mit height=100% versucht aber das klappt nicht.Der grüne background ist leider nur so weit sichbar bis wohin der Text geht.
Wie muß ich da vorgehen? Es handelt sich um dem layer mit der id="left".
Hier mein CSS code:

html,body {
margin:0px;
padding:0px;
height:100%;
}

#wrapper {
margin:0px auto;
padding-top:20px;
padding-bottom:20px;
width:700px;
background-color: #e6e6e6;
}

#container {
margin:0px auto;
padding:0px;
width:650px;
background: #bccaca;
border:1px solid black;
}

#header {
margin:0px;
background: #bb180c;
height:70px;
}

#left {
float:left;
margin:0px;
width:160px;
background: #5da223 ;
height:100%;
}

#right {
float:right;
width:490px;
margin:0px;
padding:0px;
}

#footer {
clear:both;
height:50px;
background: #5900b9
}

Danke und Gruß
emonem

 

[Maik]

Für ein mehrspaltiges Layout, in dem sich die Spaltenhöhe immer der benachbarten Spalte automatisch angleicht, empfehle ich dir folgende Techniken:

1. A List Apart: Articles: Faux Columns
   
   
2. Stu Nicholls ~ Layouts ~ 3 column

 

[emonem]

Hi,

ich habe das jetzt mit dem "Faux Columns" Trick versucht.
Hab ein "main" layer erstellt welcher andere elemente einschließt(left,right) und
dem layer den Background zugewiesen.
Sieht auch im IE so aus wie es sein soll aber im Firefox klappt es nicht.
Hab die Page nochmal hochgeladen: link
CSS code:

html,body {
margin:0px;
padding:0px;
height:100%;
}

#container {
margin:0px auto;
padding:0px;
width:650px;
border:2px solid black;
}

#header {
margin:0px;
background: #bb180c;
height:70px;
}

#main {
margin:0px;
padding:0;
width:650px;
background:url(mainbg.jpg) repeat-y;
height:100%;
}

#left {
float:left;
margin:0px;
width:160px;
}

#right {
float:right;
width:490px;
margin:0px;
padding:0px;
}

#footer {
clear:both;
height:50px;
background: #5900b9
}

Hoffe ihr könnt mir helfen, blick da nicht mehr ganz durch.

 

[Maik]

Verwende die Hintergrundgrafik mainbg.jpg für das Parent-DIV #container.

In der Online-CSS-Datei fehlt im Selektor #main nach der padding-Eigenschaft das Semikolon

 

[emonem]

Hi,

vielen Dank ,jetzt geh es.
Ich möchte jetzt im content Bereich ein grafische Element als Hintergundbild hinzufügen.
Diese Bild darf allerdings nicht den textfluß oder sonstiges stören sonder nur als Hintergrundbild zu sehen sein.
Habe eine Grafik erstellt wie es aussen sollte: link
Auf der rechten Seite ist ein Stern zu sehen.
Ist mein vorhaben möglich?
Könnt ihr mir Tips geben wie ich es in die bestehende css struktur einbinden kann?
Wenn ich die Grafik in ein eigenen layer packe ,wie müßte der layer dann formatiert sein?

Danke und Gruß

 

[Maik]

So wie ich das überblicke, könntest du die Hintergrundgrafik für das DIV #right bestimmen:

#right {
float:right;
width:490px;
margin:0px;
padding:0px;
background: url(star.jpg) no-repeat 400px 0;
}

In diesem Beispiel wird die Hintergrundgrafik nicht wiederholt und ist 400 Pixel vom linken, sowie 0 Pixel vom oberen Elementrand positioniert.

 

[emonem]

Hi Michael,
vielen Dank für deine Hilfe. Hast mir sehr geholfen.
Will dich auch nicht weiter damit nerven hätte nur noch eine generelle Frage
zum layouten mit CSS.
Wenn ich eine Page mit 10 Unterseiten erstelle, wie sollte man da am besten vorgehen.
Soll ich nur ein CSS Dokument erstellen in welcher der ganze Formatierunscode für alle Seiten steht oder soll ich für jede Unterseite eine neue spezielle CSS Datei anlegen?
Ist es vielleicht sinnvoller mit einem PHP Include einzelne Segmente in einen bestimmten
layer des Hauptdokumentes zu laden oder soll man das lieber sein lassen?
Fragen über Fragen.
Danke und Gruß
e.

 

[Maik]

Wenn alle Seiten auf dem gleichen Layout basieren und die gleichen Elementformatierungen besitzen, ist nur eine globale CSS-Datei erforderlich, die in jedes HTML-Dokument geladen wird. Wenn aber jede Seite ein anderes Layout besitzt, und die darin enthaltenden HTML-Elemente auf unterschiedliche Weise formatiert werden, benötigt jede Seite ihre 'individuelle' CSS-Datei.