✔ Rollover mit Grafik und Text

Status
Nicht offen für weitere Antworten.
C

cyrrano

Grünschnabel
Hallo,

ich kenne mich nicht so gut aus mit CSS, habe aber schon meine Menuaufgabe zur Hälfte gelöst. Kleine Quadrate, die beim Mousover ihre Farbe ändern. Nun sollen darunter noch die Linktexte linksbündig unter dem ersten Quadrat erscheinen.

Hat jemand irgendeine Idee

Link: http://www.herpens.de/ebay/mouse_over.htm

Liebe Grüße
Cyrrano


<html>
<head>
<title>Mouseover Boxes</title>
<style type="text/css">

body {background: darkblue;}

#menu {
position: absolute;
width: 400px;
margin-left: 50px;
margin-top: 50px;
}

#rollovermenu a {
float: left;
padding: 10px 0 0;
overflow: hidden;
height: 10px !important;
width: 15px;
display: table-cell;
background: url("boxroll.gif") 0px 0px no-repeat;
}
#rollovermenu a:hover {
background-position: 0px -10px;
}
#rollovermenu a:active {
background-position: 0px -10px;
}


</style>




</head>
<body>
<div id="menu">
<div id="rollovermenu">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>



</body>
</html>
 
Hallo Maik,

prinzipiell schon, aber es sollte nicht so aufwendig sein. Es reicht, wenn zu jedem Menupunkt nur ein Hinweis darunter erscheint. Allerdings immer an derselben Stelle (eben linksbündig unter den Quadraten) ...

Any idea?

Gruß
Cyrrano
 
Als erstes packst du die Linktexte jeweils in ein span-Element, das mit display:none zunächst versteckt wird:

Code: 
<a href="#"><span>Linktext</span></a>

Im zweiten Schritt folgt die CSS-Formatierung:

Code: 
a span {
        display: none;
        position: absolute;
        left: 0;
        top: 32px;
        width: 215px;
}
a:hover {
        border-width: 0;
}
a:hover span {
        display: block;
}
Das war's dann eigentlich schon :)

mfg Maik
 
Hallo Maik,

ich bastle schon damit herum. Diese Variante hatte ich aber schon mal. Jetzt kann ich die Linktexte beim Rollover über die Quadrate ändern, aber das Austauschen der Farbe der Quadrate fehlt mir dort ...

Code: 
#rollovermenu a {
float: left;
padding: 10px 0 0;
overflow: hidden;
height: 10px !important;
width: 15px;
display: table-cell;
background: url("boxroll.gif") 0px 0px no-repeat;
}
#rollovermenu a:hover { 
background-position: 0px -10px;
}
#rollovermenu a:active {
background-position: 0px -10px;
}

Wie kriege ich das da wieder rein ... ?

Gruß
Cyrrano
 
Dann geb ich dir mal etwas Nachhilfe in Latein :-)

Code: 
<html>
<head>
<title>Mouseover Boxes</title>
<style type="text/css">

body {background: darkblue;}

#menu {
        position: absolute;
        width: 400px;
        margin-left: 50px;
        margin-top: 50px;
              }

#rollovermenu a {
                float: left;
                padding: 0;
                /*overflow: hidden;*/ /* auskommentiert */
                height: 10px !important;
                width: 15px;
                display: table-cell;
                background: url("boxroll.gif") 0px 0px no-repeat;
                }
#rollovermenu a:hover {
                background-position: 0px -10px;
                }
#rollovermenu a:active {
                background-position: 0px -10px;
                }

#rollovermenu a span {
        display: none;
        position: absolute;
        left: 0;
        top: 32px;
        width: 215px;
}
#rollovermenu a:hover {
        border-width: 0;
        color:#fff;
}
#rollovermenu a:hover span {
        display: block;
}
</style>

</head>
<body>

<div id="menu">
<div id="rollovermenu">
        <a href="#"><span>Menupunkt 1</span></a>
        <a href="#"><span>Menupunkt 2</span></a>
        <a href="#"><span>Menupunkt 3</span></a>
        <a href="#"><span>Menupunkt 4</span></a>
        <a href="#"><span>Menupunkt 5</span></a>
        <a href="#"><span>Menupunkt 6</span></a>
        <a href="#"><span>Menupunkt 7</span></a>
        <a href="#"><span>Menupunkt 8</span></a>
        <a href="#"><span>Menupunkt 9</span></a>
        <a href="#"><span>Menupunkt 10</span></a>
        <a href="#"><span>Menupunkt 11</span></a>
        <a href="#"><span>Menupunkt 12</span></a>
</div>
</div>

</body>
</html>
mfg Maik
 
Wow, klasse

Du bist ja ein wahrer CSS Künstler. :)

Ich habe noch das text-decoration: none; hinzugefügt und es ist perfekt, genauso habe ich es mir vorgestellt.

Ich danke dir sehr und werde in den Quelltext eine Widmung hineinschreiben ;-)

Liebe Grüße und einen erholsamen Abend

Cyrrano

Amicus certus in re incerta cernitur
Zum Vergrößern anklicken....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück