Probleme mit :hover

[the knowless]

hi @ all

ich programmiere grade ne Website und wollte, dass die Links im Topmenu, wenn man darüber fährt, ne andere Hintergrundfarbe haben.

Der Code index.php:

<div id="head_menu">
            <a href="#">
                <div class="hm_link hm_link_start">
                    1. Seite
                </div>
            </a>

            <a href="#">
                <div class="hm_link">
                    2. Seite
                </div>
            </a>

            <a href="#">
                 <div class="hm_link">
                    3. Seite
                </div>
            </a>

            <a href="#">
                <div class="hm_link">
                    4. Seite
                </div>
            </a>

            <a href="#">
                <div class="hm_link">
                    5. Seite
                </div>
            </a>
</div>

So die Css sieht an der entsprechenden Stelle so aus:

.hm_link
{
    float:left;
    margin-right:50px;
    text-align:center;
    height:30px;
}

.hm_link:hover
{
    background:black;
}

Bei der anderen Seite habe ich das GENAU so gemacht und es hat funktioniert, bzw. funktioniert immernoch im IE und FF.

Was über seh ich ;ugl

 

[prm]

Im IE7 wird bei mir die Hintergrundfarbe beim Hovern schwarz.

Allerdings macht man so keine Menüs. Die Divs sind vollkommen überflüssig.
Die Linkzustände kann man per Klasse definieren, falls auf einer Seite unterschiedliche Links benötigt werden. Ansonsten definiert man sie direkt unter Bezug auf Ihren ID.
Schließlich bietet sich für eine Navi eine <ul>-Liste an.

Sieh dir hierzu einmal diese Beispiele an:
Links unterschiedlich gestalten
Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

 

[_Thor_]

Im css spricht man die Hintergrundfarbe mit

background-color: black;

an.

 

[Loon3y]

Und wenn du statt "black" "#000000" verwendest ist es auch besser. ^^ bzw einheitlicher...man schreibt ja dann nicht wenn man himmelblau will "himmelblau" hin sondern den farbcode.

 

[Mo3b]

prm hat völlig recht. So macht man normalerweise keine Navigationsleiste ;)

Hier noch ein Link:

SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten

Wenn man das einmal verstanden hat, macht man das immer so.

Mfg Mo3b

 

[prm]

An der Bezeichnung "background: black;" liegt es definitiv nicht. Das ist in dieser abgekürzten Fassung zulässig.

 

[threadi]

Und ein Blockelement (<div>) innerhalb eines Inlineelements (<a>) ist auch sehr ungünstig.

 

[Loon3y]

An der Bezeichnung "background: black;" liegt es definitiv nicht. Das ist in dieser abgekürzten Fassung zulässig.

Habe ja nicht gesagt das es daran liegt, nur das es vllt besser ist einheitlichen Code zu benutzen und nicht einmal Farben ausschreiben, einmal Farbcodes


Edit: 222 Posts, ich geb ne Runde aus %)

 

[the knowless]

okok hab jetzt ne Liste gemacht.

Die divs innerhalb des a-Tags mache ich weil der Link größer sein soll als nur die Schrift. D.h schon beim überfahren des divs (was größer ist als die Schrift) soll der Link klickbar sein.

Fehler rührte übrigens davon das ich in meiner Schwachsinnigkeit irgenwo in meiner CSS noch ne andere a:hover definition hatte, was sich dan überschrieben hat.

 

[prm]

Dazu brauchst du keine divs.
Du musst ledigleich "a" die Eigenschaft "display: block;" zuweisen und ggf.einen width-/height-Wert geben.

 

[threadi]

Würde ich ohne feste Höhe und Breite machen. Was passiert denn bei längeren Menüpunkten? Die werden schlimmstenfalls zwar umgebrochen, der Text fließt aber aus der "Box" heraus. Besser sind meist padding-Werte.