zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikal zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.06.2003, 00:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2003
Beiträge: 46
rusty befindet sich auf einem aufstrebenden Ast
Standard Vertikal zentrieren

Hallo allerseits

Ich habe eine div-Box. Diese ist, wie in einem Beispiel auf CSS4YOU 760px breit. Nun möchte ich aber die Höhe zusätzlich mit "height" bestimmen und das ganze vertikal zentrieren.

Habe es mit "margin:auto" versucht und mit "margin-top:" und "-bottom" herumgespielt, das geht aber nicht (IE 6). Hier das CSS:

Code:
<div style="width:760px;height:530px;margin:auto;text-align:left;background-color:#ffffff;border:1px dotted #bdbec6;">
Wie mache ich dass, das der Browser die Box immer zentriert anzeigt (vertikal und horizontal)?


Danke und Gruss,

Roli
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.06.2003, 11:13
Neuer Benutzer
neuer user
 
Registriert seit: 11.06.2003
Beiträge: 5
Progman befindet sich auf einem aufstrebenden Ast
Standard

Es soll ja eigentlich mit "margin: auto auto" gehen, aber der IE verarbeitet besondere CSS-Eigenschaften nicht, andere Browser hingegen schon.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2003, 15:23
Neuer Benutzer
neuer user
 
Registriert seit: 21.06.2003
Beiträge: 7
I.C.Wiener befindet sich auf einem aufstrebenden Ast
Standard

Moin,

Code:
<div style="margin:0 auto 0 auto;">horizontal zentriert</div>
bin mir jetzt nicht sicher in welchen Browsern das funktioniert, bin da aber zuversichtlich :)
Sonst probier mal ein bisschen mit prozenten rum.
Code:
<div style="margin-left:30%; margin-right:30%; width:40%">hoffentlich horizontal zentriert</div>
<div style="margin-top:40%; margin-bottom:40%; width:20%">hoffentlich vertical zentriert</div>
MfG
Edit: BBCode aktiviert und Smilies deaktiviert.
Mit Zitat antworten
  #4 (permalink)  
Alt 23.06.2003, 13:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.05.2003
Beiträge: 129
Thomas (css 4 you) befindet sich auf einem aufstrebenden Ast
Standard

Hi rusty,
vertikal zentrieren kannst du es z.B. mit absoluter Positionierung.
Positioniere den Container mit left:50% und top:50%; in die Seitenmitte und verschiebe ihn mit negativen margin um die halbe Höhe nach oben und um die halbe Breite nach links.

Code:
<div style="position:absolute;left:50%;top:50%;
width:760px;height:530px;margin-left:-380px;margin-top:-265px;
text-align:left;background-color:#ffffff;border:1px dotted #bdbec6;">
Gruß
Thomas
Mit Zitat antworten
  #5 (permalink)  
Alt 23.06.2003, 15:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Als Verfechter der relativen Breite biete ich eine entsprechende Lösung:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">	<!--
	html,body {
		background-color: #FF9933; 
		color: #000000;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 0.9em;
		margin: 0px;
		padding: 0px;
		overflow: auto;	
		height: 100%;	
	}

	div {
		position:absolute;
		left:15%;
		top:15%; 
		width:70%;
		height:70%;
		background-color:#FFFFFF;
		border:1px solid #bdbec6;
		overflow: auto;
	}
	-->
</style>
</head>

<body>

<div>&</div> 

</body></html>
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 26.04.2005, 20:14
Benutzerbild von newmacer
Neuer Benutzer
neuer user
 
Registriert seit: 26.04.2005
Beiträge: 20
newmacer befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Thomas (css 4 you)
Hi rusty,
vertikal zentrieren kannst du es z.B. mit absoluter Positionierung.
Positioniere den Container mit left:50% und top:50%; in die Seitenmitte und verschiebe ihn mit negativen margin um die halbe Höhe nach oben und um die halbe Breite nach links.

Code:
<div style="position:absolute;left:50%;top:50%;
width:760px;height:530px;margin-left:-380px;margin-top:-265px;
text-align:left;background-color:#ffffff;border:1px dotted #bdbec6;">
Gruß
Thomas
Servus alle zusammen. Bin neu hier und bin auf das Beispiel gestoßen. Läuft super, aber nicht unter IE, sowohl am PC als auch am Mac. Safari, Firefox und Camino kommen super zurecht. Gibt es da auch einen Trick, wie man es auch für IE anpassen kann?
Mit Zitat antworten
  #7 (permalink)  
Alt 26.04.2005, 21:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.11.2004
Beiträge: 547
lomtas befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Thomas (css 4 you)
Hi rusty,
vertikal zentrieren kannst du es z.B. mit absoluter Positionierung.
Positioniere den Container mit left:50% und top:50%; in die Seitenmitte und verschiebe ihn mit negativen margin um die halbe Höhe nach oben und um die halbe Breite nach links.
Da ist mir eine Sache zu erst heute aufgefallen: Wenn man dann die Auflösung soweit runter fährt, dass sie unter der width Angabe liegt, dann rutscht das Fenster links raus. Wollte nur sagen, dass das zu beachten gilt. Momentan noch zu betrachten unter www.lippert-webdesign.de Mache mir gerade Gedanken darüber wie man das am besten löst...
Mit Zitat antworten
  #8 (permalink)  
Alt 27.04.2005, 19:07
Benutzerbild von newmacer
Neuer Benutzer
neuer user
 
Registriert seit: 26.04.2005
Beiträge: 20
newmacer befindet sich auf einem aufstrebenden Ast
Standard

Gibt´s den wirklich niemanden hier?
Mit Zitat antworten
  #9 (permalink)  
Alt 27.04.2005, 21:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

http://www.xhtmlforum.de/viewtopic.php?t=3684

Viel Erfolg.......
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.04.2009, 18:00
Neuer Benutzer
neuer user
 
Registriert seit: 07.04.2009
Beiträge: 3
Pixplanet befindet sich auf einem aufstrebenden Ast
Lächeln Lösung!!!

Hey Leute!
Ich hab die Lösung!!! Funktioniert im aktuelle IE und Firefox!

Und zwar ist die ganze Sache bei mir noch etwas komplizierter. Ich habe ein großes Foto als Gesamthintergrund der Seite, dass auch hor / vert zentriert sein soll. Darüber liegt dann noch ein Layer, das auch mittig zentriert ist.

Ich denke damit ist die Problematik des vert Zentreirens gelöst. Allerdings ist Voraussetzung, dass man die Höhe des oberen Layers kennt.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>aaa</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
#horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -290px;
text-align: center;
min-width: 1000px;
}
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 1000px;
	height: 580px;
	margin: 0px auto;
	background-image: url(Bilder/sanandres_03.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
body {
	background-image: url(sanandres.jpg);
	background-position: center center;
	min-height: 580px;
	background-attachment: fixed;
	background-repeat: no-repeat;
}


-->
</style>
</head>
<body>

<div id="horizon">
<div id="wrapper">
<div id="content">

test

</div>
</div>
</div>

</body>
</html>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div in div vertikal zentrieren kostonstyle CSS 0 18.06.2011 18:23
CSS-Seite horizontal und vertikal zentrieren! Boof CSS 20 05.02.2010 13:23
Hintergrundbild vertikal UND horizontal zentrieren? yggdrasil CSS 3 06.07.2008 11:19
Vertikal zentrieren in Box wandler CSS 5 01.08.2006 20:01
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE AndreasB CSS 11 13.03.2006 18:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:05 Uhr.