hoverproblem

[Flemli200]

Hi,
ich wollte die links auf meiner Website mit einem grauen hintergrund (#dedede) hinterlegen.
Offline funzt der Code auch... aber wenn ich ihn hochlade läuft er nich mehr!!
Könntet ihr mir helfen und mir sagen wo der Fehler in dem Code is??

a:hover
{
text-decoration: none;
color: black;
font-weight: bold;
background-color: #dedede;
width: 125px;
height: 19px;
}

 

[prm]

Dann poste doch mal einen Link zur hochgeladenen Seite.

 

[Flemli200]

Capoeira Neumünster

 

[Elroy]

Hallo.

Ich habe eben die Seite besucht.
Also bei mir funktioniert das. Sobald ich über den Link fahre wird der Hintergrund grau.

Gruss
Elroy

 

[Körnerbrötchen]

Naja, dann fahr mal von rechts in die Navigation rein, dann funktioniert das erst, wenn man über die Schrift fährt.

    <div id="punkte_1">
        ................................
    </div>
    <a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/index.html"]index.html[/URL]" id="Link_1"><b>Startseite</b></a>
    <div id="punkte_2">
        ................................
    </div>
    <a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/News.html"]News.html[/URL]" id="Link_2">News</a>
    <div id="punkte_3">
        ................................
    </div>
    <a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/Capoeira.html"]Capoeira.html[/URL]" id="Link_3">Capoeira</a>
    <div id="punkte_4">
        ................................
    </div>
    <a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/Training.html"]Training.html[/URL]" id="Link_4">Training</a>
    <div id="punkte_5">
        ................................
    </div>
    <a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/Forum/Forum.php"]Forum/Forum.php[/URL]" id="Link_5">Forum</a>
    <div id="punkte_6">
        ................................
    </div>
    <a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/Media.html"]Media.html[/URL]" id="Link_6">Media</a>
    <div id="punkte_7">
        ................................
    </div>

Ist vollkommen Unsinn. Daher rührt es auch, dass das nicht funktioniert. Ein Menü ist semantisch korrekt eine Liste. Also sowas hier:

<ul>
    <li><a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/index.html"]index.html[/URL]">Startseite</a></li>
    <li><a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/News.html"]News.html[/URL]">News</a></li>
    <li><a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/Capoeira.html"]Capoeira.html[/URL]">Capoeira</a></li>
    <li><a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/Training.html"]Training.html[/URL]">Training</a></li>
    <li><a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/Forum/Forum.php"]Forum/Forum.php[/URL]">Forum</a></li>
    <li><a href="[URL="http://www.html.de/view-source:http://capoeira-nms.lima-city.de/Media.html"]Media.html[/URL]">Media</a></li>
</ul

b-tags sind übrigens out. Das definiert man über ne id oder ne class. Oder über strong oder em. IDs und classes schreibt man des weiteren klein. So, jetzt da das Grundgerüst steht, fehlt nur noch der CSS-Teil:

ul {
  float:left; //Liste nach links
}
li {
  width:200px; //Breite der einzelnen Listenpunkte
}
li a {
  display:block; //Link auf ganze Breite und Höhe des Listenpunkts
  border-bottom:3px dotted #000; //untere Linie des Links definiert
}
li a:hover {
  background:#dedede;
  color:#000; //da background definiert, color-Angabe erforderlich
}

Hoffe ich habe mich jetzt nirgendwo vertan, der Code ist ungetestet. Wenn was nicht klappt, einfach melden. Die Pixel-Angabe im li-tag ist nicht unbedingt sehr geschickt, doch für ne schnelle Lösung und bei deinem Layout praktikabel.

Grüße

 

[Flemli200]

Ich möchte aber keine punkte vor den links haben... könnte man das li auch durch z.B. #navbar ersetzen und das nachher in den id tag der Links schreiben und ul mit #navbar_main und das in einen übergeordneten tag schreiben??

Wie rücke ich die einzelnen unterlinks ein??

 

[Körnerbrötchen]

Nein, kann man nicht. Eine Liste bleibt natürliche eine Liste. Da etwas im HTML-Code zu ändern ist unnötig und wäre auch falsch. Semantik => HTML, Design => CSS. Beides ist (fast) untrennbar verbunden, aber sollte nicht durchmischt werden.
Die Punkte bekommst du mit list-style-type:none weg und Einrückungen gehen mit padding bzw. margin.

Grüße

 

[Flemli200]

Ich hab nochmal eine Frage...
wie schaffe ich es jetzt, das der ganze block wirklich nach links ausrichte heißt left: 0px; ??
auf den Befehl reagiert er nicht und auch wenn ich das mit padding versuche gehts nich!!

könntest du mir nochmal helfen??

 

[threadi]

Nimm margin-left.

 

[Körnerbrötchen]

Wahrscheinlich bringen ein paar margin und padding-Angaben deine Navigation von links weg. Entweder du entfernst diese oder du versuchst es mal mit margin-left und als Wert eine negative Zahl.