[CSS] align text + img

[ZOMERZON]

Al een tijd lopen klooien maar nog steeds geen goeie oplossing gevonden voor het volgende probleem


http://img119.imageshack.us/my.php?image=css3fn.jpg

Aan de linkerkant zie je 2 iconen met text ernaast.
Wat ik wil is dat de iconen aanklikbaar zijn, maar dat de text aan rechterkant worden uitgelijnd.
Zodra je hovert over het icoon of text moet er dus een underline komen.
Dit alles zo schoon mogelijk en zo min mogelijk code.

margin/padding geven aan de img is geen oplossing aangezien de text kan veranderen qua lengte.

iemand die hier een oplossing voor weet ? heb al vele manieren gedaan maar achteraf hou ik veel onnodige codes over, veel id gebruik of veel class gebruik of ik moet de href 2x definieeren (1 voor icoon en 1 voor text)

wordt echt gek hier aangezien ik niet apart img en de text erin kan uitlijnen

[Rickets]

Kan je een background-image in plaats van een image gebruiken? Die zet je dan op je A-element, waardoor het klikbaar blijft, en text-align en text-decoration zouden dan ook goed moeten gaan.

[ Voor 4% gewijzigd door Rickets op 23-02-2006 13:56 ]

[Sappie]

text-align: right ?

post verder je relevante html / css eens.. dan kunnen we iig zien wat je aan het doen bent

[JHS]

Wat je misschien zou kunnen doen is binnen het anchor twee blocklevel elementen maken en die naar links en rechts floaten . Ik twijfel echter aan de validiteit hiervan...

Misschien is het handig als je aangeeft welke manieren je al hebt gedaan, en waarom je daar niet tevreden over was?

[ZOMERZON]

Even overnieuw begonnen met jouw idee Rickets,
dit is wat ik ervan maak

html

<div id="test"><a href="" >testtxt</a></div>

css

#test {background:red url(http://vortex.accuweather.../standard/wx/31x31/07.gif) no-repeat; width:100px; height:31px}
#test a {padding:10px}

[cyberstalker]

Als je nu eens de hele <a> een blocklevel element maakt, en deze een breedte opgeeft die plaatje en tekst bij elkaar moeten hebben, minus de breedte van het plaatje.

Vervolgens geef je een padding-left op voor de <a>, van de breedte van het plaatje. Het plaatje positioneer je vervolgens absoluut in de top van de <a>. De tekst kun je vervolgens met een text-align: right aan de rechterkant zetten.

[ Voor 5% gewijzigd door cyberstalker op 23-02-2006 14:46 ]

[ZOMERZON]

ik kom er even niet meer uit
Loop een beetje te lang te klooien voor iets wat naar mijn inziens eigenlijk vrij simpel is.

Kan er even niet opkomen hoe dit het best / snelst / effectiefst en gevalideerd geschreven kan worden

[ZOMERZON]

Pff.... wat was ik omslachtig bezig en heb het inmiddels gefixed.
In grote lijnen is het net zoiets als een standaard CSS menu button.

zoals cyberstalker al zei - de a in blocklevel en vandaaruit verder

thanks iig !

[Rickets]

ZOMERZON schreef op vrijdag 24 februari 2006 @ 09:51:
Pff.... wat was ik omslachtig bezig en heb het inmiddels gefixed.
In grote lijnen is het net zoiets als een standaard CSS menu button.

zoals cyberstalker al zei - de a in blocklevel en vandaaruit verder

thanks iig !

Ow, ik had een voorbeeldje gemaakt voor je, ik stond op het punt om het te plaatsen

[ZOMERZON]

Thanks

maar had hem zelf gefixed, hehe

Zat inderdaad ook te denken aan UL/LI oplossing, maar heb het in div'jes gelaten omdat het als blokken buttons in de rest van de site ook terugkomen.