Homepage zentrieren

miraculix1234 · 16.05.2011, 13:14

Hallo ,
ich habe eine Homepage erstellt und nun ein kleines Problem mit der zentrierung. Die page ist in einem DIV Container aufgebaut und nun möchte ich diesen mittig mit ganzem Inhalt darstellen lassen. Teilweise funktioniert das ganze auch aber nie im ganzen. Den header hab ich schon mittig bekommen aber den Body drunter nicht. Hab auch schon festgestellt das es mit den verschiedenen positionierungen der Div´s (absolute,static usw.) zusammenhängen muss.

Durch herum probieren hatte ich schonmal alles Mittig jedoch wurden die Div Tags im Container dann nicht mehr überlappend dargestellt , was dem Design der Page nicht gut tut.

Es muss doch möglich sein das der ganze Container mittig steht und der Inhalt sich diesem anpasst ??

Bitte helft mir

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"><!-- InstanceBegin template="/Templates/default.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Start</title>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<!-- InstanceEndEditable -->
<style type="text/css">
#Haupt-Container {
	margin: auto auto;
	height: 1200px;
	width: 1200px;
	vertical-align: middle;
	position:relative;
}
#apDiv1 {
	position:absolute;
	width:971px;
	height:39px;
	z-index:1;
	left: 13px;
	top: 664px;
}
.Home {
	font-size: 16px;
}
#apDiv2 {
	position:absolute;
	width:600px;
	height:101px;
	z-index:1;
	left: 163px;
	top: 598px;
	color: #FFF;
}
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#apDiv3 {
	position:absolute;
	width:567px;
	height:360px;
	z-index:1;
	left: 181px;
	top: 66px;
	color: #FFF;
}
</style>
<!-- InstanceEndEditable -->
</head>


<body>
<center>

<div id="Haupt-Container">
       <div id="Header" style="position:absolute; top:10px; z-index:1;">
       <img src="Bilder/Main/Header.jpg" alt="leer" name="Header" width="1000" height="200" id="Header"></div>

       <div id="Navi" style="position:absolute; top:175px; z-index:2; text-align: center; font-weight: bold; color: #FFF; font-size: 18px;">
         <table width="1000" border="0" cellpadding="6">
         <tr>
           <td width="60">&nbsp;</td>
           <td width="57" style="text-align: center; font-size: 18px;"><a href="default.html">Home</a></td>

           <td width="60"><span style="text-align: center; font-size: 18px;"><a href="Sites/Galerie.html">Galerie</a></span></td>
           <td width="87"><span style="text-align: center; font-size: 18px;"><a href="Sites/Abzugeben.html">Abzugeben</a></span></td>
           <td width="92"><span style="text-align: center; font-size: 18px;"><a href="Sites/Verpaarung.html">Verpaarung</a></span></td>
           <td width="60"><span style="text-align: center; font-size: 18px;"><a href="Sites/Links.html">Links</a></span></td>
           <td width="78"><a href="Sites/Kontakt.html">Kontakt</a></td>
           <td width="287">&nbsp;</td>

           <td width="91"><span style="text-align: center; font-size: 18px;"><a href="Sites/Impressum.html">Impressum</a></span></td>
         </tr>
       </table></div>
       
       <div id="Maintheme" style="position:absolute; top:210px; z-index:1;"><!-- InstanceBeginEditable name="EditRegion" --><img src="Bilder/Main/Body.jpg" alt="leer" name="Header" width="1000" height="700" id="Maintheme2" />
         <div id="apDiv3"><img src="Bilder/Sonstiges/Sugar logo.gif" width="476" height="357" alt="" /></div>
         <div id="apDiv2">
           <table width="420" border="0" cellpadding="6">
             <tr>

               <td width="40">Home</td>
               <td width="45">Galerie</td>
               <td width="69"> Abzugeben</td>
               <td width="74">Verpaarung</td>
               <td width="36">Links</td>
               <td width="70">Impressum</td>

             </tr>
           </table>
           <p>Hier kommt der Zähler hin</p>
       </div>
    <!-- InstanceEndEditable --></div>
</div>
</center>
</body>
<!-- InstanceEnd --></html>

Grüsse Miraculix

Manko10 · 16.05.2011, 13:18

Mittig positionieren geht wie folgt: umgebendem Container eine bestimmte Breite geben (px, em, &, egal) und margin-left wie margin-right auf auto setzen. Mit Positionierung musst du da gar nicht arbeiten.

miraculix1234 · 16.05.2011, 13:57

#Haupt-Container {
margin: auto auto;
height: 1200px;
width: 1200px;
vertical-align: middle;
position:relative;
}

hab ich ja schon drin stehen ...... aber es funktioniert so nicht ? selbst weenn ich position:relativ rausnehme ........

Gruss Miraculix

Manko10 · 16.05.2011, 14:01

vertical-align ist auch Blödsinn. Das hat bei Block-Elementen nichts zu suchen. Dein Container ist außerdem zentriert, nur halt 1200px groß. Das ist u.U. ziemlich genau die Größe deines Viewports wenn du einen Monitor von 1280px Breite hast.

miraculix1234 · 16.05.2011, 16:25

ist immernoch linksbündig ???

eagle275 · 16.05.2011, 16:30

und wie groß ist deine Bildschirmauflösung ?

Manko10 · 16.05.2011, 17:32

Ich habe deinen Code hier mal ausprobiert. Der Block ist definitiv zentriert. Ändere mal die Hintergrundfarbe und evtl. die Breite, dann siehst du es.
Dass der Text nicht unbedingt mittig erscheint ist eine andere Sache.

miraculix1234 · 16.05.2011, 17:32

1280x1024

habe links 1 cm rand und rechts sind es 5-7 oder so .....

miraculix1234 · 16.05.2011, 17:34

kann es sein das die Bilder probleme machen beim zentrieren ?

ohne die Pic sind die Blöcke zentriert - mit Pic linksbündig ?

miraculix1234 · 16.05.2011, 17:35

ich kann dir mal einen link geben wo die Page on ist

www.magic-ball-pythons.de

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Homepage mit Twitter verbinden	Maaax	PHP Tipps 2009	5	31.05.2010 13:24
Inhalt von Div zentrieren:	Paul.Schramenko	HTML, Usability und Barrierefreiheit	11	26.04.2010 14:51
Was würde mich ca. so eine Homepage kosten + Aufbau ???	style-express	Scriptbörse	4	23.11.2009 21:16
Scriptsuche Homepage Hoster Script	kutschi	Scriptbörse	1	14.04.2009 18:37
Homepage erstellen mit Datenbank	Frank1960	PHP Tipps 2009	4	01.02.2009 01:51
[Erledigt] Div zentrieren	Knuff	HTML, Usability und Barrierefreiheit	3	26.11.2008 16:34
Nur mit Kundennummer Bild vom Server auf Homepage anzeigen.	ah-tonius	PHP Tipps 2008	8	27.08.2008 09:39
Vertikal zentrieren mit CSS - so gehts.		HTML, Usability und Barrierefreiheit	2	02.03.2006 09:15
Suchfunktion für die Homepage? Was muss der Anfänger wissen?		PHP Tipps 2005-2	1	11.10.2005 18:39
Eingabe der Homepage auf Korrektheit prüfen	phpbeginner	PHP Tipps 2005-2	5	19.08.2005 19:17
Grafik auslesen und anzeigen auf fremder Homepage		PHP Tipps 2005-2	4	11.07.2005 10:26
Homepage Steuerung		PHP Tipps 2005-2	5	14.06.2005 22:33
Suche jemanden der mit mir eine Homepage erstellt.		Beitragsarchiv	45	06.09.2004 18:18


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.05.2011, 13:18
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Mittig positionieren geht wie folgt: umgebendem Container eine bestimmte Breite geben (px, em, &, egal) und margin-left wie margin-right auf auto setzen. Mit Positionierung musst du da gar nicht arbeiten. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

16.05.2011, 13:57
miraculix1234 Neuer Benutzer Registriert seit: 09.05.2011 Beiträge: 21 PHP-Kenntnisse: Anfänger	#Haupt-Container { margin: auto auto; height: 1200px; width: 1200px; vertical-align: middle; position:relative; } hab ich ja schon drin stehen ...... aber es funktioniert so nicht ? selbst weenn ich position:relativ rausnehme ........ Gruss Miraculix

16.05.2011, 14:01
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	vertical-align ist auch Blödsinn. Das hat bei Block-Elementen nichts zu suchen. Dein Container ist außerdem zentriert, nur halt 1200px groß. Das ist u.U. ziemlich genau die Größe deines Viewports wenn du einen Monitor von 1280px Breite hast. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

16.05.2011, 16:25
miraculix1234 Neuer Benutzer Registriert seit: 09.05.2011 Beiträge: 21 PHP-Kenntnisse: Anfänger	ist immernoch linksbündig ???

16.05.2011, 16:30
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	und wie groß ist deine Bildschirmauflösung ? __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

16.05.2011, 17:32
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Ich habe deinen Code hier mal ausprobiert. Der Block ist definitiv zentriert. Ändere mal die Hintergrundfarbe und evtl. die Breite, dann siehst du es. Dass der Text nicht unbedingt mittig erscheint ist eine andere Sache. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

16.05.2011, 17:34
miraculix1234 Neuer Benutzer Registriert seit: 09.05.2011 Beiträge: 21 PHP-Kenntnisse: Anfänger	kann es sein das die Bilder probleme machen beim zentrieren ? ohne die Pic sind die Blöcke zentriert - mit Pic linksbündig ?

16.05.2011, 17:35
miraculix1234 Neuer Benutzer Registriert seit: 09.05.2011 Beiträge: 21 PHP-Kenntnisse: Anfänger	ich kann dir mal einen link geben wo die Page on ist www.magic-ball-pythons.de