Navigation Hintergrund

Hallo zusammen,

ich komme direkt mal zu meiner ersten Frage.
Ich habe meiner Navigation einen Hintergrund gegeben, die Höhe des Backgrounds beträgt 48px.

Das einzige Problem was ich momentan habe, die einzelnen "Reiter" zentrieren sich nicht vertikal.

Mit padding-top und padding-bottom, habe ich es irgendwie nicht geschafft.

<div id="navigation">
	<li><a href="index.html">Home</a></li>
	<li><a href="referenzen.html">Referenzen</a></li>
	<li><a href="service.html">Service</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
</div>

#navigation {
	text-align: center;
	background-image: url(images/naviback.gif);
	height: 48px;
	background-repeat: repeat-x;
}




#navigation li {
	width: 140px;
	letter-spacing: 4px;
	list-style: none;
	display: inline;
}

Mit freundlichen Grüßen

John

Zitat von MrMurphy

Hallo,

mit deinem Quellcodeschnipseln ist bei mir alles ok.

Gruss

MrMurphy

Alles anzeigen

Ja genau, dass weiß ich, aber wird das Menu bei dir auch der "background" Grafik entsprechend vertiakl zentriert? Und nicht nur horizontal.

Zitat von wolf

Blöde frage aber brauchst du wirklich ein Bild als Hintergrund?

Ja gehört einfach zum Design dazu.
Mit padding top und bottom kann man nicht arbeiten, oder gibt es irgendeinen Trick?

Gruß John

Zitat von wolf

Das gehört einfach zum Design dazu
Ne ehrlich, du machst es dir evtl leichter wenn du das mit CSS umsetzt.. erzähl halt wie der hintergrund aussieht..

bit background-position kannst du das bild auch noch verschieben..

Hier hab ich mal ein Bild:

[Blockierte Grafik: http://fs2.directupload.net/images/150629/temp/hooyvtxf.png]

Die rote Linie wäre eigentlich der Punkt, wo ich die Navigation gerne hätte. Verstehst du jetzt ungefähr was ich meine?

Zitat von JR Cologne

CSS

#navigation {
	text-align: center;
	background-color: black; /* in deinem Fall käme dann dort das Hintergrundbild hin */
	height: 48px;
	/* background-repeat: repeat-x;   // das kannst du bei der Nutzung deines Hintergrundbildes dann wieder auskommentieren */
	line-height: 48px; /* das sorgt für die vertikale Zentrierung, also nicht vergessen :D */
}




#navigation li {
	width: 140px;
	letter-spacing: 4px;
	list-style: none;
	display: inline;
}

Alles anzeigen

Das wäre die Lösung, wenn ich es richtig verstanden habe, dass du die Schrift vertikal zentrieren möchtest...

Genau das meinte ich, wirklich super. Vielen vielen Dank.
Endlich mal ein Forum, in dem einem wirklich geholfen wird.

Gruß John