✔ Fullscreen CSS-Page mit Zentrierung u. Rand

E

Every_b

Mitglied
Hey Freunde.
Folgendes Problem beschäftigt mich seit knapp 2 Tagen, die grafische Erklärung gibt's ganz unten:

Meine Webseite besteht aus 14 Slices (Bilder), von Photoshop exportiert - und jedes im eigenen DIV-Tag. Es soll eine Fullscreen-Website mit zentriertem Content werden.

Fullscreen - das heißt ich habe links und rechts vom Content, 2 ausfüllende Bilder. Jeweils von Kopf bis Fuß.

Mir ist es erst gelungen, den Seitenfuß je nach Höhe automatisch anzupassen, aber nicht für das Linke / Rechte Div. Um den Content (einzelne DIVs) habe ich ein Mutter-DIV gebildet, damit ich dieses mit left:50% zentral ausrichten kann.

PROBLEM: Wenn ich das Browserfenster kleiner mache, bleibt der Content zentriert (logisch), überlappt dabei das linke DIV. DIESES sollte sich aber nun auch nach links verschieben, damit der Übergang von Linkem-DIV zu Content erhalten bleibt.

Außerdem verschwindet mein CONTENT-Div, bei extremer verkleinerung.


im Anhang ist alles nochmal grafisch erklärt. Hoffentlich gibt es da eine Lösung für, ich danke euch bereits und fragt, wenn was unklar ist :)

buenos donnerstagabend!


//EDIT: Quelltext ist natürlich von Vorteil :D Hier nur Auszüge, ich weiß nicht, ob das reicht - ich poste gerne die ganze Datei. (CSS+HTML)

Code: 
#t01 {          /* Content-DIV (Mutter-DIV) */
	position:absolute;
	top:0px;
	width:969px;
	left:50%;
	margin-left: -485px;
	height:100%;
}

#slice1_ {          /* Das LINKE Div */
	background-image:url('../img/slice1.jpg');
	width:50%;
	min-height:843px;
	height:100%;
	position:absolute;
	left:0%;
	top:0px;
}


#slice3_ {          /* Rechte DIV */
	background-image:url('../img/slice3.jpg');
	width:100%;
	height:100%;
	min-height:843px;
	position:absolute;
	left:50%;
	margin-left:484px;
	top:0px;
}


HTML: 
<div id="slice1_">
</div>
<div id="t01">
	<div id="slice2_">
	</div>
	<div id="slice4_">
	</div>
  ... 
</div>
<div id="slice3_">
</div>
 

Anhänge

  • HELP.jpg
    HELP.jpg
    493,8 KB · Aufrufe: 142
Zuletzt bearbeitet:
Danke für die Links hela! Hat mich auf jeden Fall schlauer gemacht.
Nun aber eine ergänzende Frage zu diesem Thema:

Das Hintergrundbild muss sich nicht zwangsläufig strecken. Ich habe einen schwarzen Verlauf am jeweiligen Ende der Seite (Links/Rechts) -

es würde mir schon reichen, wenn der CONTENT immer im Fokus bleibt, alles andere jedoch abgeschnitten wird. Das Problem was ich hatte, war ja, dass der Hintergrund nicht bündig mit dem Content ist.

Falls es doch noch Lösungen dazu gibt, würde ich mich freuen - die erklärten Lösungen in den Links sind mir persönlich zu inkomatibel (crossbrowser) und wenn kompatibel, zu Performanceschluckend (Neuskalierung des Bildes, jquery, etc.)

Danke! :)
 
Danke nochmal, habe das Problem folgendermaßen gelöst:

Code: 
div#wrapper1 {min-width:1000px;min-height:100%;height:868px;background:url(../img/bg.jpg) 50% 0px no-repeat;;}
div#wrapper2 {height:100%;}
div#wrapper3 {width:993px;margin:0 auto;text-align:left;position:relative;}

Wie von hela gesagt, das Hintergrundbild als EIN Bild. (bg.jpg)
min-width Verhindert das verschwinden des Contents.
height maximiert die Webseite in der Höhe bis auf den letzten Pixel meines Contents.
min-height sorgt dafür, dass auch wenn der Browser höher als 868px ist, der gesamte Bildschirm ausgefüllt ist.

HTML: 
        <div id="wrapper1">
	<div id="wrapper2">
	<div id="wrapper3">
	

	<div class="slice4_" align="center">
	<a href="index.php"><span>&nbsp;</span></a>
        </div>
        ....
        </div></div></div>

Das Hintergrund verschiebt sich nun nach Links. Wenn die Webseite fertig ist, poste ich hier den Link, falls jemand das selbe Problem bekommt. DANKE!

//EDIT
Hier die fertige Webseite, einfach Browserfenster skalieren um den Effekt zu sehen:
http://izetas-restaurant.de
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück