zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.09.2005, 11:36
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard horizontal und vertikal zentrieren

In der Rubrik Knowledge Base hatten wir das Thema schon. Jetzt habe ich friccas Methode genommen und in den mittigen Container noch 4 divs gepackt. 2 sollen oben und die anderen 2 unten zentriert werden.
Wenn ich bei den Boxen das float: left rausnehme, zentriert er es mir zwar auch, aber stellt alle Boxen untereinander dar. Wenn ich float: left reinnehme, stellt er mir 2 Boxen oben und 2 Boxen unten dar, aber nicht mehr zentriert. Wie kann ich das jetzt so hinbekommen, dass die trotzdem zentriert werden? Und auch das h1 in der Mitte beim IE? Im Firefox stellt er mir die h1 zentriert da, im IE nicht...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS vertical center using float and clear</title>
<style type="text/css">
*
{
	margin: 0;
	padding: 0;
}
html,body
{
	height: 100%;
}
body
{
	color: #630;
	font: 100.01%/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center;
	background: #fc6;
}
#distance
{
	width: 1px;
	height: 50%;
	margin-bottom: -235px;
	float: left;
}
#container
{
	position: relative;
	text-align: center;
	height: 470px;
	width: 100%;
	clear: left;
	margin: 0 auto;
}
h1
{
	font-size: 120%;
	text-align: center;
}
#box1, #box2, #box3, #box4
{
	overflow: hidden;
	position: relative;
	border: 10px solid #fff;
	height: 200px;
	width: 44%;
	color: #fff;
	margin: 1%;
	float: left;
}
#box1[id], #box2[id], #box3[id], #box4[id]
{
	display: table;
	position: static;
	text-align: center;
}
#middle
{
	position: absolute;
	top: 50%;
} /* für den IE */
#middle[id]
{
	display: table-cell;
	vertical-align: middle;
	position: static;
}
#inner
{
	text-align: center;
	position: relative;
	top: -50%;
} /* für den IE */
/* optional: #inner[id] {position: static;} */
#box1
{
	background-color: #D92C80;
}
#box2
{
	background-color: #00A0E3;
}
#box3
{
	background-color: #FFE96B;
}
#box4
{
	background-color: #2B7C33;
}
</style>
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>
	<div id="distance"></div>
	<div id="container">

		<div id="box1">
			<div id="middle">
				<div id="inner">
					<h1>Box 1</h1>
				</div>
			</div>
		</div>

		<div id="box2">
			<div id="middle">
				<div id="inner">
					<h1>Box 2</h1>
				</div>
			</div>
		</div>
		<div id="box3">
			<div id="middle">
				<div id="inner">
					<h1>Box 3</h1>
				</div>
			</div>
		</div>
		<div id="box4">
			<div id="middle">
				<div id="inner">
					<h1>Box 4</h1>
				</div>
			</div>
		</div>
	
	</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.09.2005, 12:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: horizontal und vertikal zentrieren

Zitat:
Zitat von cgdesign
Wenn ich float: left reinnehme, stellt er mir 2 Boxen oben und 2 Boxen unten dar, aber nicht mehr zentriert. Wie kann ich das jetzt so hinbekommen, dass die trotzdem zentriert werden?
Indem du einen umschließenden Container zentrierst (dazu braucht er eine Breitenangabe - aber nicht 100%...)
Ev. tust du dich leichter, wenn du nur jeweils die linke Box floatest und der rechten einen entsprechenden margin-left gibst.
Probleme mit dem IE wirst du IMHO so oder so haben

Zitat:
Und auch das h1 in der Mitte beim IE? Im Firefox stellt er mir die h1 zentriert da, im IE nicht...
Gib dem #middle eine width:100% und left:0; (nur für den IE...)
Wenn du deinen diversen verschachtelten Elementen mal unterschiedliche Hintergrundfarben gibst, dann siehst du, wo das Problem liegt....

Grüße
fricca
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.09.2005, 12:38
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Der umschließende Container ist ja schon zentriert... Aber ich will es ja dynamsich haben und nicht statisch. Also müsste der Container schon 100% haben, aber ich habe es ausprobiert, selbst bei einer festen Breite zentriert er es nicht, aber der Tipp mit dem left: 0 und width: 100% war goldrichtig, hätte ich ja auch gleich drauf kommen können...
Mit Zitat antworten
  #4 (permalink)  
Alt 15.09.2005, 12:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von cgdesign
Der umschließende Container ist ja schon zentriert...
Nö, er hat ja eine Breite von 100%.
Was sollte da noch zentriert sein?

Zitat:
selbst bei einer festen Breite zentriert er es nicht
Doch - aber nicht den Inhalt, sondern den Container selbst.
Elemente mit float:left sind immer so weit links wie möglich, da gibt's kein "zentrieren". Da musst du dann schon entsprechende margins vergeben (box1 und 3)
Mit Zitat antworten
  #5 (permalink)  
Alt 15.09.2005, 12:53
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Also bei mir steht im umschließenden Container:
Code:
#container
{
   position: relative;
   text-align: center;
   height: 470px;
   width: 100%;
   clear: left;
   margin: 0 auto;
}
margin: 0 auto und text-align: center, müsste er ja eigentlich zentrieren...
Mit Zitat antworten
  #6 (permalink)  
Alt 15.09.2005, 12:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von cgdesign
margin: 0 auto und text-align: center, müsste er ja eigentlich zentrieren...
Nochmal:
ein 100% breiter Container kann nicht mehr zentriert werden.
Und text-align:center zentriert Text (und inline-Elemente) innerhalb eines Containers - keine Blockelemente.

Lass width:100% weg (bzw nimm einen passenden %-Wert) und setz Werte für margin-left/-right. Dann hast du deine Zentrierung.
Du musst dann deine Box-Breiten noch anpassen.
Mit Zitat antworten
  #7 (permalink)  
Alt 15.09.2005, 13:12
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

aua ja, mein Denkfehler...

Danke!
Mit Zitat antworten
  #8 (permalink)  
Alt 15.09.2005, 13:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Ich habe für die Geschichte aber weniger CODE, oder habe ich es nicht verstanden. Schau es Dir mal an.

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 => Markup-Semantic">
/*<![CDATA[*/


*			{
			margin:  0;
			padding: 0;
			
html,
body		{
			color:		#000000;
			background:	#EEEEEE;
			
			line-height: 1.45;
			
			height : 100%;
			}

body		{
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}
			
			
#viewport50	{
			/* [float] verhindert 
			 * negatives verrutschen des #container
			 * aus denm Viewport
			 */ 
			float:left;
			
			display: block;
			
			height:50%;
			width:1px; 
			
			/*halbe Hoehe von #container
			 */ 
			margin-bottom: -15em; 
			
			background-color:red; 
			} 

		
#container 	{
			clear:left;
			 
			/* halbe Hoehe negativer [margin-bottom] im #viewport50
			 */ 
			min-height: 30em;
			 
			height: auto ! important; 
			height: 30em; 
			
			width: 90%; 
 
			margin: 0 auto;

			background-color:yellow; 
			} 
			
#container span
		   	{
			float: left;
			width: 47%;
			height: 14em;
			margin: .5em 1.34%;
			
			background-color: #2299FF; 				
			}

h1			{
			text-align: center;
			}			

/*]]>*/
</style>

</head><body>

   <div id="viewport50"></div> 
   
	<div id="container">
   		<span>
	   		<h1>h1 - text</h1> ...hier noch ein wenig Text
		</span>
   		<span>
	   		<h1>h1 - text</h1>
		</span>
   		<span>
	   		<h1>h1 - text</h1>
		</span>
   		<span>
	   		<h1>h1 - text</h1>
		</span>
   </div> 


</body></html>
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 15.09.2005, 14:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

@ulle

*hüstel*
h1 innerhalb von span?

Die h1 sind innerhalb ihrer Boxen bei dir nicht vertikal zentriert - das ist aber IMHO, was der OP wollte. Da bräuchte es ein line-height - und dann ist's vorbei mit mehrzeiligen Texten...

Grüße
fricca
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.09.2005, 14:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca
@ulle

*hüstel*
h1 innerhalb von span?

Die h1 sind innerhalb ihrer Boxen bei dir nicht vertikal zentriert - das ist aber IMHO, was der OP wollte. Da bräuchte es ein line-height - und dann ist's vorbei mit mehrzeiligen Texten...

Grüße
fricca
Opss, naja schreibfaul wie ich bin, der geübte Leser denk sich mal schnell ein paar DIVs mit einer Klasse

H1 sollte auch vertivcal zentriert werden (!?) Okay dann sollte wohl noch mehr Hirnschmals in den CODE
__________________
</ulle>
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
Absolutes DIV horizontal und vertikal zentrieren suckey CSS 4 28.12.2013 14:52
CSS-Seite horizontal und vertikal zentrieren! Boof CSS 20 05.02.2010 12:23
Hintergrundbild vertikal UND horizontal zentrieren? yggdrasil CSS 3 06.07.2008 10:19
Horizontal und Vertikal zentrieren mit CSS Bata CSS 8 18.09.2006 01:43
Bild horizontal und vertikal zentrieren Anonymous CSS 10 18.06.2003 11:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:53 Uhr.