Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

background image probleem

boelieboelie
9 antwoorden
  • Hey,

    op een pagina heb ik een link staan met een korte tekst "find" en een achtergrond:
    ———————————————————————–
    <a href="" class="button">Find</a>
    ———————————————————————–

    Deze achtergrond is met css gedeclareerd:
    ———————————————————————–
    .button {
    background-image: url(/images/navbarbg.jpg);
    background-repeat: no-repeat;
    }
    ———————————————————————–

    Het probleem is nu echter dat de achtergrond van de link er niet volledig op komt omdat de back-ground image groter is dan de tekst "find".
    Bij de gevallen waar de tekst groter is dan de background is er geen probleem, enkel in dit geval.

    Weet iemand hoe ik dit kan oplossen in css?

    Een voorbeeld staat op: http://www.lucyboys.be/test/test.html
    Als je gaat zien naar de image(http://www.lucyboys.be/images/buttonback.jpg) zul je merken dat hij veel groter is.

    thanks
  • Je kunt een breedt geven aan de link:[code:1:22fe94c6d3].navigatie {
    display: block;
    width: 151px;
    height: 20px;
    text-align: center;
    background-image: url(buttonback.jpg);
    background-repeat: no-repeat;
    }[/code:1:22fe94c6d3]
    display: block; maakt er een block element van zodat de breedte opgegeven kan worden. Met text-align kun je de tekst eventueel centreren.
    wimb
  • merci voor de reply WimB.

    Inderdaad, nu is het in orde.
    Maar ik heb hier wel nog 1 probleem mee, namelijk dat ik nu geen links meer achter elkaar kan zetten, omdat dit nu altijd naar de volgende regel springt na iedere link, waardoor ze onder elkaar komen te staan ipv achter elkaar.

    Weet je hoe je dit kunt oplossen?
  • float: left toevoegen:[code:1:095c5aab78]
    CSS:
    .navigatiebalk a { float: left }

    HTML:
    <div class="navigatiebalk"><a href="" class="button">Find</a></div>
    [/code:1:095c5aab78]Succes!
  • met : display: inline-block; zou het moeten werken. Ik denk dat ondertussen alle browsers dat wel goed weergeven. (een paar jaar geleden nog niet)
    wimb
  • Met die inline werkt het niet, WimB.
    Daar wordt dan die image terug niet tegoei getoond.
  • [quote:9a3a2d1780="WimB"]met : display: inline-block; zou het moeten werken. Ik denk dat ondertussen alle browsers dat wel goed weergeven. (een paar jaar geleden nog niet)
    wimb[/quote:9a3a2d1780]IE6 ondersteund dat alleen voor inline elementen en ik geloof dat de ondersteuning in Fx pas in versie 3 zit (correct me if I'm wrong)… dus helemaal optimaal is het jammer genoeg nog niet… maar in dit geval werkt float:left prima aangezien de elementen waarschijnlijk niet in hoogte zullen verschillen. Daarnaast lijkt het me handiger om de float:left gewoon op de link te laten werken ipv om elke link een div te zetten.
  • display: inline-block werkt inderdaad niet in FF2 zie link: http://www.quirksmode.org/css/display.html
    FF3 en andere browsers doen het wel goed, IE alleen voor inline elementen.
    wimb
  • @Drewster
    [quote:74949dc65a]Daarnaast lijkt het me handiger om de float:left gewoon op de link te laten werken ipv om elke link een div te zetten.[/quote:74949dc65a]Ah ja, dat was niet helemaal duidelijk zie ik nu. Ik bedoelde:[code:1:74949dc65a]
    <div class="navigatie">
    <a href="#">1</a>
    <a href="#">2</a>
    … etc
    </div>
    [/code:1:74949dc65a]Dus de div was alleen maar om te voorkomen dat alle a hrefs op de pagina een float: left krijgen, dat zou natuurlijk niet zo handig zijn :)

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.