Twee plaatjes op één link
Misschien dat jullie een idee hebben.
Ik heb een link.
Hiervoor heb ik het volgende gedaan:
Code (php)
1
<a href="#" class="m_item">Home</a>
In css gebruik ik:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
a.m_item:link {
display:block;
height:15px;
background-image:url('images/button.png');
background-repeat:no-repeat;
background-position:0px 4px;
padding-left:14px;
font-weight:bolder;
color:#31c09e;
text-decoration:none;
font-family:Arial, cursive;
font-size:14px;
margin-bottom:5px;
}
display:block;
height:15px;
background-image:url('images/button.png');
background-repeat:no-repeat;
background-position:0px 4px;
padding-left:14px;
font-weight:bolder;
color:#31c09e;
text-decoration:none;
font-family:Arial, cursive;
font-size:14px;
margin-bottom:5px;
}
Ik zet voor de link een plaatje (bolletje).
Ik was benieuwd of het mogelijk is om een extra class aan te maken welke een underline image kan instellen.
Indien suggesties hoor ik dat graag!
Gegroet:)
Code (php)
1
<a href="#" class="m_item extra_class">...</a>
Maar CSS properties die gedefinieerd zijn in de tweede genoemde class overschrijven de properties uit de eerst genoemde als die daar ook in voorkomen.
Wat bedoel jij precies met een 'underline image instellen'. Wil je een element een tweede background-image meegeven? Dat zal niet lukken zoals hierboven omschreven...
Ja het klopt inderdaad. Ik wil een tweede image meegeven.
Je hebt dus zeg maar het bolletje, en bij de Hover geef ik dan een underline mee.
Deze wil ik eigelijk vervangen door een image underline. (Gewoon plaatje meegeven welke onder de tekst komt te staan.)
Ik weet idd dat hij dan de oude properties overschrijft. Maar misschien dat iemand een mooie oplossing heeft:)
Ik kan wel met een image sprite werken,dat bij hover hij "het onderste plaatje" pakt. Maar de underline is afhankelijk van de lengte van de tekst. En het is natuurlijk niet erg mooi om halve bolletjes(zijn ook kleine bolletjes) te zien (door width aan link mee te geven), en bij een lange tekst stopt de underline plots.
Nougoed, indien iemand idee heeft om beetje netjes dit op te lossen hoor ik dat graag:)
