✔ Block-Elemente nebeneinander anordnen

[p-flash]

Hi,

ich möchte eine Navigationsleiste erstellen:

<div id="navi">
    <a class="naviLink" href="online_calc.php">Kalkulator</a>
    <a class="naviLink" href="about_us.php">Über uns</a>
    <a class="naviLink" href="prices.php">Preise</a>
    <a class="naviLink" href="contact.php">Kontakt</a>
</div>

Der css-Code dazu:

a.naviLink, a.naviLink:link, a.naviLink:visited, a.naviLink:active
{
    display:  block;
    height: 20px;
    text-decoration: none;
    color: #000;    
    background-color: #FFF;
}

 a.naviLink:hover
{
    background-color: #F00;
    font-weight: bold;
}

Dadurch dass ich die Elemente durch Display:block zu Blockelementen gemacht habe, werden diese untereinander und nicht nebeneinander angeordnet. Wie könnte man das Problem lösen?

Schonmal Danke...

/edit
Habe daraus block-Elemente gemacht, weil ich später die genaue Breite angeben will.

p-flash

 

[Gumbo]

Darüber haben sich schon viele andere Gedanken gemacht – und sind auch zu Lösungen gekommen. So etwa css.maxdesign.com.au.

 

[Maik]

Block-Elemente oder wie in deinem Fall Elemente mit der "Block-Level-Charakeristika" lassen sich mit der float:left-Eigenschaft nebeneinander anordnen.

Da es hier letztlich um die CSS-Formatierung geht, wird der Thread auch in das passende Board verschoben.

 

[Gumbo]

Mit CSS 2.1 wäre auch display:inline-block möglich, allerdings ist das wohl aufgrund der fehlenden Unterstützung durch die Browser noch Zukunftsmusik. Leider.

 

[Maik]

Diese Formatierung wäre ebenfalls möglich - mit der float:left- und ohne display:block-Eigenschaft besitzt das Inline-Element dennoch "Block-Level-Charakteristika" und lässt so eine Breitenangabe zu

a.naviLink, a.naviLink:link, a.naviLink:visited, a.naviLink:active
{
    float: left;
    height: 20px;
    width: 150px;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #fff;
}

 a.naviLink:hover
{
    background-color: #F00;
    font-weight: bold;
}

 

[p-flash]

Danke für die Hilfe!

p-flash