Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Div zentrieren“

AlphaGen

Nicht mehr ganz neu hier

Ich möchte mit divs eine Navigation erstellen. Die Navigation soll horizontal ausgerichtet sein und 5 Buttons haben.

Jetzt das Problem: Ich möchte das ganze mit divs machen (falls das geht).
Sagen wir, ich habe eine Auflösung von 800 x 600. Ich möchte, dass jeder Button 50 pixel lang ist. Mit "float:left;" erreiche ich, dass die 5 divs hintereinander stehen. Aber wie krieg ich die jetzt mittig für JEDE Auflösung.

Klar kann ich jetzt ein div links hin machen, was 275 pixel lang ist. Aber das ist dann halt nur für die auflösung 800x600.

Bin ein Neuling auf dem Gebiet mit divs. Mit CSS und HTML kenn ich mich aber an sonsten aus würde ich behaupten.

HTML - Datei:

<body id="body">
<center>
<div id="navi"> //Leiste die komplett durchs gesammte Bild geht ganz oben
<div id="float">a</div>
<div id="float">a</div>
<div id="float">a</div>
<div id="float">a</div>
<div id="float">a</div>
</div>
</center>
</body>


Ausgelagerte CSS - Datei:

#body
{
background:url(pics/verlauf.gif) repeat-x; (Hintergrundbildung der Seite)
margin:0px;
}

#navi
{
background:url(pics/navi.gif) repeat-x; (Das ist der Hintergrund der Navigationsleiste)
width: 100%;
height: 41px;
text-align:center;

}


#float (Das sollen die Buttons werden)
{
background:#000000;
width: 50px;
height: 41 px;
float:left;
}
 

Herr_D

offline

AW: Div zentrieren

Oder auch hier:



Das ganze mit ewig vielen divs anzulegen ist ein bisschen... naja... komisch ;)

so sieht das aus, wenns ne Navi sein soll, dann entweder mit Liste (ul, li) oder die Bilder einfach so einsetzen und dem div navi ein text-align center zuordnen



<body id="body">

ist totaler Blödsinn
 

AlphaGen

Nicht mehr ganz neu hier

AW: Div zentrieren

Wieso Blödsinn? Damit wird der Hintergrund der Seite definiert. Das ist ein 1 px breiter und 400 px langer Verlauf, der immer wieder wiederholt werden soll auf der x-Achse.

Und selbst wenn es Blödsinn ist, dann sag mir bitte warum, damit ich draus lernen kann ;)

Aber VIELEN Dank für die Links. Das hilft mir weiter. :)
 
Zuletzt bearbeitet:

rotzbua

Aktives Mitglied

AW: Div zentrieren

Es reicht eigentlich auch ein ganz normaler body tag, also:

HTML:
<body>

und dann im css

Code:
body {
background: url(pics/verlauf.gif) repeat-x;
margin:0px;
}

weiters solltest du noch für nach den verlauf eine hintergrundfarbe definieren, denn der hört ja auch irgendwann auf. (Außer er verläuft ins weisse, dann wär es "egal")

also:
Code:
body {
background-image: url(pics/verlauf.gif);
background-repeat: repeat-x;
background-color: #f0f0f0;
margin:0px;
}

(und ja, ich teil mein css gerne auf auf die verschiedenen einzelattribute ;))
 

AlienMacHine

Musiker-Designer-Punk

AW: Div zentrieren

Man nimmt eigentlich li-Elemente dafür. Geht sicherlich auch mit divs ist aber semantisch nicht korrekt! Nimm Dir die Links zur Brust die Du gekriegt hast.
Übrigens: id's dürfen nur 1 mal pro Seite vergeben werden! Deine divs haben alle die id float! Das ist ein Syntax-Fehler. Du musst da Klassen verwenden...Wie gesagt: Die Links durchlesen...Da fehlt es anscheinend an grundlegenden Dingen....
 

AlphaGen

Nicht mehr ganz neu hier

AW: Div zentrieren

Links nehmichmir zur Brust.

Problem ist, dass ichmit HTML vor 6 Jahren oder so angefangen hab und dann 5 JAhre nix gemacht hab.

CSS war damals nochnicht sooo wichtig. Aber jetzt will ichs natürlichrichtig lernen.

Vielen Dank an alle.
 

AlphaGen

Nicht mehr ganz neu hier

AW: Div zentrieren

Nächste Frage:

Wie bekomme ich ein div in Firefox 3.0 GANZ nach oben an den Browserrand? Margin funktioniert nur im IE.
 

AlphaGen

Nicht mehr ganz neu hier

Funktioniert. Ich bin heute nicht ganz helle und merke, wieviel (nicht mehr Lücken) Schluchten ich doch hab...

Hat jemand nen gutes Buch, was ich mir durchlesen kann. Ich glaube ich muss doch nochmal alles von Anfang an lernen. *heul*

Achja, falls ich euch auf die Nerven geh, einfach bescheid sagen. Dann hör ich auf *lacht*

So. und jetzt die letzte Frage für den heutigen Tag:

body
{
background:#A4A4A4 url(pics/verlauf.gif) repeat-x;
padding:0px;
margin:0px;
}


ul#Navigation
{
margin:0px;
padding:0px;
width:100%;
height:41px;
background:url(pics/navi.gif) repeat-x;
list-style:none;
text-align:center;
vertical-align: middle;
}


ul#Navigation li
{
vertical-align: middle;
list-style: none;
display: inline;
margin:0px;
padding:0px;
}


<body>
<ul id="Navigation">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>


Warum steht die Liste nicht in der Mitte des vorgegebenen Feldes ul? Möchte das gerne ganz zentriert haben. Horizontal und vertikal.
 
Zuletzt bearbeitet von einem Moderator:
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

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben