Linktexte werden nicht angezeigt

[Krobbus]

Hi,
hab mir heute ein template gekauft, leider werden die Texte zB auf den Links oben im Menü nicht angezeigt, kann mir einer erklären warum?

Ich könnte natürlich auch einfach die Bilder mit nem Bildbearbeitungsprogramm beschriften, aber da die Links später dynamisch sein sollen geht das nicht.


Hier ist der Quellcode von der homepage.html an der betreffenden Stelle:

<div id="menu">
                <ul>
                    <li><a href="#" id="menu1" accesskey="1" title=""><b>Home</b></a></li>
                    <li><a href="#" id="menu2" accesskey="2" title=""><b>Our Products</b></a></li>
                    <li><a href="#" id="menu3" accesskey="3" title=""><b>Our Services</b></a></li>
                    <li><a href="#" id="menu4" accesskey="4" title=""><b>Careers</b></a></li>
                    <li><a href="#" id="menu5" accesskey="5" title=""><b>Support</b></a></li>
                    <li><a href="#" id="menu6" accesskey="6" title=""><b>About Us</b></a></li>
                    <li><a href="#" id="menu7" accesskey="7" title=""><b>Contact Us</b></a></li>
                </ul>
            </div>

Und hier die css datei:

/** MENU */

#menu {
    float: left;
    width: 118px;
    height: 216px;
    background: url(images/homepage11.jpg) no-repeat left bottom;
}

#menu ul {
    margin: 0px;
    padding: 40px 0px 0px 0px;
    list-style: none;
    background: url(images/homepage03.jpg) no-repeat left top;
}

#menu li {
    display: inline;
}

#menu a {
    display: block;
    width: 118px;
    height: 20px;
}

#menu b {
    display: none;
}

#menu1 { background: url(images/homepage04.jpg) no-repeat left top; }
#menu2 { background: url(images/homepage05.jpg) no-repeat left top; }
#menu3 { background: url(images/homepage06.jpg) no-repeat left top; }
#menu4 { background: url(images/homepage07.jpg) no-repeat left top; }
#menu5 { background: url(images/homepage08.jpg) no-repeat left top; }
#menu6 { background: url(images/homepage09.jpg) no-repeat left top; }
#menu7 { background: url(images/homepage10.jpg) no-repeat left top; }

Falls noch was fehlt sagt es mir einfach dann poste ich es hier. :)

 

[Synoxis]

Liegt an deinem:

#menu b {
    display: none;
}

 

[devilseye]

Liegt an deinem:

#menu b {
    display: none;
}

richtig. und ausserdem würde ich <b> nicht im html verwenden sondern im Css entsprechend erweitern:

#menu li {font-weight:bold;}

 

[neuroleptika]

Das Template ist für eine grafische Navigation ausgelegt. Der Inhalt zwischen <b></b> soll den Text für Suchmaschinen lesbar machen. Der Sichtbare Text soll jeweils in den Grafiken für #menu1 bis #menu7 aufgenommen werden.

 

[Krobbus]

Danke für eure Tipps, habt mir sehr geholfen! Ich werde die 7 Links oben in der Mitte jetzt als Text machen, und die anderen Buttons werde ich dann einfach per Grafikprogramm beschriften.
Nur eine Kleinigkeit noch: Die Schrift auf den Links ist minimal zu hoch (vielleicht 2 px), normalerweise verschiebt man die doch mit padding-top oder margin-top, leider wird dadurch gar nichts verändert!?

 

[Synoxis]

Der Inhalt zwischen <b></b> soll den Text für Suchmaschinen lesbar machen.

Da würde ich aber eher <span>...</span> nutzen anstatt einem Element das den Text normalerweise auszeichnet.

 

[neuroleptika]

Nur eine Kleinigkeit noch: Die Schrift auf den Links (siehe http://www.wettenwir.de/homepage.html) ist minimal zu hoch (vielleicht 2 px), normalerweise verschiebt man die doch mit padding-top oder margin-top, leider wird dadurch gar nichts verändert!?

Die Links haben ein feste Höhe in px. Solange der Besucher die Schriftgröße nicht verändert und der Text einzeilig bleibt, hilft line-height: 20px; für #menu a. Eigentlich sind feste Höhen für Text nicht geeignet. (Deshalb hat der Autor vermutlich auch Grafiken vorgesehen.)