horizontales Menü - Probleme mit Ausrichtung und Umbruch

McKinley

Moin Gemeinde,

ich möchte was eigentlich ganz einfaches machen. Eine Menüleiste(ja, mal wieder das Thema ^^), in der nebeneinander mehrere Menüpunkte zur Auswahl stehen (die ich als Bild hinterlege) und das gesammte "Teil" soll zentriert werden und mit einem Hover-Effekt versehen werden, wobei in dem Fall ein anderes Bild geladen wird für den entsprechenden Menüpunkt.
Ich möchte allerdings komplett auf JavaScript verzichten beim Hover!

Bisher hab ich folgendes:

CSS-Datei:

#menu	{ margin:10px;
		  padding:0;
		  height:100px;
		  border="0";
		  text-align:center;
		}
#startseite	{ display:block;
		  width:120px;
		  height:50px;
		  background: url(../images/startseite.png);
		}
#startseite:hover 
		{ background: url(../images/startseite_hover.png);
		}

In der PHP-Datei steckt das ganze in einem div:

<div id="menu">

<a id="startseite" href="index.php">
</a>
<a id="startseite" href="index.php">
</a>

</div>

Das Problem ist, das die beiden Links zum einen untereinander angezeigt werden und das beim FireFox 11, Opera 11 und Chrome 18 die Bilder auch noch links am Rand angezeigt werden. Beim IE 9 werden die Bilder zentriert, allerdings eben auch untereinander.
Der Hovereffekt funktioniert soweit wunderbar.

Eigentlich irgendwie nix dramatisches, aber irgendwie häng ich grad und mein Kopf raucht schon und das google-Logo kann ich auch schon nicht mehr sehen. ^^

Vermutlich hab ich irgendwo noch ne Wissenslücke. Helft mir doch bitte auf die Sprünge, wenn ihr noch eine Idee habt.

Danke vorab für eure Mühe!

1. display:block weist den Browser explizit an, die Elemente nicht inline sondern eben als Block anzuzeigen. Natürlich stehen sie dann untereinander.

2. IDs heißen so, weil sie eindeutig sein sollen. Du willst in deinem Menü offensichtlich Klassen verwenden!

3. Wenn die Hintergrundbilder zentriert angezeigt werden sollen, dann sollte du das dem Browser auch sagen. Er kann ja keine Gedanken lesen:

background: url('../images/startseite_hover.png') 50% 0% no-repeat;

McKinley

Moin und danke für deine Antwort.

Ich hatte es anfangs auch als Klasse angelegt:

a.startseite	{ display:inline;
		  width:120px;
		  height:50px;
		  background: url(../images/startseite.png);
		}
a.startseite:hover 
		{ background: url(../images/startseite_hover.png) 50% 0% no-repeat;
		}

mit:

<a class="startseite" href="index.php">
</a>
<a class="startseite" href="index.php">
</a>

Dann zeigt es der IE auch komplett richtig an. Allerdings zeigt der FF, Opera und Chrome dann gar nichts mehr und die Links sind komplett verschwunden. Das hatte mich da irgendwie total irritiert, weil ich das nun gar nicht zuordnen kann, warum dann gar nichts angezeigt wird.

Und bei meinem ursprünglichen Code bzw. jetzt immer noch, stecken die Links ja in einem <div>, welches text-align:center hat. Deshalb dachte ich, das dann eben die Links auch mit zentriert werden. ...da muss der Browser also keine Gedanken lesen. ^^

text-align bezieht sich nur auf inline-Elemente. In dem Moment, wo du deinem Link ein display:block zuweist, musst du mit margin un float arbeiten. Das ist bei vielen Objekten nebeneinander aber schnell ein ziemlicher Krampf.

McKinley

árn[y]ék schrieb:

text-align bezieht sich nur auf inline-Elemente. In dem Moment, wo du deinem Link ein display:block zuweist, musst du mit margin un float arbeiten. Das ist bei vielen Objekten nebeneinander aber schnell ein ziemlicher Krampf.

Wie du in meinem zweiten Post sehen kannst, habe ich auf display:inline umgestellt.

Daher sind die Links ja auch "verschwunden"