Div Container bei verschiedenen Auflösungen gleiche Position

Status
Nicht offen für weitere Antworten.

MirakFH

Mitglied
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:

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
 
Zuletzt bearbeitet:
Hi,

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

Code:
#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.
 
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.
 
Code:
<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.
 
Versuch es mal hiermit:

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

Code:
/* 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;


Code:
<!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>
 
Zuletzt bearbeitet:
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.
 
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
 
Dann schau dir das hier mal an:

Code:
<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.
 
Status
Nicht offen für weitere Antworten.
Zurück