Menü mit focus Bold

[Paulles]

Hallo Ihr Lieben,

ich habe folgendes Problem:

Ich habe ein horizontales Menü, welches farblich hovert und im aktiven Zustand auf jeweiliger Unterseite in Bold dargestellt werden soll.
(Ich habe den einzelnen Menü-divs feste breiten gegeben, damit nichts springt wenn es den focus geht.) Wie kann ich der einzelnen Seite sagen: Menüpunkt bitte in bold dasrstellen?

Html:

<div id="navmenu">
                    <ul>
                        <li id="home"><a href="./index.html">Home</a></li>
                        <li id="lights"><a href="./lights.html">Leuchtstoffröhren</a></li>
                        <li id="cleaner"><a href="./cleaner.html">Reinigungsmittel</a></li>
                        <li id="services"><a href="./services.html">Services</a></li>
                        <li id="contact"><a href="./contact.html">Kontakt</a></li>
                    </ul>
                </div>

CSS:

#navmenu{
    width: 520px;
    height: 30px;
    margin-top:35px;
    margin-right:23px;
        float:right;
    display: inline;
}

#navmenu ul{
    width: 520px;
    height: 30px;
    display: inline-block;
    text-decoration: none;
    padding: 10px;
    list-style: none;
}

#navmenu ul li{
    font-size: 14px;
    font-family: 'Droid Sans', sans-serif;
    color:#325573;
    text-decoration: none;
    display: inline-block;

}

#navmenu ul li a{
    color:#325573;
    font-family: 'Droid Sans', sans-serif;
    font-weight: 400;
}

#navmenu ul li a:focus{
    color:#35798a;
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
}
#navmenu ul li a:hover{
    color:#35798a;
    font-family: 'Droid Sans', sans-serif;
    font-weight: 400;
}

Vielen Dank schonmal!

 

[djheke]

So zum Beispiel:

 <ul>
 <li><strong>Home</strong></li>

 <li><a href="deineseite.htm">Nächste Seite</a></li>
....
</ul>

 

[Cheffchen]

Hallo,

in dem der aktiven Seite eine zusätliche classe gibst und die dann Formatierst wie möchtest, fang jetzt bloss nicht mit html tags an, hast eine so schon ul li liste als menü.
Wie kommst zum focus, sag jetzt bitte nicht frameset, dann machst mich traurig und soll das fpr die 1ms sein bis die seite neu lädt :O).

<div id="navmenu">
                    <ul>
                        <li id="home"><a href="./index.html">Home</a></li>
                        <li id="lights" class="aktiv"><a href="./lights.html">Leuchtstoffröhren</a></li>
<!-- oder so, je nach dem was leichter ändern kannst -->
                        <li id="cleaner"><a class="aktiv" href="./cleaner.html">Reinigungsmittel</a></li>
                        <li id="services"><a href="./services.html">Services</a></li>
                        <li id="contact"><a href="./contact.html">Kontakt</a></li>
                    </ul>
</div>

Cheffchen

 

[Paulles]

@ Cheffchen: Probiere nun diese Variante:

<div id="navmenu">
<ul>
<li id="home" class="active"><a href="./index.html">Home</a></li>
<li id="lights"><a href="./lights.html">Leuchtstoffröhren</a></li>
<li id="cleaner"><a href="./cleaner.html">Reinigungsmittel</a></li>
<li id="services"><a href="./services.html">Services</a></li>
<li id="contact"><a href="./contact.html">Kontakt</a></li>
</ul>
</div>


Sieht das Css dann so aus?


#navmenu ul li .active{
font-size: 14px;
font-family: 'Droid Sans', sans-serif;
color:#325573;
text-decoration: none;
display: inline-block;
font-weight: 700;
}

Danke schonmal für eure Tipps.

 

[Cheffchen]

Hallo,

eher so ist aber ungetestet, habe das auch mal gleich etwas aufgeräumt da viele sachen doppelt waren.
zb: Schriftart, größe musst nicht 10 mal sagen, einmal reicht. macht spätere änderungen einfacher.
in #navmenu ul li a sagst wie Menü normal aussieht und bei den Folgenden sagst dann nur noch was sich ändern soll zum normlen als bei hover oder aktiv.

#navmenu{
    width: 520px;
    height: 30px;
    margin-top:35px;
    margin-right:23px;
        float:right;
    display: inline;
}

#navmenu ul{
    width: 520px;
    height: 30px;
    display: inline-block;
    padding: 10px;
    list-style: none;
}

#navmenu ul li{
    display: inline-block;
}

#navmenu ul li a{
    font-size: 14px;
    font-family: 'Droid Sans', sans-serif;
    color:#325573;
    text-decoration: none;
    font-weight: 400;
}

#navmenu ul li a:focus{
    color:#35798a;
    font-weight: 700;
}
#navmenu ul li a:hover{
    color:#35798a;
}

#navmenu ul li.active a{
    font-weight: 700;
}

Cheffchen

 

[djheke]

Ein Link sollte nie auf sich selber zeigen. Daher ist die Ersetzung durch <strong> die bessere Lösung.

Es geht aber auch mit Klassen oder Folgeselektoren.

So kannst du dein Style erweitern.

#hom #home a ,
#light #lights a ,
#cleane #cleaner a ,
#servic #services a ,
#contac #contact a

 {
 font-weight:bold;
}

Wobei der erste ID Selektor im jeweiligen <body> der aktuellen Seite eingetragen wird.

<body id="hom">      // für Startseite
<body id="light">      // für Lampen
u.s.w.

Beispiel:
Testpage

@Übrigens, lässt sich diese Navi mit ,Folgeselektoren, auch bequemer includieren. Was mit Klassen nicht der Fall ist.

 

[Paulles]

Danke an euch beide!!!

Hat nach dem Beispiel von cheffchen alles geklappt!

Beste Grüße

Paulles