Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

background image probleem

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

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

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