# Div Container bei verschiedenen Auflösungen gleiche Position



## MirakFH (2. Juni 2007)

Hey, also ich will folgendes:

Ich habe ein Design, das geht bei 1024*768 von ganz links nach ganz rechts.

Wenn ich meine Auflösung jetzt größer stelle, dann will ich das mein Design mittig ist. Also das links und rechts (in meinem Fall) eine weiße Fläche dazu kommt.

Habe hier noch 2 Screens: 

Bei 1024 http://xup.raidrush.to/view.php?id=26415cde4714a204fffe055d2acff

Bei 1280 http://xup.raidrush.to/view.php?id=9a572d5b2c969095b057fa7b9539a

Hier noch mein Code:


```
<html>

<head>

</head>

<body bgcolor="#efeeed" style="text-align:center;" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

<div id="Layer1" style="position:absolute; width:979px; height:129px; z-index:2;left: 0px; top: px; background-image:url(img/1.jpg); background-repeat:no-repeat;"></div>
<div id="Layer2" style="position:relativ; width:100%; height:129px; z-index:1;left: 0px; top: 0px; background-image:url(img/2.jpg);"></div>



</body>

</html>
```

Eine Ebene mit 100% mit dem Hintergrundbild (passen zum Header links und rechts) und die vordere Ebene mit dem Logo ca 979 Pixel.

Ja, ich habe die Bilder geklaut, aber nur zum Üben.

Also kann HPs doch ein wenig, aber bis jetzt habe ich immer mit Tabellen gearbeitet.

Greetz und danke, Mirak


----------



## Maik (2. Juni 2007)

Hi,

das Layout liesse sich im Anzeigebereich folgendermaßen horizontal zentrieren:


```
#layout {
width: 1024px;
margin: 0 auto;
}
```
Die ID *layout* ist in diesem Beispiel von mir frei gewählt und bezieht sich auf das umschliessende DIV.


----------



## MirakFH (2. Juni 2007)

habe einfach mal im den style=".."-Bereich der betreffenden Ebene gepackt, aber passiert nix


----------



## Maik (2. Juni 2007)

In welcher der beiden Ebenen hast du denn das Stylesheet angewendet?

Zudem muss eine ID in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben werden, sprich: die doppelt vorhandene ID *Layer1* muss umbenannt werden.


----------



## MirakFH (2. Juni 2007)

```
<html>

<head>

<style>

</style>

</head>

<body bgcolor="#efeeed" style="text-align:center;" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

<div id="Layer1" style="position:absolute; margin: 0 auto; width:1024px;  height:129px; z-index:2;left: 0px; top: px; background-image:url(img/1.jpg); background-repeat:no-repeat;"></div>
<div id="Layer2" style="position:relativ; width:100%; height:129px; z-index:1;left: 0px; top: 0px; background-image:url(img/2.jpg);"></div>

</body>

</html>
```

Layer1 ist das Logo, das soll immer an der gleichen Position bleiben.
Layer2 ist der Hintergrund, der soll einfach immer 100% bleiben.


----------



## Maik (2. Juni 2007)

Versuch es mal hiermit:


```
<div id="Layer1" style="margin: 0 auto; width:1024px; height:129px;  background-image:url(img/1.jpg); background-repeat:no-repeat;"></div>
```
Solange Layer2 eine Breite von 100% besitzt und in keinem übergeordneten DIV mit fixer Breite eingebunden ist, lässt sich er sich auch nicht im Viewport horizontal zentrieren.


----------



## MirakFH (2. Juni 2007)

Hatte ich es nicht so?

Weil wenn ich deins ohne position:absolute; nehme, dann sind die Ebenen trotz z-index untereinander.

Hier wäre noch der Quelltext:


```
/* CSS Document */


/* Grundlayout ----------------------------------------------------------------------------------- */

BODY{
	background-color:#EFEEED;
	background-image:url(../images/kachel-kopf.jpg);
	background-repeat:repeat-x;
}

div#main_frame{
    position: absolute; left:0px; top:0px;
  	height:100%;
  	width:100%;
  	margin:0px;
  	padding:0px;
}
  
div#center_frame{
  	width:999px;
  	margin: 0px auto;
  	padding:0px 0px 0px 10px;
  	height:100%;
	background-image:url(../images/seitenkopf.jpg);
	background-repeat: no-repeat;
}

div#seitenkopf{
  	height:129px;	
}
  
div#banner{
  	width:468px;
  	height:60px;	
	/*border:0px solid #FFFFFF;*/
	float:right;
}

div#seitenfuss{
  	width:100%;
	padding-bottom:20px;
	padding-top:20px;
	text-align:center;	
}

div#suche{
	padding-top:2px;
	float:right;
	height:18px;	
}

div#login{
	float:right;
	padding:0;	
}

/* Hauptnavigation Ebene1 ----------------------------------------------------------------------------------- */

div#hauptnavigation{
  	height:21px;
		border-left:0px solid #FFFFFF;
		width:999px;
}

.hauptnavigation-off A:link{
	text-align:center;
	display:block;
	width:80px;
  	height:21px;	
	padding:0px 15px 0px 15px;
	font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; 
	font-size:12px; 
	color:#FFFFFF; 
	line-height:20px;
	font-weight: bold; 
	text-decoration: none;
	background-color: none;
	border-right:1px solid #FFFFFF;
	float:left;
}

.hauptnavigation-off A:visited{
	text-align:center;
	display:block;
	width:80px;
  	height:21px;	
	padding:0px 15px 0px 15px;
	font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; 
	font-size:12px; 
	color:#FFFFFF;
	line-height:20px;
	font-weight: bold; 
	text-decoration: none;
	background-color: #none;
	border-right:1px solid #FFFFFF;
	float:left;
}

.hauptnavigation-off A:hover{
	text-align:center;
	display:block;
	width:80px;
  	height:21px;	
	padding:0px 15px 0px 15px;
	font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; 
	font-size:12px; 
	color:#42255E; 
	line-height:20px;
	font-weight: bold; 
	text-decoration: none;
	background-color: #B284B5;
	border-right:1px solid #FFFFFF;
	float:left;
}

.hauptnavigation-hi{
	text-align:center;
	display:block;
	width:80px;
  	height:21px;	
	padding:0px 15px 0px 15px;
	font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; 
	font-size:12px; 
	color:#42255E; 
	line-height:20px;
	font-weight: bold; 
	text-decoration: none;
	background-color: #B284B5;
	border-right:1px solid #FFFFFF;
	border-bottom:1px solid #B284B5;
	float:left;
```



```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Lars Weber">
<meta name="Publisher" content="Lars Weber">
<meta name="Copyright" content="Lars Weber">
<meta name="Keywords" content="partyfotos,impressionen,people,portrait,detail akt,akt,natur,produkte,fotografie,bodensee,setcard,fotos,foto,fotostudio,gogo,gogos,gogo'S,kunst,minolta,dimage 7,panoramen,stitch,stitching,sch&ouml;nheiten,frauen,maenner,m&auml;nner,hintergrund,beleuchtung,lars,weber,lars weber">
<meta name="Description" content="Lars Weber IFIDI - Bildergallerie von Partyfotos &uuml;ber Impressionen, Portraits, Akte, Natur und Produktfotos">
<meta name="Page-topic" content="Lars Weber IFIDI - Bildergallerie von Partyfotos &uuml;ber Impressionen, Portraits, Akte, Natur und Produktfotos">
<meta name="Audience" content="Alle">
<meta name="Content-language" content="DE">
<meta name="Page-type" content="Private Homepage">
<meta name="Robots" content="INDEX,FOLLOW">
<title>IFIDI.de - Fotos und mehr... Events - Parties - Partypeople - Impressionen - Fashion - Styling - Fotos - Bodensee</title>
<link href="css/struct.css" rel="stylesheet" type="text/css" />

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="/javascript/navigate3.js" type="text/javascript"></script>
<script src="/javascript/mailbox2.js" type="text/javascript"></script>
<script src="/javascript/bbcode2.js" type="text/javascript"></script>
<script src="/javascript/comments2.js" type="text/javascript"></script>
</head>

<body>
 <div id="main_frame">
  <div id="center_frame">
  	<div id="seitenkopf">

  			<div id="banner">
  				<!-- begin ad tag -->
					<script language="JavaScript" type="text/javascript">
						ord=Math.random()*10000000000000000;
						document.write('<script language="JavaScript" src="http://ad.de.doubleclick.net/adj/10063.de-ifidi.de/DE-Fullsize;kw=;sz=468x60;ord=' + ord + '?" type="text/javascript"></scr' + 'ipt>');
					</script><noscript><a href="http://ad.de.doubleclick.net/jump/10063.de-ifidi.de/DE-Fullsize;kw=;sz=468x60;ord=123456789?" target="_blank"><img src="http://ad.de.doubleclick.net/ad/10063.de-ifidi.de/DE-Fullsize;kw=;sz=468x60;ord=123456789?" width="468" height="60" border="0" alt=""></a></noscript>
				<!-- End ad tag -->
  			</div>
 			<div style="clear:both"></div>
		</div>
		<div id="hauptnavigation">

		 <div class="hauptnavigation-off"><a href="/?section=home&s=&u=">Home</a></div>
		 <div class="hauptnavigation-off"><a href="/?section=pictures&s=&u=">Fotos</a></div>
		 <div class="hauptnavigation-off"><a href="/?section=partynews&s=&u=">Kalender</a></div>
		 <div class="hauptnavigation-hi">Community</div>
		 <div class="hauptnavigation-off"><a href="/?section=market&s=&u=">Marktplatz</a></div>
		 <div class="hauptnavigation-off"><a href="/?section=interactive&s=&u=">Interaktiv</a></div>

	 	 <div id="suche">
	 	 	<form method="post" ACTION="?section=interactive&action=showSearch&u=&s=">
	 	 		<input name="searchString" type="text" class="suche" style="float:left" value=" IFIDI Schnellsuche" onBlur="if(this.value=='') this.value=' IFIDI Schnellsuche';" onFocus="if(this.value==' IFIDI Schnellsuche') this.value='';" />&nbsp;
				<INPUT TYPE="image" SRC="http://www.tutorials.de/forum/images/btn-suchen.gif" width="18" height="18" BORDER="0" ALT="suchen...">
		        <input type="hidden" name="section" value="interactive">
		        <input type="hidden" name="action" value="showSearch">
		        <input type="hidden" name="s" value="">
		        <input type="hidden" name="u" value="">
	 	 	</form>

	 	 	</div>
		 </div>
		
		<div id="hauptnavigation-ebene2" style="clear:left; padding-left:40px" class="hauptnavigation-ebene2-off">&nbsp;</div>

<div id="content">

<div id="linke-spalte" style="float:left">
			
			<div id="linke-spalte-kopf"></div>
			<div id="linke-spalte-mitte">
				<div id="box-menue-links">
					<div id="box-benutzer-kopf">Benutzer</div>

					<div id="box-benutzer-mitte" style="padding:8px 0px 0px 14px" class="menu">
							<a href="/?section=benutzer&action=showsearch&s=&u=">Benutzer suchen</a><br />
							<a href="/?section=benutzer&action=showUserImageRefresh&s=&u=">Profilbilder</a><br />
					</div>
					<div id="box-benutzer-fuss"></div>
			</div>
			
			<br />

			<div id="box-menue-links">
					<div id="box-menue-links-kopf">Community Login</div>
					<div id="box-menue-links-mitte" style="padding:8px 0px 0px 14px" class="menu">
							<form method="post">
								<div>Nickname oder E-Mail:</div>
								<div><input type="text" style="width:160px;" name="Ident"></div>
								<div>Passwort:</div>

								<div><input type="password" style="width:160px;" name="Password"></div>
								<br/>
								<input type="submit" value="Login" class="button" style="width:163px;">
								<input type="hidden" name="section" value="community">
								<input type="hidden" name="action" value="dologin">
							</form>
							<br/>
							<a href="?section=community&action=showregister">Kostenlos registrieren</a></br/>

							<a href="?section=community&action=showlostpassword">Passwort vergessen</a>
					</div>
					<div id="box-menue-links-fuss"></div>
			</div>
				
			</div>

			<div id="linke-spalte-fuss"></div>

		</div>

<div id="mittlere-spalte" style="float:left">
			<div id="mittlere-spalte-kopf"></div>
			<div id="mittlere-spalte-mitte">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" class="text">
					<tr>
						<td class="headline" style="padding:0px 0px 0px 15px"><b>Community</b></td>
					</tr>
					<tr>
						<td style="padding:15px 15px 0px 15px; border-bottom:0px solid #E4E4E4">	
							Wilkommen im Community-Bereich von ifidi.de<br/><br/>

							Du kannst Dich hier kostenlos registrieren, um alle Funktionen der Seite nutzen zu k&ouml;nnen.<br/><br/>
							Darunter ist z.B. das Mail-System mit dessen Hilfe Du anderen Benutzer Mails schreiben kannst oder auch das Kommentar-System, welches Dir erlaubt, zu verfassten News Kommentare zu schreiben.<br/><br/>
							&Uuml;berzeugt? Dann kannst Du Dich <a href="/?section=community&action=showregister">hier</a> anmelden!<br/>
						</td>
					</tr>

					</table>
				</div>
			<div id="mittlere-spalte-fuss"></div>
		</div>

		<div id="rechte-spalte" style="float:left">
			<div id="rechte-spalte-kopf"></div>
			<div id="rechte-spalte-mitte">
				<img src="http://www.tutorials.de/forum/images/head-newsdesmonats.gif" alt="News des Monats" /><br />

				<a href="/?section=partynews&action=showdetails&newsid=1376&s=&u=">
<img src="http://www.tutorials.de/forum/images/partyNews/banner/Banner_2007-06-06_1376_club-hugos_1205314619.jpg" width="160px" height="600px" border="0" border="0" alt="">
</a><br />
			</div>
			<div id="rechte-spalte-fuss"></div>
		</div>
	</div>
	<p style="clear:both"></p>
	<div id="seitenfuss" class="text">Copyright &copy; 2004&ndash;2007 www.ifidi.de<br />

			<a href="/?section=kontakt&action=showimprint&s=&u=">Impressum</a> &nbsp;|&nbsp; <a href="/?section=kontakt&action=&s=&u=">Kontakt</a></div>
  </div>
 </div>
</body>
</html>
```


----------



## Maik (2. Juni 2007)

Nein, du hattest es nicht so, denn durch die Positionsangabe left:0 wird das DIV am linken Fensterrand positioniert.

Wenn du die beiden Ebenen übereinander legen / positionieren willst, dann pack sie in ein umschliessendes  DIV und zentriere es auf meine vorgeschlagene Weise.


----------



## MirakFH (2. Juni 2007)

Hatte deins aber auch kopiert und es ging nicht. Ich versuche jetzt mal den Code so lange auseinander zu nehmen bis nur noch mein relevater Teil da ist.

Vielen Dank


----------



## Maik (2. Juni 2007)

Dann schau dir das hier mal an:


```
<div id="layout" style="width:1024px;position:relative;margin:0 auto;background:yellow;">
        <div id="Layer1" style="position:absolute; width:979px; height:129px; z-index:2;left: 0px; top: 0px; background-image:url(img/1.jpg); background-repeat:no-repeat;text-align:left;">layer 1</div>
        <div id="Layer2" style="position:relative; width:100%; height:129px; z-index:1;left: 0px; top: 0px; background-image:url(img/2.jpg);text-align:left;">layer 2</div>
</div>
```
Beim nächsten mal poste bitte gleich zu Beginn den Quellcode, um den es geht, und ändere bzw. korrigiere deine Beiträge nicht immer,  nachdem ich dir geantwortet habe, denn von deinem zuletzt nachträglich reingesetzten Quellcode  war hier bislang nicht die Rede.


----------

