XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Vertikaler Background über ganzen Bildschirm (http://xhtmlforum.de/showthread.php?t=40942)

emonem 26.07.2006 01:49

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?

heiko_rs 26.07.2006 02:38

Du kannst das total vereinfachen: Du brauchst nur ein einziges div, dieses ist 100% hoch (min-height: 100%; für alle Browser und height: 100%; für IE 5 & 6), hat die Breite der Flash-Datei (dieser display: block; geben), ist horizontal zentriert (mit margin: 0 auto; ) und hat vertical.gif mit repeat-y right top. Der Body bekommt dann middlebg.gif mit repeat-x 0 100px. Absolute Positionierungen brauchst Du übrigens nicht.

emonem 26.07.2006 11:45

Hi,

ich hab es jetzt so gemacht wie du es gesagt hast. Hab ein
div erstellt. Diesem dann den Vertikalen Bg und dem die Attribute gegeben.

Ok, der Vertikale Bg verläuft jetzt 100% über dem Bildschirm.
Aber wie schaffe ich es denn jetzt das der horizontalen Bg für jede Fenstergröße im Body zentriert verläuft?
Mit repeat-x 0 100px wird dieser doch fix plaziert.
So siehts momentan aus: -link-


HTML:
PHP-Code:

<div id="container">
 <
div id="content"></div>
</
div

CSS:
PHP-Code:

* {
margin:0px;
padding:0px;
}

htmlbody {
height:100%;
backgroundurl(_images/middlebg.gif)  repeat-x 0 100px ;
}

#container {
margin:0 auto;
min-height:100%;
background:url(_images/vertical.gifrepeat-y right top;
width:799px;
}

#content {
position:absolute;
top:50%;
margin-top:-252px;
backgroundurl(_images/content.jpgno-repeat;
width:799px;
height:505px;



duessu 26.07.2006 12:07

mit background-position:0px center;

http://www.css4you.de/background-position.html

emonem 26.07.2006 12:13

1000 dank.:)

heiko_rs 26.07.2006 12:43

Zitat:

Zitat von emonem
Mit repeat-x 0 100px wird dieser doch fix plaziert.

Ich habe nur Deine Vorgabe umgesetzt:

Code:

#top {
...
height: 100px;
}

#topcontainer {
...
height: 100px;
}

Zitat:

Zitat von duessu
Code:

background-position:0px center;

Nicht valide. left center.

duessu 26.07.2006 13:19

WoW.
Arbeite schon lange mit XHTML + CSS. Hatte auch schon einige male mühe mit background-position. Doch das dies ist mir noch nie aufgefallen. (hatte zwar schon fehler wegen dem im Safari, doch irgendwie habe ich solchen code nie durch den Validator geschickt .... :oops:

Man lernt immer dazu... Thx.


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:52 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020