Opgelost - Verplaatsen van checkout image

[Japiejooo]

Hallo allemaal,

Nieuw op het forum, al lees ik wel veel, en kon tot nu toe altijd de oplossing in een bestaand topic vinden, nu echter niet

Op de pagina waar een overzicht wordt getoond van je winkelwagen staan er onderaan twee links: continue_link & .checkout_link met de daarbij behorende plaatjes.

Nu wil ik graag het plaatje wat nu links van Afrekenen staat, naar rechts verplaatsen. Het verplaatsen van het plaatje lukt wel dmv aanpassing in theme.css:

.checkout_link {
	margin-left: 40px;
	background: url( 'images/forward.png' ) no-repeat right;

Echter staat het plaatje dan midden in de tekst Afrekenen (in het plaatje is dat Test), waar deze natuurlijk netjes rechts ervan moet. Of de tekst moet naar links, of het plaatje verder naar rechts. Iemand een idee?

[MaartenN]

heb je een link naar de betreffende site?

[Japiejooo]

Nog niet helaas, staat nog lokaal. Ik heb een plaatje bijgevoegd, om het probleem wat duidelijker te maken.

[MaartenN]

hmm, het probleem was me wel duidelijk, maar zo uit m'n hoofd weet ik geen passende oplossing. ik dacht als ik even een beetje kan prutsen dan kom ik er misschien wel uit voor je, maar nu moet ik m'n beurt dus voorbij laten gaan.

misschien kan je eens iets proberen met margin of padding of met background-position in de css, en maak je al gebruik van firebug? da's een extensie voor firefox waarmee je (oa) makkelijk "on the fly" kan kijken wat bepaalde aanpassingen aan je html of css doen voor je site

en als laatste; ik was daarnet helemaal vergeten om je van harte welkom te heten op dit forum, namens het hele team. dus bij deze alsnog

[Japiejooo]

Bedankt voor het hartelijke welkom Firebug heb ik inderdaad draaien.

de continue_link en checkout_link classes zijn als volgt gedefinieerd:

.continue_link, .checkout_link {
	margin: 2px;
	padding: 2px 0px 2px 40px;
	vertical-align: middle;
	font-weight: bold;
	font-size: 1.4em;
	width: 40%;
}
.checkout_link {
	margin-left: 40px;
	background: url( 'images/forward.png' ) no-repeat right;
}
.continue_link {
	background: url( 'images/back.png' ) no-repeat left;
}

Wellicht twee aparte classes met verschillende properties van maken, aangezien ze nu dezelfde gebruiken?

[MaartenN]

O P L O S S I N G

ben even met (een van) m'n eigen site(s) aan het prutsen geweest en om het te krijgen zoals in de bijlage heb ik het volgende toegevoegd aan .checkout_link{}: allereerst heb ik de background-image verplaatst, dit kan met

background-position: 140px 0px;

of zoals je in het screenshot ziet, door deze waarden toe te voegen aan de background-eigenschap. daarnaast de padding-right wat ruimer gezet en klaar hoop dat je hier wat mee kan

[Japiejooo]

Ahh - very nice! Had al wat dingen geprobeerd, maar padding-right nog niet
Bedankt!

[MaartenN]

kan je topic dicht? (kan je zelf doen door op "oplossing" te klikken achter mijn post)

[Japiejooo]

Onderstaande post heeft geleid of bijgedragen tot de oplossing:

Oorspronkelijk geplaatst door MaartenN

ben even met (een van) m'n eigen site(s) aan het prutsen geweest en om het te krijgen zoals in de bijlage heb ik het volgende toegevoegd aan .checkout_link{}: allereerst heb ik de background-image verplaatst, dit kan met

background-position: 140px 0px;

of zoals je in het screenshot ziet, door deze waarden toe te voegen aan de background-eigenschap. daarnaast de padding-right wat ruimer gezet en klaar hoop dat je hier wat mee kan