Antworten auf deine Fragen:
Neues Thema erstellen

Div zentrieren

Zaolat

Aktives Mitglied

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

Noch nicht viel geschrieben

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
 
Zuletzt bearbeitet:

cebito

undefined

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".
 
Zuletzt bearbeitet:

Curanai

Aktives Mitglied

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

Aktives Mitglied

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben