✔ Horizontale Navigationsleiste

Status
Nicht offen für weitere Antworten.
T

Transmitter

Erfahrenes Mitglied
Hi,

ich hätte gerne eine horizontale Navi, Breite insgesamt um die 910 Pixel.
Das würde ich gerne in 7 Punkte aufteilen und 6 weiße 1Pixel Linien (sh. Grafik).
Leider weiß ich nicht, wie ich das mit CSS machen soll, ohne für die 6 linken Punkte a:hover, a:link usw. zu definieren und für den Punkt rechts eine extra Klasse die sich nur in der weißen Linie unterscheidet.

Hat da jemand eine Idee für mich?

Danke schon mal.
Bye, Transmitter
 

Anhänge

  • 25369attachment.gif
    25369attachment.gif
    1,6 KB · Aufrufe: 397
Hi,

HTML: 
<div id="navi">
 <div class="section">1</div>
 <div class="section">2</div>
 <div class="section">3</div>
 <div class="section">4</div>
 <div class="section">5</div>
 <div class="section">6</div>
 <div class="section">7</div>
</div>

CSS: 
#navi{
width: 910px;
}
.section{
width: 129px;
background-color: green;
border-width: 0px 1px 0px 0px;
border-right-color: #FFFFFF;
border-style: solid;
float: left;
}

Ich weiss nicht, ob es klappt, habs einfach mal aus dem Kopf geschrieben.

Sind 910px nicht etwas zu viel?

Azi
 
Fast gut, aber genau da kam ich auch nicht weiter:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> CSS </title>
<style type="text/css">
<!--

#navi{
width: 910px;
}
.section{
width: 129px;
background-color: green;
border-width: 0px 1px 0px 0px;
border-right-color: #FFFFFF;
border-style: solid;
float: left;
} 

-->
</style>
</head>
<body bgcolor="#CCCCCC">
<div id="navi">
 <div class="section">1</div>
 <div class="section">2</div>
 <div class="section">3</div>
 <div class="section">4</div>
 <div class="section">5</div>
 <div class="section">6</div>
 <div class="section">7</div>
</div>
</body>
</html>

Rechts neben Punkt 7 ist jetzt noch eine weiße 1Px Linie :(

Naja .. 910 .. evtl. reduziere ich noch ein wenig, aber für unsere Zielgruppe sollte das eigentlich immer passen. :)
 
Dann packst du da noch ein Feld mit position: fixed hin und gut is :)
Ansonsten, ich habe bei meiner Webseite da einen Streifen daneben gepackt, mit einem margin von -1px.

Azi
 
Ich würde das schon einfach mit ner extra Klasse machen, warum denn nicht? Und die Navigation auch erstmal als eine <ul> aufbauen.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Transmitter</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
ul {
    list-style:none;
    margin:100px;
    width:910px;
    overflow:hidden;
}
li {
    float:left;
    width:130px;
}
a.menu:link, a.menu:visited {
    display:block;
    padding:0 0 0 9px;
    color:#fff;
    background:#3C0;
    font-weight:600;
    line-height:30px;
    text-decoration:none;
    border:1px solid #fff;
}
a.menu:hover, a.menu:active {
    background:#000;
}
.noborder {
    border:0;
}
</style>
</head>

<body>

    <ul>
        <li><a href="#" class="menu">Eins</a></li>
        <li><a href="#" class="menu">Zwei</a></li>
        <li><a href="#" class="menu">Drei</a></li>
        <li><a href="#" class="menu">Vier</a></li>
        <li><a href="#" class="menu">Fünf</a></li>
        <li><a href="#" class="menu">Sechs</a></li>
        <li><a href="#" class="menu noborder" >Sieben</a></li>
    </ul>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück