[CSS] link met background, text positioneren?

[UltimateB]

Om een of andere reden lukt het me niet om de text te positioneren op de background van een link. Ik heb de volgende code:

HTML:

    <div id="menu">
        <a href="" class="topMenuItemLeft">&nbsp;[knip]&nbsp;Home</a>
        <a href="" class="topMenuItem">&nbsp;[knip]&nbsp;Producten</a>
        <a href="" class="topMenuItemRight">&nbsp;[knip]&nbsp;Informatie</a>
    </div>

De spaties zijn omdat ik het dus niet voor elkaar krijg om de text een stukje naar rechts te verplaatsen zonder de background mee te verplaatsen. De css ziet er als volgt uit.

Cascading Stylesheet:

.topMenuItem {
    background-image:url("../images/buttons/buttonBar.gif");
    background-repeat:no-repeat;
    text-decoration:none;
    float:left;
    width:129px;
    height:24px;
}
.topMenuItemLeft {
    background-image:url("../images/buttons/buttonBarLeft.gif");
    background-repeat:no-repeat;
    text-decoration:none;
    float:left;
    width:129px;
    height:24px;
}
.topMenuItemRight {
    background-image:url("../images/buttons/buttonBarRight.gif");
    background-repeat:no-repeat;
    text-decoration:none;
    float:left;
    width:129px;
    height:24px;
    vertical-align:bottom;
}

Ik heb al verschillende dingen geprobeerd maar het wil niet lukken. Ik denk dat de horizontale verplaatsing wel mogelijk is door het plaatje een stukje whitespace aan de onderkant te geven maar ik zou liever een nettere oplossing hebben.

Het plaatje ziet er als volgt uit op de huidige manier:



Heeft iemand tips of kan iemand een hint/oplossing geven?

[We Are Borg]

Als je het menutje zo opbouwd:

code:

<ul>
<li>home</li>
<li>producten</li>
<li>informatie</li>
</ul>

Kan je zo een margin meegeven waardoor je die nbsp;'s kan weglaten . Waarom doe je dat niet?

[ Voor 28% gewijzigd door We Are Borg op 28-09-2004 20:40 ]

[UltimateB]

Mijn bedoeling is dat er een mouse over effect bij komt. En als ik mij niet vergis ondersteund IE alleen :hover bij <A>'s. Ik heb niet zo een zin om dan een js hack te gebruiken want ik weet hoeveer proc poower dat kan kosten op een oude pc of lange site.

[X-Lars]

Je kunt gewoon anchors in je list zetten hoor

[UltimateB]

En op dat moment is alleen de text klikbaar en niet de hele button, of kraam ik nu onzin uit?

Bedenk me net dat je natuurlijk ook de anchor een groote kan meegeven (of ik geef em desnoods een transparante achtergrond). BEdankt voor de tips zover

Ik heb alleen nog niks gehoord over de hoogte van de text... naja misschien kan dat nu ook.

[ Voor 62% gewijzigd door UltimateB op 28-09-2004 20:58 ]

[X-Lars]

In principe is alles tussen je openingstag <a> en afsluittag </a> klikbaar. Maar ik zou zeggen: probeer eens wat Dan zie je het vanzelf wel En er is echt genoeg over te vinden...

[ Voor 6% gewijzigd door X-Lars op 28-09-2004 20:58 ]