zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikaler Background über ganzen Bildschirm

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.07.2006, 02:49
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
  #2 (permalink)  
Alt 26.07.2006, 03:38
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.

Geändert von heiko_rs (26.07.2006 um 04:03 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.07.2006, 12:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2006
Beiträge: 3
emonem befindet sich auf einem aufstrebenden Ast
Standard

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;

Mit Zitat antworten
  #4 (permalink)  
Alt 26.07.2006, 13:07
Benutzerbild von duessu
{blubb /}
XHTMLforum-Mitglied
 
Registriert seit: 05.09.2005
Beiträge: 371
duessu befindet sich auf einem aufstrebenden Ast
Standard

mit background-position:0px center;

http://www.css4you.de/background-position.html
Mit Zitat antworten
  #5 (permalink)  
Alt 26.07.2006, 13:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2006
Beiträge: 3
emonem befindet sich auf einem aufstrebenden Ast
Standard

1000 dank.
Mit Zitat antworten
  #6 (permalink)  
Alt 26.07.2006, 13:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 26.07.2006, 14:19
Benutzerbild von duessu
{blubb /}
XHTMLforum-Mitglied
 
Registriert seit: 05.09.2005
Beiträge: 371
duessu befindet sich auf einem aufstrebenden Ast
Standard

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 ....

Man lernt immer dazu... Thx.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigation positionieren maybebabe CSS 4 08.04.2013 23:17
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
Inline Listenelement wird nicht richtig im background befüllt SteveB CSS 3 28.04.2011 21:41
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 02:35
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:51 Uhr.