Antworten zum Thema „Boxen Problem“

Incursions · 08.09.2006

Also ich richte meine Box mit diesem Code mittig aus:

Code:

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #ccc;
	background-color: #333;
	text-align: center;
	background-image: url(back.jpg);
}
#Layer3 {
	width: 500px; 
	margin-right: auto;
	margin-left: auto; 	
	text-align:left; 
}

Jetzt würde ich sie aber gerne an den unteren Rand setzen.
Jetzt hab ich es so probiert:

Code:

#Layer3 {
	width: 500px; 
	margin-right: auto;
	margin-left: auto; 	
	text-align:left; 
	bottom: 0px;
}

Geht aber leider nicht. Die Box bleibt wo sie ist, nämlich am oberen Rand und in der Mitte.

Ich hab leider keine Ahnung wie ich es hinbekomme und auf http://de.selfhtml.org hab ich auch nichts gefunden was das Problem beschreibt.

Mfg

martinmm · 08.09.2006

noch mal genau schauen... wenn du etwas positionierst, musst du neben der positionsangabe auch eine positionsART angeben (z.B. absolute, relative, fixed...) In deinem Falle müsstest du:

Code:

position: absolute;

hinzufügen (bei layer3)

Incursions · 08.09.2006

Jetzt funktioniert die mittige Ausrichtung nicht mehr.

martinmm · 08.09.2006

so kurzes css, wie ich es z.B. bei schachner-holzbau.at gelöst habe:

immer ineinander gesetze div-boxen mit id
body und center sorgen für die mitte-positon
dann kommt content, der absolute zu center gesetzt wird
den verrücken wir - durch margin oder left: -470px; um seine hälfte nach links
da er nun absolut gesetzt ist, kann auch sein inhalt sich zu ihm absolut verhalten (du kannst also dann auch hier elemente passgenau platzieren)

CSS-Code

Code:

body {
 background-color: #C2C4CA;
 text-align: center;
 
}
 

#center {
 width:940px; 
 height:600px;
 margin: 0 auto; /* das zentriert das dinge auch im mozilla*/
 overflow: visible;
}
 
#content {
 position: absolute;
 margin-left: -470px;
 margin-top: 30px;
 width: 940px;
 height: 400px; 
 background-color: #000000;
 
}
 
#test {
 position: absolute;
 top: 30px;
 left: 30px;
 height: 20px; 
 width: 20px;
 background-color: #0066FF;
}

HTML-Seite

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
</head>
 
<body>
<div id="center">
<div id="content"><div id="test"></div>
</div>
</div>
</body>
</html>

warum hat es bei dir nicht funktioniert? durch die absolute positierung. da du keinen left-wert angegeben hast, nimmt er automatisch 0 an und setzt den div auch absolut nach 0 links.

alles klar? ansonsten nochmals melden

Incursions · 08.09.2006

Nein, is immer noch nich klar ^^

Ich kann ja jetzt schließlich immer noch nichts am Boden ausrichten.
Weil wenn ich den Content layer jetzt auf "bottom: 0px" setze, dann liegt er nicht am Boden sondern nur am Boden vom Center Layer...

Ich kann dem Center Layer aber nicht die Höhe "100%" zuweisen. Wie kann ich es denn sonst machen?

martinmm · 08.09.2006

einfach mal das height Attribut rauslöschen (aus dem center)?

Ansonsten den center-div auch an bottom positionieren

Incursions · 08.09.2006

ok, ich bin vorher irgend wie auf dem Schlauch gestanden ^^ Aber jetzt is es mir klar.. und danke, das geht gut.

ich hab es zwar einwenig anders gemacht, aber im Prinzip ist es das gleiche.

Code:

#Layer1 {
	position:absolute;
	width:100%;
	height:500px;
	bottom: 0px;
	left: -50%;
	text-align:right;
}
#Layer2 {
	position:absolute;
	width:500px;
	height:500px;
	z-index:1;
	right: -250px;
	bottom: 0px;