Frage zu horizontaler Navigation

blizzart88 · 15.12.2010

Guten morgen zusammen,

ich habe mal eine Frage zu einer horizontalen Navigation:

kann man die Breite der einzelnen Navigationspunkt individuell auf die Breite der Links ändern. Bei meinem Beispiel sind die Navigationspunkte alle 120px breit. Einzelne Menüpunkte, bzw. die Menüpunkte hier brauchen eigentlich teilweise eine geringere Breite.

Kann ich diese einzeln angeben und wenn ja, wie?

Der CSS-Code

Code:

body{background-color:#004f2f}

/* LOGO-Container */

#top{position:relative;
     width:1000px; height:200px;
     margin: auto;
     bottom-margin: 0px;
     border: 1px solid blue;
     background-color:#545454;
     background-image:url('grafik/hor-navi-back.jpg');
     background-repeat:no-repeat;
     background-position: top left;
}

/* Navigation unterhalb des Logos */

#topnavi{position:relative;
         width:820px; height:20px;
     margin: 0px auto;
     border-top: none;
     border-bottom: none;
     border-left: 1px solid blue;
     border-right: 1px solid blue;
         background-color:white;
         background-image:url('grafik/hor-navi-back.jpg');
         background-repeat:repeat-x;
     background-position: top left;
         overflow:hidden;
}

/* Container für Seiteninhalt */

#inhalt-container{position:relative;
               width:820px; height:900px;
              margin: auto;
               border: 1px solid blue;
               background-color:#545454;
               background-image:url('grafik/hor-navi-back.jpg');
               background-repeat:no-repeat;
               background-position: top left;
               background-attachment:fixed;
}


/* Navigation oben durch Listen */

#navi1 li {float: left;} 

#navi1{margin: 0;
       padding: 0;
       list-style-type: none;
       background: #6f79dc;
       background-image: url(grafik/back001.jpg);
       width: 100%;
       overflow: auto
}

#navi1 a{font-family: Arial;
         font-size: 14px;
         font-weight: bold;
         text-decoration: none;
         width: 120px;
         height: 20px;
         display: block;
         color: #fff;
         background-image: url(grafik/back001.jpg);
         background-color: white;
         text-align: center;
         line-height: 20px;
         border-bottom: 1px solid #fff;
} 


#navi1 a:visited{color: #dfdfdf;
                 background-image: url(grafik/back001.jpg)
}

#navi1 a:hover{background-color: #000;
               background-image: url(grafik/back002.jpg)
} 

/* Bottom für Footer (Impressum, AGB, etc...) */

#bottom{position:relative;
        width:820px; height:120px;
    margin: 0px auto;
    margin-bottom: 20px
    border-top: none;
    border-bottom: 1px solid blue;
    border-left: 1px solid blue;
    border-right: 1px solid blue;
        background-color:white;
        background-image:url('grafik/hor-navi-back.jpg');
        background-repeat:repeat-x;
    background-position: top left;
        overflow:hidden;
}

Der Seitenquelltext:

Code:

<html>
<head>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css.css">

</head>
<body>

<div id="top"></div>
<div id="topnavi">
    
    <ul id="navi1">        
        <li><a href="#">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
    </ul> 


</div>
<div id="inhalt-container"></div>

<div id="bottom"></div>

</body>
</html>

Doitsu · 15.12.2010

AW: Frage zu horizontaler Navigation

Indem du jedem a-Tag von deiner Navi eine ID mitgibst, und in dieser bestimmst wie gross der sein soll. Zur Zeit gibst du ja nur durch '#navi1 a' die Breitenangaben mit ..
Allerdings sieht eine einheitliche Navigation i.d.R. besser aus - es sei denn du hast massig Punkte.

blizzart88 · 15.12.2010

AW: Frage zu horizontaler Navigation

Doitsu schrieb:
Indem du jedem a-Tag von deiner Navi eine ID mitgibst, und in dieser bestimmst wie gross der sein soll. Zur Zeit gibst du ja nur durch '#navi1 a' die Breitenangaben mit ..
Allerdings sieht eine einheitliche Navigation i.d.R. besser aus - es sei denn du hast massig Punkte.

Aber wie mache ich das? Ich habe es so versucht, aber das funktionierte nicht:

Code:

#navi1 a.120{font-family: Arial;
             font-size: 14px;
             font-weight: bold;
             text-decoration: none;
             width: 120px;
             height: 20px;
             display: block;
             color: #fff;
             background-image: url(grafik/back002.jpg);
             background-color: white;
             text-align: center;
             line-height: 20px;
             border-bottom: 1px solid #fff;
}

Code:

<div id="topnavi">
    
    <ul id="navi1">        
        <li><a href="#">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#" id="120">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
    </ul> 


</div>

MatthiasM2D · 15.12.2010

AW: Frage zu horizontaler Navigation

Hi,

wie schon von Doitsu geschrieben. Im ersten Schritt eine Klasse erstellen welche für die Links allgemeingültig ist. Hattest du ja bereits gemacht. Jedoch ohne die entsprechende width.

Code:

#navi1 a {font-family: Arial;
             font-size: 14px;
             font-weight: bold;
             text-decoration: none;
             height: 20px;
             display: block;
             color: #fff;
             background-image: url(grafik/back002.jpg);
             background-color: white;
             text-align: center;
             line-height: 20px;
             border-bottom: 1px solid #fff;
}

für jeden Menüpunkt wie beschrieben eine einzelne ID, welche nur die width beinhaltet vergeben. z.B.

Code:

#home {
width:120px;
}

und dann im Menü einfügen:

Code:

<div id="topnavi">
    
    <ul id="navi1">        
        <li><a href="#" id="home">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#" id="120">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
    </ul> 


</div>

Gruß

hedoo · 15.12.2010

AW: Frage zu horizontaler Navigation

Hallo,
du kannst natürlich auch jedem Link ein padding zuweisen,bsp a{padding: 10px 12px; display: block}, dann nimmt der Link immer den Platz ein, den er braucht.

Gruß
hedoo

Doitsu · 15.12.2010

AW: Frage zu horizontaler Navigation

blizzart88 schrieb:
Aber wie mache ich das? Ich habe es so versucht, aber das funktionierte nicht:

Code:

#navi1 a.120{ [..]}

Code:

<div id="topnavi"> <ul id="navi1"> <li><a href="#">Home</a></li> <li><a href="#">Link 1</a></li> <li><a href="#" id="120">Link 2</a></li> <li><a href="#">Link 2</a></li> </ul> </div>

Hm, du solltest dich mit den Grundlagen von CSS auseinander setzen - eine ID faengt mit einer Route (#) an, eine Klasse mit einem Punkt (.), ein Tag hat gar nichts davor. Sprich: du hast eine Klasse mit dem Namen '120' erstellt, wobei man Klassen/ID Namen nicht mit Zahlen beginnt und allgemein 'Sinnvolle' Namen geben sollte - stell dir vor du willst nun statt 120 Pixel 122 haben - Zack, alles wieder aendern.

blizzart88 · 15.12.2010

AW: Frage zu horizontaler Navigation

Doitsu schrieb:
Hm, du solltest dich mit den Grundlagen von CSS auseinander setzen - eine ID faengt mit einer Route (#) an, eine Klasse mit einem Punkt (.), ein Tag hat gar nichts davor. Sprich: du hast eine Klasse mit dem Namen '120' erstellt, wobei man Klassen/ID Namen nicht mit Zahlen beginnt und allgemein 'Sinnvolle' Namen geben sollte - stell dir vor du willst nun statt 120 Pixel 122 haben - Zack, alles wieder aendern.

Das war ja nur neispielhaft gemeint, Doitsu. Ich hatte nicht ganz verstanden, was du in deinem erstn Post meintest. Dank Matthias´ hab ich jetzt begriffen, wie es geht und es funktioniert auch einwandfrei.

Vielen Dank euch beiden!