Listen - Abstände

[haiyyu]

Hi.
Ich habe mir grad mithilfe eines Tutorials eine Navigationsleiste (horizontal) gebastelt. Mein Code dafür sieht so aus:
Html:

            <div id="navcontainer" style="background-image:url(images/navi_1.png); width: 100%">
                <ul id="navlist">
                    <li id="button"><a href="#">Item one</a></li><li id="button"<a href="#">Item two</a></li>
                </ul>
            </div>

Css:

#navi
{
    text-decoration: none;
    font-family: Tahoma;
    font-size: 150%;
    width: 160px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    background-image: url(images/navi_1.png);
    display: block;
}
#navi:hover
{
    text-decoration: none;
    font-family: Tahoma;
    font-size: 150%;
    width: 160px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    background-image: url(images/navi_2.png);
    display: block;
}
#navlist li
{
    display: inline;
}
#button
{    
    padding: 0px;
    text-decoration: none;
    font-family: Tahoma;
    font-size: 150%;
    width: 160px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    background-image: url(images/navi_1.png);
}
#button:hover
{
    padding: 0px;
    text-decoration: none;
    font-family: Tahoma;
    font-size: 150%;
    width: 160px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    background-image: url(images/navi_2.png);
}

So, mein Problem ist, dass das Ganze jetzt so aussieht:

Meine Frage: Wie kann ich (per CSS) einen Abstand zwischen die zwei Menü Items bringen?
Danke schon mal,
-haiyyu

 

[Internetlegende]

#button {
padding-right: 5px;
}

So sollte es klappen.

 

[Bernhard]

Hi.
Ich habe mir grad mithilfe eines Tutorials eine Navigationsleiste (horizontal) gebastelt. Mein Code dafür sieht so aus:
Html:

            <div id="navcontainer" style="background-image:url(images/navi_1.png); width: 100%">
                <ul id="navlist">
                    <li id="button"><a href="#">Item one</a></li><li id="button"[B][COLOR=Red]>[/COLOR][/B]<a href="#">Item two</a></li>
                </ul>
            </div>

Css:

#navi
{
    text-decoration: none;
    font-family: Tahoma;
    font-size: 150%;
    width: 160px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    background-image: url(images/navi_1.png);
    display: block;
}
#navi:hover
{
    text-decoration: none;
    font-family: Tahoma;
    font-size: 150%;
    width: 160px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    background-image: url(images/navi_2.png);
    display: block;
}
#navlist li
{
    display: inline;
}
#button
{    
    padding: 0px;
    text-decoration: none;
    font-family: Tahoma;
    font-size: 150%;
    width: 160px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    background-image: url(images/navi_1.png);
}
#button:hover
{
    padding: 0px;
    text-decoration: none;
    font-family: Tahoma;
    font-size: 150%;
    width: 160px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    background-image: url(images/navi_2.png);
}

So, mein Problem ist, dass das Ganze jetzt so aussieht:

Meine Frage: Wie kann ich (per CSS) einen Abstand zwischen die zwei Menü Items bringen?
Danke schon mal,
-haiyyu

Hallo haiyyu,

erstmal fehlt eine Klammer (hab ich Dir in rot eingesetzt...).
Dann solltest Du mit IDs nur bei Elementen arbeiten, die nur einmal auf der seite vorkommen. Bei Elementen, die mehrfach vorkommen ist class korrekt:

<li class="button">

Für den Abstand probier mal:

#navlist li
{
    display: inline;
    margin:0 2em;
}

Den Abstandswert musst Du natürlich Deinen Wünschen anpassen...

Grüße
Bernhard

 

[haiyyu]

Danke, klappt. :)