Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 26.07.2006, 02:49
emonem emonem ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2006
Beiträge: 3
emonem befindet sich auf einem aufstrebenden Ast
Standard Vertikaler Background über ganzen Bildschirm

Hi,

ich habe ein Problem mit meinem CSS Layout.
Die HP soll so aussehen: -link-
Ich habe eine Backgroundgrafik die horizontal sowie vertikal über dem Bildschirm verläuft.
Der Content ist ein Flash Film und dieser soll genau mittig auf dem Bildschirm ausgerichtet sein.
Habe jetzt mein HTML Code in drei Blöcke unterteilt: top,middle,bottom und dort die
elemente Plaziert.
Der middle container hat eine feste höhe und soll mittig ausgerichtet sein.
Soweit geht alles aber wie schaffe ich es das der vertikale Background im top sowie bottom container
sich dynamisch der Browserfenstergröße anpaßt.
Ich habe mal zur Veranschaulichung feste px Werte in den height Attributen eingetragen.
So siehts momentan aus: -link-
Wie ihr seht paßt es sich nicht exakt an.

Hier der HTML Code:
PHP-Code:
<div id="container">
  <
div id="top">
    <
div id="topcontainer"></div>
  </
div>
  <
div id="middle">
    <
div id="content"></div>
  </
div>
  <
div id="bottom">
    <
div id="bottomcontainer"></div>
  </
div>
</
div
Hier mein CSS:
PHP-Code:
* {
margin:0px;
padding:0px;
}

htmlbody {
margin:0;
padding:0;
height:100%;
}

#container {
height:100%;
width:100%;
}

#top {
width:100%;
height:100px;
}

#topcontainer {
position:absolute;
left:50%;
margin-left:1px;
background:url(_images/vertical.gifrepeat-y;
width:396px;
height:100px;
}

#middle {
width:100%;
height:505px;
backgroundurl(_images/middlebg.gifrepeat-x;
}

#content {
margin:0 auto;
backgroundurl(_images/content.jpgno-repeat;
width:799px;
height:505px;
}

#bottom {
width:100%;
}

#bottomcontainer {
position:absolute;
left:50%;
margin-left:1px;
background:url(_images/vertical.gifrepeat-y;
width:396px;
height:100px;


Hat jemand einen Tip für mich wie ich das Problem lösen kann das sich der vertikale Bg dynamisch an die jeweiligen Bildschirmauflösung anpaßt?
Mit Zitat antworten
Sponsored Links