Div zentrieren

Zaolat · 09.10.2011

Moin Moin,

ich habe eine Hürde bei dem zentrieren eines DIV's in css. Ich muss dazu sagen, dass ich mich zu den anfänger zähle, was CSS betrifft. Doch vielleicht findet sich jemand, der mir dabei hilft.

Es geht darum, die zukünftige Navibar zentriert darzustellen.

Dies ist der css Code:

Code:

@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}

.container {
	width: 960px;
	background: #FFF; 
}

.header {
	background-color: #1b1fc3;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #ffe357;
	height: 32px;
	z-index: 10;
	visibility: visible;
}

.navibar {
	width: 600px;
	background-color: #1b1fc3;
	left: 50%;
	position: absolute;
	top: 32px;
	z-index: 5;
	border: 2px solid #ffe357;
	height: 156px;
}
.content {
	width: 800px;
	margin-top: 200px;
}

powerzone3000 · 09.10.2011

AW: Div zentrieren

Hi,

also wenn ich das jetzt richtig verstehe ist das eigentlich ne ganz einfache Rechung.

Du hast ja deinen Container mit einer Breite von 960px indem sich alle anderen DIV's befinden. Deine Navibar hat eine Breite von 600px. Also rechnest du:

Code:

 960px
-600px
=360px

um jetzt den Abstand von links rauszubekommen das ganze nur noch halbieren (somit hast du links und rechts den gleichen Abstand) und fertig

also braucht deine Navibar einen margin-left von 180px.

Code:

.navibar {
	width: 600px;
	background-color: #1b1fc3;
	margin-left:180px;
        position: absolute;
	top: 32px;
	z-index: 5;
	border: 2px solid #ffe357;
	height: 156px;
}

Ich hoffe das war was du wolltest, und ich hab es einigermaßen verständlich erklärt.

Gruß Flo

cebito · 09.10.2011

AW: Div zentrieren

Mal abgesehen davon, das position:absolute - wenn man nicht weiß was man da macht - eher kontraproduktiv ist, ist eine CSS ohne zugehöriges HTML auch ziemlich nutzlos. Kein Mensch weiß, wie deine div (oder was auch immer die Klassen besitzt) ineinander verschachtelt (oder eben nicht) sind. Das ist aber primär sehr wichtig zu wissen, um hier wirklich eine helfende Antwort geben zu können.

Im Normalfall zentriert man ein Blockelement mit margin:auto; das hättest du aber auch selbst rausfinden können, wenn du den von dir gewählten Threadtitel einfach mal in die Suche eingegeben hättest. Diese Frage wurde hier nämlich schon gefühlte 1.000.000 mal gestellt UND beantwortet.

@bayersoftware - deine Rechnung geht leider nicht auf, egal, wo im HTML sich die Navi befindet. Sie wird sich NICHT am Container ausrichten, selbst wenn sie sich HTML-Seitig in diesem befindet. Dafür fehlt dem Container selbst "position".

Curanai · 13.10.2011

AW: Div zentrieren

Warum so kompliziert?! Es geht wohl um eine Seite mit 960 px Gesamtbreite, oder?!

body { margin:0; padding:0; text-align:center; font-size:small; }
div#maincontent{ margin:0px auto 0px; width:960px; text-align:left; }

Alles, was sich dann wieder im hier benannten "maincontent" abspielt (Menü und Content-Bereich), lässt sich mit eigenen Klassen/ID-Angaben formatieren ...

Das gestrippte HTML dazu ...

<body>
<div id="maincontent"></div>
</body>

Mein Tipp: Arbeite bei der Seitenstruktur immer mit a) aussagekräftigen Namen und b) IDs ... Klassen kannst Du später auf die IDs zusätzlich anwenden bei Bedarf. Denn: Steht Deine Seitenstruktur, wäre es ärgerlich, wenn eine Klasse, die Du änderst, die ganze Seite später zerschießt.

Zaolat · 13.10.2011

AW: Div zentrieren

Danke für eure Tipps. Ich hatte tatsächlich vergessen die Werte Margin anzupassen.

Ich beginne mit gerade mit HTML und versuche verschiedene Vorgehensweisen. Teste also auch eure Tipps.

Danke nochmal