Horizontales Menü mit Bildern

[mikeschmu]

Hallo Leute,

ich hoffe dass ich beim Stöbern dieses Forums nichts übersehen habe, denn ich bin mit meiner CSS-Kraft am Ende

Ich möchte für eine Website gerne ein Horizontales Menü mit einer gesamt Länge von 784px und einer Höhe von 31px basteln. Wäre auch fast fertig, wenn mir das verflixte Ding die "mouseover-grafik" auf den Punkt genau drüber legen würde, denn das tut sie nämlich nicht. Das zweite Bild ist immer leicht versetzt....

Hier mein Code aus der CSS für die NAV:
#mainnav {
background-image: url('../pics/m_normal.png');
background-repeat:repeat-x;
display: block;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 784px;
height: 31px;
font-family: Tahoma, verdana, arial;
font-size: 11px;
color: #ffff99;
float: right;

}

#mainnav a {
float: left;
width: 112px;
height: 31px;
margin: 0;
text-align: center;
text-decoration: none;
font-size: 11px;
font-family: Tahoma, verdana, arial;
font-weight: bold;
color: #fafafa;

}

#mainnav a:hover {
background-image: url('../pics/m_mouseover.png');
float: left;
height: 31px;
font-family: Tahoma, verdana, arial;
}

----

Was mache ich nur falsch????
Bitte helft einem armen Noob!?!?!


Vielen Dank schon mal!
Gute Nacht
LG MiKe

[Laus]

Hallo

Nimm doch mal die Höhenangabe in #mainnav a und #mainnav a.hover Raus wie klapts denn dann ?

Gruß Xaver

[mikeschmu]

Servus Xaver,

danke für deine Antwort!
Leider hat das nichts gebracht, jetzt ist die Hover-Grafik nur noch halb so groß und immer noch um ca. 1px nach rechts verschoben....

Ich versteh das nicht, es ist bestimmt einfach nur ein kleiner dummer Fehler!
blos woooooooooooooooooooooo

Gruß zurück

[Laus]

Ein Link zur Seite das man das Problem sehen kann wäre sehr hilfreich. Gerade wenn es um Grafiken geht ist der Quelltext alleine immer sehr wenig aussagekräftig.

[renernyc]

du hast beim HOVER zumindestens nicht die höhe angegeben wie davor...

[renernyc]

ich meine natürlich width

[mikeschmu]

Hi nochmal,

also ich habe die Breiten-Angabe auch bei Hover rein getan, bringt nichts.

Das Ding is leider lokal an meinem PC, da es in ein CMS (Joomla) integriert ist, da ist es leider umständlich die ganzen Joomla Anweisungen, in den DIVs raus zu nehmen.... das waren jetzt viele "ist"

Hier nochmal das ganze Sheet:
/*Neues CSS - File*/
* { margin: 0; padding: 0; }

body {
background-color:#000000;
background-image:url(../pics/bg.jpg);
background-position:right;
background-repeat:no-repeat;
font-family: Tahoma, verdana, arial;
}

#container
{
/*margin: 1em auto;*/
width: 918px;
height: 680px;
/*text-align: left;*/
/*background-color: red;*/
background-color:#333333;
background-image:url(../pics/main_bg.jpg);
background-position:bottom;
background-repeat:no-repeat;
/*border: 1px solid #fff;*/
}

#header
{
height: 126px;
width: 950px;
background-image: url(../pics/kopf.jpg);
background-repeat: no-repeat;
background-position: 0 0;
/*border-bottom: 1px solid #fff;*/
position: relative;
/*border: 1px solid #ffffff;*/
}

#mainmenu_left
{
clear:both;
background-image:url(../pics/m_wappen.png);
background-repeat:no-repeat;
background-color: #333333;
float:left;
width:134px;
height: 31px;
/*border: 1px solid #ffffff;*/
}


/* ----- Top Menu ----- */
#mainnav {
background-image: url('../pics/m_normal.png');
background-repeat:repeat-x;
display: block;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 784px;
height: 31px;
font-family: Tahoma, verdana, arial;
font-size: 11px;
color: #ffff99;
float: right;

}

#mainnav a {
float: left;
width: 112px;
height: 31px;
margin: 0;
text-align: center;
text-decoration: none;
font-size: 11px;
font-family: Tahoma, verdana, arial;
font-weight: bold;
color: #fafafa;

}

#mainnav a:hover {
background-image: url('../pics/m_mouseover.png');
float: left;
height: 31px;
width: 112px;
font-family: Tahoma, verdana, arial;


/*neues menue*/


#untermenu {
clear:both;
background-color:#333333;
background-image:url(../pics/gruss_wappen_unten.png);
background-repeat:no-repeat;
background-position:left;
text-align:center;
height:28px;
width:918px;

}

#content
{
margin-top:20px;
margin-left:20px;
margin-bottom: 20px;
width:700px;
height: 200px;
float:left;
background-color: aqua;
}

.textkasten {
width:100%;
background-color:#FFFFFF;
background-image: url(../pics/text_kasten_bg.png);
background-position:bottom;
background-repeat:repeat-x;
text-align:left;

}

#banner
{
margin-top:20px;
margin-right:14px;
width 120px;
float:right;
border:solid 1px #888;
}


#footer
{
background-image:url(../pics/foot.jpg);
font-size:0.7em;
color:#000;
padding-top:2px;
text-align:center ;
width:918px;
height:16px;
background-color: lime;
clear:both;

}

Kann es sein, dass irgend ein anderer Befehl das bewirkt?

Danke für euere Hilfe!
Gruß

[Laus]

Hab ich vorhin gar nicht bemerkt, nimm aus dem hover das float raus.

[mikeschmu]

habe ich gemacht, ändert nichts....

Weist was lustig ist, habe vorher die Index.php in index.htm umgeändert, die joomla-pfade entfernt und direkt in die index.htm in den div-tag mainnav ein paar Links eingefügt, uns siehe da... die Hoverbilder saßen am Platz!!??

Das verstehe ich nicht...
Gruß

[Laus]

Dann überschreibt dir irgend eine Instanz von Jomla die css vom Template.

[mikeschmu]

Hi Laus,

das Gefühl habe ich auch langsam... zefix...

Grüße