Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Frage zu horizontaler Navigation“

B

blizzart88

Guest

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

Aktives Mitglied

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.
 
B

blizzart88

Guest

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.

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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

Aktives Mitglied

AW: Frage zu horizontaler Navigation

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.
 
B

blizzart88

Guest

AW: Frage zu horizontaler Navigation

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!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben