Navi mittig über Link-Bildchen ausrichten

[Premker]

Hi Forum,

ich bin am Ende und brauche eure Hilfe.
Habe hier einen Header mit Navi-Bildchen und darüber eine Navileiste. Kriege die Linkleiste nicht genau mittig über die Bildchen. Die Bildchen sind mit dem Headerbild ein ganzes Bild. Die Linkleiste ist eine ul im eigenen div. Genau mittiges ausrichten ist das Ziel. Meine Lösung kann das nicht.
Kann mir jemand einen Tipp geben?

HTML:

<div id="wrapper">
    <div id="header">
        <div id="navi">
            <ul>
                <li><a href="index.html">Willkommen</a></li>
                <li><a href="hotel.html">Hotel</a></li>
                <li><a href="zimmer.html">Zimmer</a></li>
                <li><a href="urlaub.html">Urlaub</a></li>
                <li><a href="*********html">Anfahrt</a></li>
                <li><a href="buchen.html">Buchen</a></li>
            </ul>
            </div><!-- Ende Navi -->
    </div><!-- Ende Header -->

CSS:

#wrapper {
    width: 999px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    top: 12px;
    border: 1px solid #666;
}
 
#header {
    background-image: url(images/header.jpg);
    height: 239px;
    width: 999px;
    background-repeat: no-repeat;
}
 
#navi {
    font-family: Verdana, Geneva, sans-serif;
    margin-left: 86px;
    width: 800px;
    margin-top: 125px;
    position: absolute;
    color: #FFF;
}
 
#navi ul li a {
    font-size: 0.8em;
    list-style-type: none;
    font-weight: bolder;
    padding-left: 5px;
    margin-right: 26px;
    margin-left: 26px;
    padding-right: 5px;
    color: #FFF;
    text-decoration: none;
    }
 
li {
    display: inline;
}

 

[Paric]

AW: Navi mittig über Link-Bildchen ausrichten

Habe ich noch Schlafsand in den Augen?
Auf dem bild ist das doch alles hübsch und toll und so... Kann da kein Problem erkennen...
Oder ist das Bild das ergebnis das Du erreichen willst? Wenn ja wäre ein Link o.Ä. nicht schlecht um zu sehen wie es im moment aussieht...

Gruß,
Paric

 

[Premker]

AW: Navi mittig über Link-Bildchen ausrichten

Naja, da ist wohl noch etwas Sand in deinen Augen ;·)
Willkommen und Hotel sind mittig, die anderen hängen leicht nach links, sollen aber genau mittig drüber sein.
Premker

 

[pixelpur]

AW: Navi mittig über Link-Bildchen ausrichten

Hey,

also vom Ansatz her doch schon mal ganz OK würde es vielleicht etwas anders lösen aber versuche mal folgendes.
Setze bei deinen li Elementen über die CSS vorübergehend einen roten oder auch grünen Border und dann schaust du dir einmal die Abstände vom Text zum Rahmen an.
Am besten ist es, da die Bilder eh alle gleich groß sind, wenn du den li Elementen eine feste Breite gibst somit die Breite durch 6 für deine 6 Bilder, es sei denn es soll dynamisch werden.
Wenn die li Rahmen alle mit den Bildern abschließen setzt du einfach ein text-align-center; und solltest dann deine Texte zentriert stehen haben.

 

[Paric]

AW: Navi mittig über Link-Bildchen ausrichten

Jetzt wo du es sagst

Also ich würde es so machen....

Die bilder haben alle die gleiche breite, oder? Dann mach doch aus den Links ein Block-element mit der Breite des Bildes und text-align: center zentrierst du den Text des Links innerhalb des <a>-Tags...

Gruß,
Paric

 

[Premker]

AW: Navi mittig über Link-Bildchen ausrichten

Ja Jungs, das versuche ich mal. Muss jetzt aber erst mal ne Runde drehen.
Danke fürs erste für die frühen Antworten.

Grüße
Premker

 

[Premker]

AW: Navi mittig über Link-Bildchen ausrichten

Ja, da schaut her. Eure Tipps haben mir geholfen. Ich musste dann aber noch die Bilder genauer ausmitteln nach den Rahmen, die ich um die Links gezogen habe und jetzt ist es super. Wie ich haben wollte. Noch ein Dankeschön hinterher und unten könnt ihr sehen, was es gebracht hat.

Gruß Premker