CSS Komplette Seite auf "Center" setzen?

raven16

Lieutenant
Registriert
Nov. 2008
Beiträge
580
Hi, wollte mal meine gesamte Page in die Mitte schieben...

Hab das mit margin-left:auto; und margin-right: auto; probiert, aber dies zeigt keine Wirkung. Weiß eine Lösung für mein Problem?

Hier meine CSS-Datei:
Code:
html,body{      
background-image:url(pictures/design/backgrounds/background4.jpg);
	}
body.rand{
	margin-top: 3%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3%;
	
}

div{
	position:relative;
}

html,div, span, a, table, td, form, img, li {
   font-family: Arial, Verdanna, Genva, Helvetica;
   border: none;
   border-style:none;
}

/*div-mainobjekte*/
div.umrandungsbox{
	padding:0;
    height:100%;
    width:800px;
}

div.bannerbox{
	
	height:300px;
	width:800px;
	background-image: url(pictures/design/bannercb.GIF);
	margin-bottom:0;
}
div.inhaltboxbalken
{
    background-image:url(pictures/design/page/fieldset.gif);
    height:20px;
    width:800px;
}

div.inhaltbox{
	width:800px;
	background-color: #FFFFFF;	
	border-color: #000000;
	
}

div.menubox
{
    float:left;
	height:120px;
	width:150px;
	background-color: #FFFFFF;
	margin-left:0;
	padding-left:0;
	padding:0;
	margin:0;
	clear:both; 
}

div.textbox
{
    float:left;
	width:598px;
	background-color:#FFFFFF;
	margin-right:0;
	margin-left:25px;
	margin-right:25px;
	padding-top:10px;
	margin-bottom: 10px;
		
}

div.new{
	clear:both;
}

div.copyright{
    height: 20px;
    width: 800px;
	margin-top: 10px;
	margin-bottom: 5px;
	background-color: #FFFFFF;
}

div.bottom{
	height: 20px;
	padding: 0;
	margin-bottom:10px;
}
 
hast du schonmal probiert die seite komplett in einen bereich zu fassen (div) und diesen auf center(align="center" glaub ich) zu setzen ?
 
1. Ich hab die Seite schon in eine DIV eingeschlossen...(div.umrandungsbox)
2. Ich möchte das in der CSS-Datei festlegen, damit ich das nicht immer auf jeder neuen Seite neu festlegen muss und bei Bedarf alle Seiten mit einmal umschreiben ändern kann ;)

Aber danke für den Tipp ^^
 
flugser schrieb:
Code:
div.umrandungsbox{
	padding:0;
    height:100%;
    width:800px;
    
    margin: auto;

}

Guter Vorschlag danke... aber funktioniert leider nicht =(
Macht mir vll. das float: left irgendwo einen Strich durch die Rechnung?
Hat jemand außerdem noch Ideen?

Hach ich hab die Lösung ... xD
Da ich nicht so wie viele bin die dann einfach nix mehr schreiben:

Irgendwo in meinem Quelltext hinderte ein float: left; (also das das DIV nach links geschoben wird ) den Befehl margin: auto; daran, meine Seite zu zentrieren.

Mit clear: both;
kann man alle float einstellungen löschen:

Code:
/*div-mainobjekte*/
div.umrandungsbox{
	clear: both;
	padding:0;
    height:100%;
    width:800px;
	margin: auto;
}

Danke trotzdem für eure Ideen...
 
Zuletzt bearbeitet von einem Moderator:
Es gibt folgende Möglichkeit:

Code:
#divbox{

[URL="http://www.thestyleworks.de/tut-art/centerblock.shtml"]vertikal bzw. horizontal in der Mitte des Bildschirms[/URL]

width: 960px; 
height: 533px;

/*Breite durch 2 + border+padding 0 0 Höhe durch 2 + border+padding*/
margin: -267px 0 0 -480px;	

position:absolute;
top: 50%;
left: 50%;

}

Wenn nur vertikal mittig gesetzt werden soll reicht ein

Code:
#divbox{
width: 960px; 
margin: 0 auto;
}
 
Zuletzt bearbeitet:
Zurück
Oben