✔ Div-Container (vertikal) mittig anzeigen

mille · 16. Januar 2006

Hallo!

Ich bin mir nicht sicher ob ich es bei CSS oder hier bei HTML ins forum schreiben sollte. Da mein problem ja eigentlich trivialstes HTML ist, hab ich mich fuer dieses Forum entschieden.

Ich habe also ein Div container (Design)

Code:

<div class="das_Design"> ...... </div>

Das ganze hat eine Größe von 800*400 Pixeln und soll exakt auf der mitte der seite angezeigt werden.

Das klappt leider nicht.
Ich hab folgendes probiert:

Code:

<table height="100%" Width="100%><tr height="100%" Width="100%>
<td height="100%" Width="100% valign=middle>

// hiert das DIV
</td></tr></table>

Auch habe ich probiert:

Code:

<div class="Frame">
// hier das DIV Design
</div>

mit folgender CSS

Code:

#frameID{
	height: 100%;
	width: 100%;
	vertical-align:middle;
}

Bei beiden Implementierungen tritt der effekt auf, das die äußeren Tabellen/divs genau so hoch sind, wie es das Design-DIV vorgibt!
Von der Logik her ist aber die Implementierung richtig!
Könnt ihr mir helfen?
Nötigenfalls poste ich auch den code oder den link =)

MfG

hpvw · 16. Januar 2006

Ein Beispiel:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>Test: Zentrieren</title>
<style type="text/css" media="screen">
    body, html {
        height:100%;
        margin:0;
        padding:0;
    }
    #centerIt {
        overflow:auto;
        position:relative;
        top:50%;
        height:300px;
        width:400px;
        margin:-150px auto auto auto;
        background:#c00;
        padding:10px;
    }
</style>
</head>
<body>
<div id="centerIt">Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.
    Curabitur volutpat dolor vitae elit.
    Nullam justo ipsum, laoreet sit amet,
    ultrices iaculis, porta et, neque.</div>
</body>
</html>

Gruß hpvw

Maik · 16. Januar 2006

Probier mal folgendes CSS-Modell:

Code:

div.center
{
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
top: 50%;
height: 400px;
margin-top: -200px;
background: #efefef;
}

HTML:

<body>

  <div class="center"> ... </div>

</body>

Da die Lösung auf CSS basiert, schiebe ich den Thread ins entsprechende Forum

mille · 16. Januar 2006

danke für die prompte hilfe!!

MfG

mille · 16. Januar 2006

Ich habe folgendes probiert:

Code:

position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
top: 50%;
height: 400px;
margin-top: -200px;

Allerdings ist das Ergebnis auch nicht ganz mittig!
der Abstand zum oberen bildschirmrand is größer als der zum unteren!

Maik · 16. Januar 2006

Kann es sein, daß der DIV-Inhalt größer / höher als die vordefinierten 400 Pixel ist?

Ansonsten poste mal den vollständigen HTML- und CSS-Code, denn prinzipiell funktioniert das Stylesheet einwandfrei, sprich ohne Verschiebungen in der Vertikalen bzw. Horizontalen.

mille · 16. Januar 2006

OKay, aber nicht wundern, da is noch Smarty-Code mit drinne, den einfach überlesen!!

HTML (index.tpl) bzw index.html!!

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

{if $smarty.get.version == 31} 
	<link href="style31.css" rel="stylesheet" type="text/css" />
{else}
	{if $smarty.get.version == 32}
		<link href="style32.css" rel="stylesheet" type="text/css" />
	{else}
		 <link href="style.css" rel="stylesheet" type="text/css" />
	{/if}
{/if}
</head>

<body>
	<div class="Frame" id="frameID" align="center">
		<div class="gesamtRahmen" id="gesamtRahmenID">
		  <div class="Rahmen" id="rahmenID" align="left">
			<div class="Links" id="linksID">
			  <div class="UeberMenue" id="ueberMenueID"></div>
			  <div class="Menue" id="MenueID">
					{if $smarty.get.page != "impressions"}
						<a href="index.php?page=impressions"><img src="menue/impressions.jpg" width="77" height="11" border="0" /></a>
					{else} 
						<img src="menue/impressionsactive.jpg" border="0" />
					{/if}
					
					<img src="menue/quarterdots.jpg" width="8" height="11" />
					
					
					{if $smarty.get.page != "portfolio"}
						<a href="index.php?page=portfolio"><img src="menue/portfolio.jpg" width="63" height="11" border="0" /></a>
					{else} 
						<img src="menue/portfolioactive.jpg" border="0" />
					{/if}
					
					
					<img src="menue/quarterdots.jpg" width="8" height="11" />
					
					
					{if $smarty.get.page != "leechings"}
						<a href="index.php?page=leechings"><img src="menue/leechings.jpg" width="68" height="11" border="0" /></a>
					{else} 
						<img src="menue/leechingsactive.jpg"border="0" />
					{/if}
					
					
					<img src="menue/quarterdots.jpg" width="8" height="11" />
					
					
					{if $smarty.get.page != "bout"}
						<a href="index.php?page=bout"><img src="menue/bout.jpg" width="43" height="11" border="0" /></a>
					{else} 
						<img src="menue/boutactive.jpg"border="0" />
					{/if}
					
					
					<img src="menue/quarterdots.jpg" width="8" height="11" />
					
					
					{if $smarty.get.page != "gbook"}
						<a href="index.php?page=gbook"><img src="menue/gbook.jpg" width="43" height="11" border="0" /></a>
					{else} 
						<img src="menue/gbookactive.jpg" border="0" />
					{/if}
			  </div>
			  <div class="unterMenue" id="unterMenueID"></div>
			  <div class="ContentPane" id="contentPaneID" align="left">
				<div class="leftContent" id="leftContentID"></div>
				<div class="ContentBox Stil2" id="contentBoxID">
				  <p>ich hab mir das jetzt mal auf one-jar durchgelesen.<br />
	  &quot;Quickstart&quot;.<br />
					Wenn ich das richtig verstehe muss ich dort alle relevanten Dateien reinpacken (in ein extra verzeichnis innerhalb des 							 Jars) und die Manifest.mf umschreiben?<br />
					Aber woher weiss das programm dann, welche fertigen Packages noch ben&ouml;tigt werden?<br />
					Etwaieg Java3D, textureloader etc packages will ich mir nicht extra aus jedem verzeichnis ziehen und extra hinzuf&uuml;gen 				(Das sollte bestenfalls schon automatisch geschehen).<br />
					Kann Eclipse das automatisch?<br />
					Ungef&auml;hr so: &quot;exportiere-&gt; Jar -&gt; name angeben -&gt; kurz warten -&gt; Ta da, Jar file fertig zum weggeben 				(mit allen notwendigen dateien, packages etc)&quot;.</p>
				  <p>\\edit: ich habe mir ein Verzeichnis erstellt und alle notwendigen java dateien, Texturen und 3dmodelle hinein kopiert. <br />
					Dann habe ich dasdfas one-jar-boot.jar mittels &quot;jar -xvf one-jar-boot.jar&quot; extrahiert und versucht folgende zeile 					 aufzurufen: &quot;jar -uvfm billard.jar boot-manifest.mf&quot;<br />
					Leider bekam ich eine Fehlermeldung, so ist es doch aber gefordert? oder sehe ich das falsch?</p>
				</div> 
				<div class="rightContent" id="rightContentID"></div>
			  </div>
			</div>
		  </div>
		  <div class="bottomLine" id="bottomLineID"><a href="index.php?page={$smarty.get.page}&version=32"><strong>.version 3.2</strong></a> | <a href="index.php?page={$smarty.get.page}&version=31"><strong>.version 3.1</strong></a> | {$count} Zugriffe | .impressum | (c) 2006 by Sebastian 'da-mille' S. </div>
		</div>
	</div>
</body>
</html>

hier die CSS

Code:

#gesamtRahmenID {
	height: 460px;
	width: 800px;
	max-height: 450px;
	max-width: 800px;
	vertical-align:bottom;
}
#bottomLineID{
	height: 10px;
	background: none;
	width: 800px;
	text-align: right;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 9px;
}
#rahmenID {
	height: 450px;
	width: 800px;
	max-height: 450px;
	max-width: 800px;
	background-image:url(v3hp.jpg);	
}
#linksID {
	height: 450px;
	width: 400px;
	float: left;
}
#ueberMenueID {
	height: 25px;
	width: 100%;
}
#MenueID {
	height: 20px;
	width: 100%;
	text-align:center;
	vertical-align: bottom;
	font-size: 1px;
}
#unterMenueID {
	height: 50px;
	width: 100%;
}
#contentPaneID {
	height: 350px;
	width: 100%;
}
#contentBoxID {
	height: 320px;
	width: 300px;
	max-height: 320px;
	max-width: 300px;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #343F56;
	float: left;
}
#leftContentID {
	height: 320px;
	width: 60px;
	float: left;
}
#rightContentID {
	height: 320px;
	width: 40px;
	float: right;
}
#frameID{
	position: absolute;
	left: 50%;
	width: 800px;
	margin-left: -400px;
	top: 50%;
	height: 400px;
	margin-top: -200px;
}

Maik · 16. Januar 2006

Wie ich vermutete, ist der Inhalt höher als die vordefinierten 400 Pixel: die 'tatsächliche' Höhe des DIV#frameID beträgt nämlich ~ 495px

Korrigiertes Stylesheet als Lösungsvorschlag:

Code:

#frameID{
	position: absolute;
	left: 50%;
	width: 800px;
	margin-left: -400px;
	top: 50%;
	height: 500px;
	margin-top: -250px;
}

mille · 16. Januar 2006

top! Danke =)

MfG

✔ Div-Container (vertikal) mittig anzeigen

mille

Erfahrenes Mitglied

hpvw

Erfahrenes Mitglied

Maik

mille

Erfahrenes Mitglied

mille

Erfahrenes Mitglied

Maik

mille

Erfahrenes Mitglied

Maik

mille

Erfahrenes Mitglied

Neue Beiträge