✔ DIV Menü größe

[h4dhunTer]

Hallo!,
ich habe ein Problem mit meinem CSS Menü.

style.css

#headermenue {
    width: 695px;
    padding: 0 0 0 0;
    margin: 0 auto;
}
#headermenue ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#headermenue li {
    display: inline;
    margin: 0px;
    padding: 0px;
}
#headermenue li a, #headermenue li a:link {
    text-decoration: none;
    padding: 0 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333333;
    font-weight: bold;
}
#headermenue li a:visited {
    color: #333333;
}
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
    background-color: #333333;
    color: #ffffff;
}

Das Menü soll ein Hintergrundbild haben, was 38px groß ist. Ich habe das Bild da schon reinbekommen, doch leider ist dies nur so groß, wie auch der Link groß ist.

Vielen Dank für eure Hilfe!

 

[Maik]

Hi,

in welchem Element wird denn das Hintergrundbild eingebunden? Im CSS-Code findet sich nämlich diesbezüglich keine Angabe.

 

[h4dhunTer]

Hallo,

sry! Habe die alte CSS Datei geschrieben. Hier die richtige Datei:

#headermenue {
    width: 695px;
    padding: 0 0 0 0;
    margin: 0 auto;
}
#headermenue ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#headermenue li {
    display: inline;
    margin: 0px;
    padding: 0px;
}
#headermenue li a, #headermenue li a:link {
    text-decoration: none;
    padding: 0 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333333;
    font-weight: bold;
}
#headermenue li a:visited {
    color: #333333;
}
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
    background: url(images/menu_hintergrund.png);
    color: #ffffff;
}

 

[Maik]

Okay, und das Hintergrundbild ist nun 38px breit oder hoch?

 

[h4dhunTer]

Hallo,

das ist die Höhe!

 

[Maik]

Okay

Das Inline-Element a muß "Block-Level-Charakteristika" erhalten, um eine Breiten- und/oder Höhenangaben zu interpretieren und darzustellen.

Dies erzielst du mit display:block oder einer float-Deklaration.

Da die Links horizontal ausgerichtet werden sollen, setzen wir also float:left ein, und bestimmen die gewünschte Höhe, die in diesem Fall der Bildhöhe entspricht:

#headermenue li a:link, #headermenue li a:visited {
    text-decoration: none;
    padding: 0 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333333;
    font-weight: bold;
    float: left;
}
 
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
    background: url(images/menu_hintergrund.png);
    color: #ffffff;
    height: 38px;
}

Möglicherweise musst du die Höhenangabe auch im Selektor #headermenue li a:link, #headermenue li a:visited angeben, damit die nachfolgenden / darunterliegenden Elemente beim "Hovern" nicht nach unten verschoben werden:

#headermenue li a:link, #headermenue li a:visited {
    text-decoration: none;
    padding: 0 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333333;
    font-weight: bold;
    float: left;
    height: 38px;
}
 
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
    background: url(images/menu_hintergrund.png);
    color: #ffffff;
}

 

[h4dhunTer]

Hallo,

dankeschön! Das klappt wunderbar. Nun möchte ich, dass aber der Text bzw. der Link in der mitte ist. Wie geht das?

 

[Maik]

Horizontal: text-align:center

Vertikal: line-height:38px anstelle von height:38px

 

[h4dhunTer]

Hallo,
hat alles geklappt! Vielen vielen Dank!