Div zentriert funktioniert einfach nicht :(

Status
Nicht offen für weitere Antworten.
M

mipa_acc

Grünschnabel
Hallo,

ich versuche nun mittlerweile seit 5 einhalb Stunden von meiner Internet Seite die <div> mittig anzuordnen.

Also
Ich benutze Expression Web. Da habe ich mir die Schalftfläche "Schichten" anzeigen lassen und Zeichne mir verschiedene Schichten. Eine Schicht ist ein <div> das ich halt an irgend eine Position schieben kann. Die Seite wäre nun eigentlich feritg. Jetzt fehlt nur noch, dass meine Inhalte Zentriert sind. Mit Inhalte meine ich nicht den Text in den div sondern die DIV selber.

Nun habe ich ja auch schon gegoogelt und rumgesucht. Da bin ich drauf gekommen, dass ich ein "Haupt Container" brauche in dem ich alle meine div reinwerfe und zu diesem Haupt Container sage: text-align: center;. Das ist ja alles recht und schön, es funktioniert nur nicht. Wenn ich mein Browser Fenster breit ziehe, dann zentriert sich der Inhalt nicht.

Jetzt habe ich veruscht, in das zu in dem div sage: position: relative;. Das funktioniert dann, sobald ich aber das zu einem zweiten div sage funtkiniert es wieder nicht mehr. Ich bin an verzweifeln...

Hier ist mal mein Code:

---Css Datei---
Code: 
#center_container {
	background-color:#E5C3C6;
	text-align:center;
	width:100%;
	z-index:1;

}
#container {
	background-color:#E5C3C6;
	text-align:center;
	margin:0pt auto;
	padding:0pt 10px;
	width:950px;
	height: 529px;
	z-index:2;
}

#text_field {
	position: relative; 
	left: -3px; 
	top: 136px; 
	width: 415px; 
	height: 250px; 
	background-color: #A11B3E; 
	color: #FFFFFF; 
	border-left-style: none; 
	font-family: Arial; 
	font-size: 11pt; 
	padding-left: 6px; 
	padding-top: 4px;
	text-align: left;
	z-index: 4; 
}
#always_menue {
	position: relative; 
	left: 380px; 
	top: 33px; 
	width: 208px; 
	height: 53px; 
	z-index: 16; 
	font-family: arial; 
	font-size: 11pt; 
	color: #A31B49; 
	font-weight: bold; 
	line-height: 16pt;
	text-align: left;
}


--- HTML Code ---
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=utf-8" />
<title>Kosmetikstudio Straubing</title>

<link rel="stylesheet" type="text/css" href="styleRot.css" />

</head>

<body>

<div id="center_container">

	<div id="container">
	
		<div id="text_field">
		
			Mit Hilfe feinster Mikrokristalle werden abgestorbene Hautschüppchen gelöst und 
			durch ein integriertes Vakuum abgesaugt. Diese Behandlungsart ist in der Regel 
			schmerzfrei.<br />
			<br />
			Die Methode eignet sich hervorragend für<br />

		</div>
			
		<div id="always_menue">
		
			Medizinische Kosmetik<br/>
			Kosmetik<br/>
			Massagen<br/>
			Anti Schmerz<br/>


		
		</div>
			
	</div>

</div>

</body>

</html>


Vielen Dank im Vorraus

MFG
 
Hi,

das DIV #container ist doch im DIV #center_container horizontal zentriert - einfach mal einen der beiden gleichlautenden Hintergründe ändern, um die Boxengrenzen zu erkennen.

Und für die beiden nachfolgenden DIVs hast du Positionsangaben deklariert, mit denen sie nicht zentriert sein können.
 
Hallo Maik,

wie müsste ich denn die beiden nachfolgenden DIV´s Positionieren, damit sie zentriert wären? Etwa mit position: absolute; ? Aber ich dachte, dass ich relativ brauche, da ich ja von dem meinem Conatainer ausgehen will, da dieser Zentriert ist.

MFG
 
Hi,

die relative Positionierung ist schon in Ordnung, nur müssen eben die Positionsangaben zum linken Elementrand entsprechend gesetzt werden:

Code: 
#center_container {
background-color:#ffff00;
width:100%;
z-index:1;
}

#container {
background-color:#E5C3C6;
margin:0pt auto;
padding:0pt 10px;
width:950px;
height: 529px;
z-index:2;
}

#text_field {
position: relative;
left: 160px;
top: 136px;
width: 415px;
height: 250px;
background-color: #A11B3E;
color: #FFFFFF;
border-left-style: none;
font-family: Arial;
font-size: 11pt;
padding-left: 6px;
padding-top: 4px;
text-align: left;
z-index: 4;
}

#always_menue {
position: relative;
left: 582px;
top: 33px;
width: 208px;
min-height: 53px;
height: auto !important;
height: 53px;
z-index: 16;
font-family: arial;
font-size: 11pt;
color: #A31B49;
font-weight: bold;
line-height: 16pt;
text-align: left;
background-color: #ffff00; /* optional, um Boxengrenzen zu visualisieren */
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück