Menü mein Konto anpassen?

[user0815]

Hallo,
ich scheine wohl gerade sehr doof zu sein. Ich versuche die drei Buttons in der oberen Reihe bei mein Konto anzupasssen. Es will mir aber nicht gelingen. Zunächst hätte ich gern das, das Hover-Bild auch komplett angezeigt wird und nicht rechts abgeschnitten und was noch wichtiger ist wieso wird der Hover auf dem letzten Button Mein Konto überhaupt nicht angezeigt? Sehen könnt ihr das ganze in meinem Shop: http://www.pixelsophie.de/shop

meine geänderte css sieht so aus:

Code: Alles auswählen

/* *********************** Aufbau Mein Konto *********************** */

div.meinKonto {
        position:                        absolute;
        left:                                530px;
        top:                                0px;
        width:                                450px;
        margin:                                0;
        padding:                        0;
        z-index:                        10;
        height:                                30px;
}

div.meinKonto h2 {
        color:                                #3D3D3D;
        margin:                                0;
        font-weight:                normal;
        font-size:                        14px;
        float:                                right;
        background-image:         url(../images/top_menue_back-a.png);
        background-repeat:         no-repeat;
        width:                                130px;
        height:                                30px;
        text-align:                        center;
        line-height:                25px;
}

div.meinKonto h2 a {
        color:                                #3D3D3D;
}
div.meinKonto h2 a:hover {
        color:                                #3D3D3D;
        float:                                right;
        background-image:         url(../images/top_menue_back.png);
        background-repeat:         no-repeat;
        width:                                130px;
        height:                                30px;
        text-align:                        center;
        line-height:                25px;
}

div.meinKonto ul {
        list-style:                        none;
        margin:                                0;
        padding:                        0;
        margin-left:                10px;
}

div.meinKonto ul li {
        float:                                right;
        background-image:         url(../images/top_menue_back-a.png);
        background-repeat:         no-repeat;
        width:                                130px;
        height:                                30px;
        text-align:                        center;
        line-height:                25px;
}

div.meinKonto ul li a {
        display:                        block;
        color:                                #3D3D3D;
        margin-bottom:                6px;
        font-size:                        14px;
}
div.meinKonto ul li a:hover  {
        display:                        block;
        color:                                #000000;
        margin-bottom:                6px;
        font-size:                        14px;
        float:                                right;
        background-image:         url(../images/top_menue_back.png);
        background-repeat:         no-repeat;
        width:                                130px;
        height:                                30px;
        text-align:                        center;
        line-height:                25px;
}




div.meinKonto fieldset {
        display:                        none;
        border:                                0px;
        padding-left:                10px;
        padding-top:                5px;
        text-align:                        left;
}

div.meinKonto fieldset input {
        width:                                150px;
        height:                                18px;
}

div.meinKonto fieldset span input {
        width:                                74px;
        margin-top:                        3px;
}

Ich würde mich über Hilfe wirklich freuen!

[user0815]

Entschuldigt den Doppelpost, aber ich wäre über Hilfe immer noch dankbar! Warum funktioniert der Hover Effekt nicht auf dem Mein Konto Button? Das abgeschnitten hat sich inzwischen erledigt.

Um nicht noch mehr zu "spammen" wie könnte ich den Bildern einen hübschen Rahmen verpassen?

[mmaass]

Wenn Du dem Hover eine andere Farbe gibst, als dem normalen Link, sollte es klappen

div.meinKonto h2 a:hover {
color: #3D3D3D; <-------
float: right;
background-image: url(../images/top_menue_back.png);
background-repeat: no-repeat;
width: 130px;
height: 30px;
text-align: center;
line-height: 25px;
}

[user0815]

Danke dir für deine Antwort. Aber das funktioniert nicht. Es müsste sich auch das Bild verändern. Ich habe die Farbe nochmals angepasst, leider ohne Erfolg.
Die aktuelle css-datei sieht so aus:

Code: Alles auswählen

/* *********************** Aufbau Mein Konto *********************** */

div.meinKonto {
        position:                        absolute;
        left:                                530px;
        top:                                5px;
        width:                                450px;
        margin:                                0;
        padding:                        0;
        z-index:                        10;
        height:                                30px;
}

div.meinKonto h2 {
        color:                                #3D3D3D;
        margin:                                0;
        font-family: 'The Girl Next Door', cursive;
        font-weight:                bold;
        font-size:                        18px;
        float:                                right;
        background-image:         url(../images/top_menue_back.png);
        background-repeat:         no-repeat;
        width:                                132px;
        height:                                57px;
        text-align:                        center;
        line-height:                25px;
}

div.meinKonto h2 a {
        color:                                #3D3D3D;
        font-family: 'The Girl Next Door', cursive;
}
div.meinKonto h2 a:hover {
        color:                                #E80000;
        float:                                right;
        background-image:         url(../images/top_menue_back-a.png);
        background-repeat:         no-repeat;
        width:                                132px;
        height:                                57px;
        text-align:                        center;
        line-height:                25px;
}

div.meinKonto ul {
        list-style:                        none;
        margin:                                0;
        padding:                        0;
        margin-left:                10px;
}

div.meinKonto ul li {
        float:                                right;
        background-image:         url(../images/top_menue_back.png);
        background-repeat:         no-repeat;
        width:                                132px;
        height:                                57px;
        text-align:                        center;
        line-height:                25px;
}

div.meinKonto ul li a {
        display:                        block;
        color:                                #3D3D3D;
        margin-bottom:                6px;
        font-weight:                bold;
        font-size:                        18px;
        font-family: 'The Girl Next Door', cursive;
}
div.meinKonto ul li a:hover  {
        display:                        block;
        color:                                #E80000;
        margin-bottom:                6px;
        font-size:                        18px;
        float:                                right;
        background-image:         url(../images/top_menue_back-a.png);
        background-repeat:         no-repeat;
        width:                                132px;
        height:                                57px;
        text-align:                        center;
        line-height:                25px;
}




div.meinKonto fieldset {
        display:                        none;
        border:                                0px;
        padding-left:                10px;
        padding-top:                5px;
        text-align:                        left;
}

div.meinKonto fieldset input {
        width:                                150px;
        height:                                18px;
}

div.meinKonto fieldset span input {
        width:                                74px;
        margin-top:                        3px;
}


[mmaass]

wenn Du den hintergrund und den Rahmen mit wechseln lassen willst, musst Du auch ein h2:hover einbauen und dort die Farben ändern.

[user0815]

Hi,
reicht das hier nicht:

Code: Alles auswählen

div.meinKonto h2 a:hover {
        color:                                #E80000;
        float:                                right;
        background-image:         url(../images/top_menue_back-a.png);
        background-repeat:         no-repeat;
        width:                                132px;
        height:                                57px;
        text-align:                        center;
        line-height:                25px;
}

div.meinKonto ul {
        list-style:                        none;
        margin:                                0;
        padding:                        0;
        margin-left:                10px;
}

[mmaass]

Es gibt das h2, dieses macht die Box mit dem Hintergrund.
Wenn dann noch ein a kommt, womit man ja den Link macht, ist es deswegen nicht so gorss wie das h2, da es nur den Text verlinkt. Also würde der Effekt auch nur beim Text klappen, nicht aber bei der ganzen Box.

Daher entweder das h2 mit einem Hover versehen oder alles umbauen auf das a und in diesem noch ein display: block rein tun, damit es sich an die nächst Grössere Grösse anpasst.