Halve button
Hallo,
Ik gebruik het volgende script voor de opmaak van een link (die dienst doet als button) maar de achterkant van de button staat er niet op:
Als je naar de link gaat die in het script staat zie je dat de achterkant van de button vooraan de afbeelding staat. Die moet er dus achter getekend worden, maar dit lukt me niet, kan iemand me helpen?
Ik gebruik het volgende script voor de opmaak van een link (die dienst doet als button) maar de achterkant van de button staat er niet op:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
A.button_grijs {
float: left;
padding: 5px 17px 4px 20px;
font-size: 11px;
font-family: Tahoma;
height: 25px;
margin-right: 3px;
background: transparent url(http://www.avickum.nl/layout/afbeeldingen/img_button.png) no-repeat -3px 0px;
color: #000 !important;
font-weight: bold;
text-align: center;
display: inline;
}
A.button_grijs:hover {
background-position: -3px -25px;
}
float: left;
padding: 5px 17px 4px 20px;
font-size: 11px;
font-family: Tahoma;
height: 25px;
margin-right: 3px;
background: transparent url(http://www.avickum.nl/layout/afbeeldingen/img_button.png) no-repeat -3px 0px;
color: #000 !important;
font-weight: bold;
text-align: center;
display: inline;
}
A.button_grijs:hover {
background-position: -3px -25px;
}
Als je naar de link gaat die in het script staat zie je dat de achterkant van de button vooraan de afbeelding staat. Die moet er dus achter getekend worden, maar dit lukt me niet, kan iemand me helpen?
Leest hij de hover wel? ik dacht dat daar ook een ; achter moest.. maar zal wel niet dan.
Groetjes.
Groetjes.
Het moet zijn:
A.button_grijs a:hover {
}
A.button_grijs a:hover {
}
de hover werkt gewoon maar dat is niet het probleem, het probleem is dat de achterkant van de button er niet staat:

Niels Kieviet dit klopt toch niet? Nu doe je een a in een a? het is wel gewoon a.button_grijs:hover.
Avicka volgens mij wat jij bedoelt is dat er 1 afbeelding is die zo op de button word gezet dat hij mee rekt met de button.
Maar zo hoe jij wilt zal dat niet lukken, als je een span in de a doet kan het wel.
op de a zet je de grootste afbeelding (dus de linkerkant en de achterkant) en op de span (die in de a zit) zet je de rechter afbeelding ding.
Hoop dat je dit een beetje begrijpt.
EDIT:
Nog even een toevoeging: Je ziet de achterkant van button niet omdat er maar 1 afbeelding op de achtergrond kan op een element. dus je kunt hem ook maar 1 keer positioneren. Vandaar dat er een span in de a moet zodat je daar weer de achterkant van de afbeelding kunt positioneren.
Avicka volgens mij wat jij bedoelt is dat er 1 afbeelding is die zo op de button word gezet dat hij mee rekt met de button.
Maar zo hoe jij wilt zal dat niet lukken, als je een span in de a doet kan het wel.
op de a zet je de grootste afbeelding (dus de linkerkant en de achterkant) en op de span (die in de a zit) zet je de rechter afbeelding ding.
Hoop dat je dit een beetje begrijpt.
EDIT:
Nog even een toevoeging: Je ziet de achterkant van button niet omdat er maar 1 afbeelding op de achtergrond kan op een element. dus je kunt hem ook maar 1 keer positioneren. Vandaar dat er een span in de a moet zodat je daar weer de achterkant van de afbeelding kunt positioneren.
Gewijzigd op 11/09/2010 15:56:19 door Joakim Broden
Ik snap het nog niet helemaal, maar ik gebruik nu al span:
<a href="#" class="button_grijs"><span>Klik hier als je verder wilt gaan!</span></a>
En de afbeelding moet idd meereken met de lengte van de tekst. zou je misschien een voorbeeld scriptje kunnen maken?
<a href="#" class="button_grijs"><span>Klik hier als je verder wilt gaan!</span></a>
En de afbeelding moet idd meereken met de lengte van de tekst. zou je misschien een voorbeeld scriptje kunnen maken?
Dus op de a zet je de linkerkant van de afbeelding (links uitlijnen) en op de span zet je de rechterkant van de afbeelding en zorg je dat die altijd naar rechts word uitgelijnd.
Anders kun je nog even op deze website kijken -> http://projecten.oetzie.nl/201001/ Deze buttons werken hetzelfde.
Anders kun je nog even op deze website kijken -> http://projecten.oetzie.nl/201001/ Deze buttons werken hetzelfde.
Ik snap nog niet echt wat ik nu moet doen, ik werk nooit veel met css namelijk.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a.button_grijs {
float: left;
display: block;
margin: 0px 3px 0px 0px;
text-decoration: none;
background: url(http://www.avickum.nl/layout/afbeeldingen/img_button.png) no-repeat 0px 0px;
}
a.button_grijs span {
float: left;
display: block;
padding: 5px 17px 4px 20px;
margin: 0px;
height: 25px;
font-family: Tahoma, Arial, Sans-serif;
font-weight: bold;
color: #000000;
background: url(http://www.avickum.nl/layout/afbeeldingen/img_button.png) no-repeat right -25px;
}
float: left;
display: block;
margin: 0px 3px 0px 0px;
text-decoration: none;
background: url(http://www.avickum.nl/layout/afbeeldingen/img_button.png) no-repeat 0px 0px;
}
a.button_grijs span {
float: left;
display: block;
padding: 5px 17px 4px 20px;
margin: 0px;
height: 25px;
font-family: Tahoma, Arial, Sans-serif;
font-weight: bold;
color: #000000;
background: url(http://www.avickum.nl/layout/afbeeldingen/img_button.png) no-repeat right -25px;
}
En dan deze afbeelding gebruiken

Zoiets zou het moeten zijn, heb dit namelijk niet getest...
En anders zou ik toch echt CSS tutorials doornemen of goed mijn voorbeeld bekijken..
Gewijzigd op 11/09/2010 16:19:59 door Joakim Broden
doordat de hoekjes van de achterkant transparant zijn zie je de achtergrond vand e button erdoor maar dat kan ik wel verhelpen, ik heb nu alleen nog de hover nodig, bedankt.




