[spice]

Hallo,

habe folgendes Problem:

Ich möchte meine hintergrundbilder fürs template positionieren...

so weit so gut, ich hab nun den header mit postion absolute

die linke und die rechte grafik auch positioniert.

wenn ich das aber mit dem footer und der contentmitte mache, überschneidet
die contentmitte bei einem längeren text den footer da er ja mit postion absolute
nicht flexible ist!

weiß jemand eine lösung wie ich contentmitte und den footer genau positionieren kann sodass
bei repeat-y(contentmitte), der footer automatisch mit nach unten rückt?

ich hoffe hier versteht was ich meine? bin schon fast am verzweifeln!

anbei noch die css referenz wie ich es positoniert hab und ein screenshot vom template.


#header{
background: url(../images/header.jpg) no-repeat;
width: 1024px;
height: 191px;
position: absolute; left:0; top:0;
}


#main{
background: url(../images/contenterweitern.gif) repeat-y;
width: 676px;
height: 624px;
position: absolute; left: 104; top: 191;
}




#userstates{
background: url(../images/userstates.jpg) no-repeat;
width: 104px;
height: 647px;
position: absolute; left:0; top: 191;
}



#werbung{
background: url(../images/werbung.jpg) no-repeat;
width: 226px;
height: 671px;
position: absolute; left:780; top:191;
}



#footer{
background: url(../images/footer.gif) no-repeat;
width: 676px;
height: 38px;
position: absolute; left:104 ; top:810 ;

[grafixx]

Hallo Michi

Ich denke mal das sich dein Problem so nicht lösen lässt weil du feste Angaben machst. Dadurch bleiben die Boxen da wo sie sind!
evtl. hilft dir hier die CSS-Anweisung "overflow:auto;"

schau dir mal dieses Beispiel an: http://css.fractatulum.net/sample/layout5.htm

das kommt der Lösung schon recht nahe. Wie du anhand der CSS sehen kannst bekommen nur die linke und die rechte Box eine "position". Der Content wird erzeugt mit den beiden 140px in "margin" der box3.

Um diese Angaben für dein Template umzusetzen musst du nur die class box1 und box5 trennen, so das du beide getrennt bearbeiten kannst.

Es gibt noch weitere Lösungen für diese Art von Layout. Man nennt es auch den "holy Gral" der CSS Kunst  weil es nicht einfach ist ein 3-Spalten Layout mit Header und Footer für alle Browser darzustellen. Insbesondere der IE 5.5 und IE 6 zicken da ganz schön rum. Dafür gibt es aber auch CSS-Hacks die das lösen.

Eine Fundgrube für Links und CSS_Blogs findest du hier: http://www.csshilfe.de/

Aber tröste dich... selbst gestandene CSS-Spezies haben jeden Tag ihre Sorgen das gewünschte Layout umzusetzen. Das Problem ist einfach das die diversen Browser die Norm der W3C nicht einhalten... ausser der Firefox. Besonders der Browser von unserem Billy-Boy hat da so seine Sorgen mit.

Eine grundsolide CSS-Planung ist da oberstes Gebot. Am besten ist es wenn man sein Layout erstmal nur für den Firefox gestalltet. Anschliessend kann man dann die CSS für die diversen anderen Browser mit Hilfe von Hacks anpassen. So stellt man sicher, dass man die Norm einhält und Änderungen sind so im Nachhinein einfacher durchzuführen falls sich z.B. der IE es sich anders überlegt und bereit ist für die Standard-Norm. 

[spice]

Hi, danke für die hilfreichen und beruhigenden worte...*G*

Meine Probleme haben sich über nacht aufgelöst...*gottseidank*

Hab ein Template gefunden das ähnlich aufgebaut war und eine gute lösung war..etz funzt alles..*G*

mfg michi

[grafixx]

Das freut mich zu hören