✔ Hauptblock zentrieren, den Rest danach richten

Status
Nicht offen für weitere Antworten.
F

frederic76

Grünschnabel
Leider bleibt meine Suche nach passenden Hilfen hier erfolglos,
daher mal einen eigenen Threat dafür:

Meine 950x740 grosse Webseite soll generell im Browser zentriert mittig angezeigt werden.
Der Inhalt der Webseite besteht aus folgenden Teilen:
Hintergrundbild [Inklusive Logo etc. auf einer Ebene]
unten ein Flashbanner
links mittig eine Navigation
mittig der sich austauschende Inhaltstext mit Bildern [das ganze in einem Scrollfeld]


Ich bin jetzt so weit, dass man das Hintergrundbild sehen kann:

#background
{
position: absolute;
left: 50%;
width: 950px;
margin-left: -475px;
top: 50%;
height: 740px;
margin-top: -360px;
background-image: url(gfx/roadbreaker-bg.jpg);
background-repeat: no-repeat;
}

--> aber wie lauten die anderen div-befehle etc., um dann pixelgenau innerhalb bzw. ÜBERhalb des Hintergrundbildes die einzelnen Blöcke zu fixieren?

Ich hab schon 47 Haare verloren und würd gern von Euch unterstützung bekommen, damit ich morgen nicht wie Caesar aussehe :-)
 
Hi,

ohne das Layout (Hintergrundbild) im Detail zu kennen, würde ich zunächst mal sagen, dass die übrigen DIVs im DIV background eingebettet werden.

Code: 
<div id="background">
    <!-- Hier folgen die weiteren DIVs -->
</div>
Diese können dann innerhalb des Elternelements ausgerichtet bzw. positioniert werden.
 
okay, aber wie bekomme ich denn dann die korrekten Festsetzpunkte hin, wenn sich
das bild quasi je nach Grösse des Bildschirms verschiebt?

Also über dem Hintergrundbild soll z.B. in Höhe 590 das Banner eingesetzt werden..
 
Wenn die weiteren DIVs im Parent-DIV background eingebunden sind, verändern sie nicht ihre Position gegenüber dem Hintergrundbild, sobald die Fenstergröße skaliert wird.

Du kannst entweder mit der margin-Eigenschaft einen Außenabstand nach oben von 590px definieren, oder das Element im Viewport positionieren.

Code: 
#banner {
margin-top: 590px;
background: #cacaca;
}

Code: 
<div id="background">
    <div id="banner">banner</div>
</div>
 
Deine Links haben mir schon weitergeholfen,

allerdings richten sich die jeweiligen margin-top Befehle irgendwie nicht an die Position x=0 /y=0 sondern an dem jeweiligen darüberliegenden Layer..


meine CSS sieht so aus mittlerweile:

Code: 
body, html{ height: 100%;}
body{ margin: 0;
      padding: 0;
	  font-family: Verdana;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #e5e5e5;
	text-decoration: none;
	background-color: #1c1818;
	}

#container{
position: relative;
left: 50%;
width: 950px;
margin-left: -475px;
top: 50%;
height: 740px;
margin-top: -360px;
background-image: url(gfx/roadbreaker-bg.jpg);
background-repeat: no-repeat;
	z-index: 1;
}

#navigation
{
		float: left;
		width: 80px;
		height: 310px;
		background-color: yellow;
		margin-top: 190px;
		margin-left: 40px;		
}


#inhalt
{
		float: left;
		width: 490px;
		height: 425px;
		background-color: pink;
		margin-top: 250px;
		margin-left: 170px;		
}



#fire
{
		float: left;
		width: 950px;
		height: 120px;
		background-color: red;
		margin-top: 120px;
		margin-left: 0px;			
}



und der index:

Code: 
<body>
<div id="container">
	<div id="navigation"></div> 
	<div id="inhalt"></div> 
	<div id="fire"></div> 
</div>
</body>


ist das ein doofer Ansatz?
 
Hi,

kannst du mal einen "Preview" des Seitenlayouts (Hintergrundbild) posten, damit man einen Anhaltspunkt hat, wo die Bereiche im DIV container genau sitzen sollen?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück