Navigationspunkte zentrieren

Billbos

Hallo,

ich bin zur Zeit am erstellen folgender Page!
http://danielsfotos.com

Hier soll eine horizontale Navigation sein, welche einen festen Hintergrund hat, ohne einzelne Buttons. Ich wollte mal fragen, ob es eine Möglichkeit gibt, die Navigationspunkte jeweils in deren übergeordnetes <li> - Element zu zentrieren, damit ich nicht mit padding herumspielen muss.

MfG

Code

/* NAVIGATION TOP */


div#navigation {
    width: 600px;
    height: 50px;
    margin: 0;
    background: url(../images/navigation_background.png) no-repeat;
    font: "Myriad Pro", Arial, sans-serif;
    font-size: 25px;
    }

div#navigation ul {
    list-style-type: none;
    }

div#navigation li {
    float: left;
    clear: left;
    position: relative;
    line-height: 50px;
    }


div#navigation a {
    width: 100px;
    display: block;
    background: transparent;
    text-decoration: none;
    color: white;
    }    


div#navigation a:hover {
    background: transparent;
    color: #CCC;
    text-decoration: none;
    }

Alles anzeigen

threadi

Siehe: http://www.thestyleworks.de/tut-art/centerblock.shtml

Billbos

Danke schonmal! Habe mir das soweit jetzt durchgelesen und versucht etwas zu verändern, aber wirklich getan hat sich nichts?!?!?
http://danielsfotos.com

Code

div#navigation {
    width: 600px;
    height: 50px;
    margin: 0;
    background: url(../images/navigation_background.png) no-repeat;
    font: "Myriad Pro", Arial, sans-serif;
    font-size: 25px;
    }

div#navigation ul {
    list-style-type: none;
    }

div#navigation li {
    float: left;
    position: relative;
    line-height: 50px;
    text-align: left;
    }


div#navigation a {
    width: 100px;
    display: block;
    background: transparent;
    text-decoration: none;
    color: white;
    top: 50%;
    left: 50%;
    }    


div#navigation a:hover {
    background: transparent;
    color: #CCC;
    text-decoration: none;
    top: 50%;
    left: 50%;
    }

Alles anzeigen

Tobse

Ich muss ja dein CSS nicht verstanden haben. GIb den Lis mal ne feste breite, sodass jeder Text an seine Trennlinie angrezt, also so:

Code

|Logo   |About   |Pics    |...

Was dann noch fehlt sollte relativ einfach sein. Die a-tags brauchen keine Definition bezüglich der Positionierung.

Billbos

Habe ich getan, tun tut sich trotzdem nichts!

Code

div#navigation {
    width: 600px;
    height: 50px;
    margin: 0;
    background: url(../images/navigation_background.png) no-repeat;
    font: "Myriad Pro", Arial, sans-serif;
    font-size: 25px;
    }

div#navigation ul {
    list-style-type: none;
    }

div#navigation li {
    float: left;
    line-height: 50px;
    text-align: left;
    width: 100px;
    padding: 0;
    margin: 0;
    }


div#navigation a {
    width: 100px;
    display: block;
    background: transparent;
    text-decoration: none;
    color: white;
    }    


div#navigation a:hover {
    background: transparent;
    color: #CCC;
    text-decoration: none;
    }

Alles anzeigen

Tobse

versucgh mal das

Code

#navigation ul {
    list-style-type: none;
}
#navigation ul li {
    display: block;
    float: left;
    width: 100px;
    height: 300px; /* Oder welche höhe auch immer */
    text-align: center;
}
#navigation ul li a {
    line-height: 30px; /* Oder welche höhe auch immer */
    text-decoration: none;
}
#navigation ul li a:hover {
    text-decoration: underline;
}

Alles anzeigen

Billbos

Die Höhe hatte ich schon in der div#navigation angegeben!
Es sind 50px.
Danke, für deine Hilfe, das Problem war folgendes:

Code

* html
margin: 0;
padding;

threadi

Das sollte nicht das Problem, sondern eher die Lösung sein

Tags