Middle und Center Formatieren

ForenNews · #1 (**permalink**) 30.03.2005, 09:49

Hi,

ich hab da ein Problem. Ich möchte einen Conti zentriert und mittig in der Höhe ausrichten. Für zentriert hab ich eine Lösung gefunden bei css4you, die folgend aussieht:

<div style="vertical-align: middle; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN: 0px auto; BORDER-LEFT: #000000 1px solid; WIDTH: 760px; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #bdbec6; TEXT-ALIGN: left">
<div id="title" style="width: 758; height: 100">
<h1>Header</h1>
</div>
<div id="left">
<div class="menucontainer">
<p class="menutitle">MENU 1</p>

Hyperlink 1 Hyperlink 2
Hyperlink 3 Hyperlink 4
Hyperlink 5
</div>
</div>
<div id="content">
<h2 style="MARGIN-TOP: 10px"> </h2>
</div>

<br style="CLEAR: both">
</div>

Nur, wie bekomm ich das in der Höhe mittig ausgerichtet?

The Doc · #2 (**permalink**) 30.03.2005, 16:59

vertical-align, geht aber afaik nur in Tabellenzellen. Deshalb entweder nen div rum mit display:table; und den content mit display:table-cell; und vertical-align:middle; oder ne Tabelle drum.

ulle · #3 (**permalink**) 30.03.2005, 18:04

Warum nicht BODY als [display: table;] ??

So geht es zwar nicht im IE, zumindest nicht vertikal, aber wer will das schon wissen...

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> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/ 


*			{ 
			margin:  0; 
			padding: 0;
			
			border-collapse:collapse; 
			border-spacing: 0; 
			} 

			
html,
body		{ 
			height:  100%;
			width:   100%;
			
			color:				#000000; 
			background-color:	#FF9922;
			
			line-height: 1.45;
			} 
			
body		{ 
			display: table;

			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}


div			{
			display: table-cell;
			
			background-color:	#FFFFFF;
			
			vertical-align: middle;
			text-align: 	center;
			
			font-size: .8em;
			}			

			
p			{ 
			/*
			 * Stellvertreter Block-Elemente
			 */
			width: 10em;
			height: 9.8em;
			
			margin: auto;
			border: 1px solid #000000;
			
			background-color:	#FF0000;
			}
			
		


/*]]>*/ 
</style> 


</head> 
<body>

<div>
	Dies ist ein Text 
	

	

 </p>
	

	Dies ist ein Text 
</div>

</body> 
</html>

nicmare · #4 (**permalink**) 30.03.2005, 22:49

Zitat:

Zitat von The Doc

vertical-align, geht aber afaik nur in Tabellenzellen. Deshalb entweder nen div rum mit display:table; und den content mit display:table-cell; und vertical-align:middle; oder ne Tabelle drum.

das ist mir neu. is das in den gängigen browsern kompatibel? also ie, ff, nn, opera

The Doc · #5 (**permalink**) 30.03.2005, 23:53

siehe Ulle, der Junge hats drauf, also wirds gehen

ForenNews · #6 (**permalink**) 31.03.2005, 08:45

Hallo, danke für Eure Hilfe. Also Table, in welcher Form kam nicht in Frage, damit arbeite ich seit jahren und bin genausolang zwar fix damit - aber auch unzufrieden.

Die Lösung von Ulle sieht sehr interessant aus, hat aber den entscheidenten Nachteil, das sie nicht mit dem IE funktioniert, und damit grobgeschätzt 100% der Zielkundschaft ausgeschlossen wären. Für ein privates Projekt wär vllt. ok *g*, aber gewerbliche Projekte brauchen halt schon paar zuschauer.

Auf dem CSB hat man folgende Lösung erarbeitet, die nach der ersten Betrachtung gestern Abend schon mal gut funktionierte. Ich stell die hier mal ein, falls das auch jemand gebrauchen kann. Erstellt wurde es von s0nic:

************************************************

<!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">

</style>
</head>
<body>

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

<h1>Header</h1>

<div id="left">
<div class="menucontainer">
MENU 1
<ul>[*]Hyperlink 1[*]Hyperlink 2[*]Hyperlink 3[*]Hyperlink 4[*]Hyperlink 5[/list] </div>
</div>

<div id="content">
<h2 style="MARGIN-TOP: 10px">lalala</h2>

bissle text...

bissle text...

bissle text...

bissle text...

bissle text...
</p>
</div>

</div>
</div>
</body>
</html>
*************************************************

fricca · #7 (**permalink**) 31.03.2005, 09:49

Zitat:

Zitat von ForenNews

Code:

 #horizon {
            position: absolute;
            top: 50%;
            [...]
            margin-top: -170px;
            [...]
        }

Diese Art der vertikalen Zentrierung hat leider den Nachteil, dass der Inhalt nach oben aus dem Anzeigebereich verschwindet, wenn das Fenster zu "kurz" wird - und das ohne dass man hinscrollen könnte...
(Und der IE5 Mac kann das überhaupt nicht - die oberen 50% des divs sind nicht sichtbar)

Hier hat sich jemand ausführliche Gedanken zu dem Problems gemacht - ergänzend zu ulles Lösung auch für IE.

Grüße
fricca

ulle · #8 (**permalink**) 31.03.2005, 09:51

Zitat:

Zitat von ForenNews

Die Lösung von Ulle sieht sehr interessant aus, hat aber den entscheidenten Nachteil, das sie nicht mit dem IE funktioniert, und damit grobgeschätzt 100% der Zielkundschaft ausgeschlossen wären.

Der IE hat nur vertikal ein Problem damit, und wenn schon, es ist ja möglich mit einem StarHack ein wenig nachzuhelfen. Bis der IE dann auch mal CSS2.1 gelernt hat kann man sich wie gezeigt behelfen. Okay es ist nicht genau in dcer Mitte, aber wer nimmt es so genau. Der visuelle Eindruck und die Sematik ist wohl wichtiger.

Einfach ins CSS einfügen

Code:

* html div	{
			/* Star-Hack fuer InternetExplorer
			 * individuelle Anpassung
			 * je nach Hoehe des Inhaltes
			 *
			 * fuer IE Win \*/
			height: 60%;
			padding: 20% 0 0 0;
			/* */ /* for Mac IE */
			}

ulle · #9 (**permalink**) 31.03.2005, 09:58

@fricca ; Dein Link zeigt zwar eine Lösung, aber auch eine DIV-Suppe, ich weiß nicht ob dann eine "Markup" <table> nicht schlauer ist. Alles mit Gewalt von Tables auf DIV-Container zu heben macht wohl wenig Sinn.

Code:

<div id="outer">
  <div id="middle">
    <div id="inner">

ulle · #10 (**permalink**) 31.03.2005, 10:04

Zitat:

Zitat von The Doc

siehe Ulle, der Junge hats drauf, also wirds gehen

Himmel, das sehe ich ja jetzt erst. Nur keine Blumen, bin eben/gestern erst selbst auf diese Lösung gekommen. Ob das alle Browser problemlos einlesen weiß ich noch nicht.

Und wenn der Validator nicht geschimpft hätte, dann könnte man sogar das DIV einsparen - indem das HTML-Element schon [display: table;] und das BODY-Element [display: table-cell;] "gespielt" hätte. Funktioniert hat es, aber Valide ist es nur wenn nach dem BODY ein "natürliches" BLOCK-Element folgt. Schade !!

Falls man nur ein "natürliches" Block-Element benutzt

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> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/ 


*			{ 
			margin:  0; 
			padding: 0;
			
			border-collapse:collapse; 
			border-spacing: 0; 
			} 



html,
body		{ 
			display: table;
			
			height:  100%;
			width:   100%;
			
			color:				#000000; 
			background-color:	#FF9922;
			} 

			


body		{ 
			display: table-cell;
			
			background-color:	#FFFFFF;
			
			vertical-align: middle;
			text-align: 	center;
			}			



* html body	{
			/* Star-Hack fuer InternetExplorer
			 * individuelle Anpassung
			 * je nach Hoehe des Inhaltes
			 *
			 * fuer IE Win \*/
			height: 60%;
			padding: 20% 0 0 0;
			/* */ /* for Mac IE */
			}			


			
p			{ 
			/*
			 * stellvertreter Block-Elemente
			 */
			width: 10em;
			height: 9.8em;
			
			margin: auto;
			border: 1px solid #000000;
			
			background-color:	#FF0000;
			}
			
			
/*]]>*/ 
</style> 


</head> 
<body>

	

 </p>

</body> 
</html>

Geht aber nicht mit einem IMG-Tag, da "natürliches" Inline-Element. Aber nur für Bilder gibt es ja die Hintergrund-Zentrierung

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild zentrieren	JuKo	CSS	4	21.03.2018 01:35
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 16:43
Unterschiedliche Darstellung in Firefox / IE	memphis2k	CSS	16	30.08.2011 18:40
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 15:30
Problem mit CSS in Joomla 1.5	noobilicius	CSS	6	25.09.2008 21:24