Zentrieren einer Homepage

Gast

Ich weiss, dass es dazu schon einen Thread gab, aber es ist noch einiges unklar.

Meine Frage: Wie kann ich eine komplette Website (mit Buttons, Bilder, usw) vertikal in der Mitte plazieren?
Ich hab für alle objekte schon absolute Postitionen in CSS bestimmt. Wie muss ich diese ändern?

Gast

Hier ist der Quellcode. Was muss ich zum zentrieren machn?

HTML

<!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>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#Layer_content {
	position:absolute;
	left:374px;
	top:411px;
	width:390px;
	height:522px;
	z-index:1;
}
#Layer_button1_1 {
	position:absolute;
	left:256px;
	top:63px;
	width:74px;
	height:32px;
	z-index:2;
}
#Layer_button1_2 {
	position:absolute;
	left:330px;
	top:63px;
	width:73px;
	height:32px;
	z-index:2;
}
#Layer_button1_3 {
	position:absolute;
	left:404px;
	top:63px;
	width:69px;
	height:32px;
	z-index:2;
}
#Layer_button1_4 {
	position:absolute;
	left:477px;
	top:63px;
	width:72px;
	height:32px;
	z-index:2;
}
#Layer_button1_5 {
	position:absolute;
	left:551px;
	top:63px;
	width:72px;
	height:32px;
	z-index:2;
}
#Layer_button1_6 {
	position:absolute;
	left:625px;
	top:63px;
	width:72px;
	height:32px;
	z-index:2;
}
#Layer_button2_1 {
	position:absolute;
	left:821px;
	top:22px;
	width:86px;
	height:25px;
	z-index:3;
}
#Layer_button2_2 {
	position:absolute;
	left:908px;
	top:22px;
	width:86px;
	height:25px;
	z-index:4;
}
#Layer_button_foto_1 {
	position:absolute;
	left:78px;
	top:764px;
	width:154px;
	height:17px;
	z-index:5;
}
#Layer_button_foto_1 {
	font-family: "Courier New";
	font-size: 11pt;
	color: #FFFFFF;
	left:164px;
	top:755px;
	width:154px;
	height:17px;
}
#Layer_foto {
	position:absolute;
	left:136px;
	top:436px;
	width:225px;
	height:260px;
	z-index:6;
}
#Layer_button_foto_2 {
	font-family: "Courier New";
	font-size: 11pt;
	color: #FFFFFF;	
	position:absolute;
	left:164px;
	top:784px;
	width:154px;
	height:17px;
	z-index:7;
}
#Layer_button_foto_3 {
	font-family: "Courier New";
	font-size: 11pt;
	color: #FFFFFF;	
	position:absolute;
	left:164px;
	top:869px;
	width:154px;
	height:17px;
	z-index:7;
}
#Layer_button_foto_4 {
	font-family: "Courier New";
	font-size: 11pt;
	color: #FFFFFF;	
	position:absolute;
	left:164px;
	top:898px;
	width:154px;
	height:17px;
	z-index:7;
}
a {
	font-size: 11pt;
	font-family: Courier New;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999999;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
#Layer_content_2 {
	position:absolute;
	left:770px;
	top:411px;
	width:213px;
	height:522px;
	z-index:8;
}
#body {
	position:absolute;
	top:0px;
	left:112px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}


function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}


function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/button_on_works.gif','images/button_on_links.gif','images/button_on_forum.gif','images/button_on_down.gif','images/button_on_kontakt.gif','images/Button2_on_home.gif','images/Button2_on_login.gif')">
<div id="Layer_content">
  <iframe src="news.html" name="content" width="396px" marginwidth="0" height="522px" marginheight="0" scrolling="auto" frameborder="0" class="_content" id="_content" title="content" target="_self"></iframe>


</div>
<div id="Layer_button1_1">[url='news.html'][img]images/button_off_news.gif[/img][/url]</div>
<div id="Layer_button1_2">[url='#'][img]images/button_off_works.gif[/img][/url]</div>
<div id="Layer_button1_3">[url='#'][img]images/button_off_links.gif[/img][/url]</div>
<div id="Layer_button1_4">[url='#'][img]images/button_off_forum.gif[/img][/url]</div>
<div id="Layer_button1_5">[url='#'][img]images/button_off_down.gif[/img][/url]</div>
<div id="Layer_button1_6">[url='#'][img]images/button_off_kontakt.gif[/img][/url]</div>
<div id="Layer_button2_1">[url='#'][img]images/Button2_off_home.gif[/img][/url]</div>
<div id="Layer_button2_2">[url='#'][img]images/Button2_off_login.gif[/img][/url]</div>
<div id="Layer_foto">
  <iframe width="225px" height="260px" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" title="foto" target="_self"  name="foto"></iframe>
</div>
<div id="Layer_button_foto_1">[url='fotos/foto1.gif']Fotoname[/url]</div>
<div id="Layer_button_foto_2">[url='fotos/foto2.gif']Fotoname[/url]</div>


<div id="Layer_button_foto_3">[url='fotos/foto3.gif']Fotoname[/url]</div>
<div id="Layer_button_foto_4">[url='fotos/foto4.gif']Fotoname[/url]</div>
<div id="Layer_content_2">
<iframe height="522px" width="213px" marginheight="0" scrolling="auto" frameborder="0" class="_content" id="_content" title="content" target="_self" marginwidth="0"></iframe></div>
[img]images/index.gif[/img]
</body>
</html>

Alles anzeigen

sejuma

Definiere (sofern nicht bereits vorhanden) noch einen zusätzlichen Container, der alle übrigen umfasst und für den du eine Breite in % oder px festlegst sowie

Code

margin: 0 auto;

zuweist.
Diesen öffnest du unmittelbar nach <body> und schließt ihn vor </body>

rincewind

Code

<div id="centerthis">

</div>

dazugehöriges CSS

Code

#centerthis {
  margin: 0 auto; //Standardconforme, horizontale Zentrierung (erste Ziffer für oben und unten, zweite für links und rechts.
  }

Gast

Ja, soweit, sogut. Aber er hat die Inhalte immer noch so, wie ich sie in den CSSs definiert hab. Wie mach ich, dass sich das auf die "Haupt-div" bezieht?

sejuma

So lange du die CSS sonst nicht änderst, werden deren Inhalte beibehalten. Sie beziehen sich dann aber auf den übergelagerten Container.
Deine vielen DIVS sind sehr unüberlichtlich und durch die zusätzlichen Frames wird die Struktur nicht ganz klar. Am Ende deiner CSS hast du einen #body definiert. Nimm den mal raus, da er vermutlich die generellen Angaben überlagert.
Versuch mal, zunächst eine Grundstruktur mit wenigen Layern in die Seite zu bringen und füge erst dann die Details wie Buttons usw. ein.
Layoutbeispiele gibt's hier: http://www.stichpunkt.de/css/bereiche.html

Gast

Kann ich denn einen Div mit einem Button in sich, in einen anderen Div einordnen, dass sich die Ausrichtung des Button-Divs an dem anderen "übergeordneten" Div ausrichtet?

sejuma

Du kannst zum Beispiel alle Buttons, die in eine Reihe kommen in einen div setzen und musst nicht für jeden Button einen eigenen div definieren.

Gast

Ja, aber das Problem ist, dass er, wenn ich ein div einfüge, es dann an der gesamten page und nicht an dem von mir übergeordneten div ausrichtet... wie mach ich das`?

sejuma

Wenn du einen übergeordneten, zentrierten Container hast, dann fügst du da hinein alle weiteren erforderlichen Container in der Reihenfolge von oben nach unten oder von links nach rechts. Deren Position zum übergeordneten bestimmst du mit margin-left und margin-top-Angaben oder mit float:left; wenn die Anordnung von links nach rechts erfolgt.
Das kommt immer auf die Bedürfnisse des Einzelfalls an, deshalb lässt sich hier keine generelle Lösung geben.
Google mal nach CSS positionieren oder CSS-Layouts und sieh dir einige Beispiele an.

Tags