CSS Background vraagje

Hoi,

Ik vroeg me af hoe ik het volgende doe, naar lang klooien heb ik het opgegeven:

De bedoeling is om om een element een achtergrond te doen eerst moet er een linker kant van een plaatje voor de href achter de tekst van de href moet een stukje background repeat worden en uiteindelijk moet hij weer eindigen met een plaatje aan de rechter kant.

Om een idee te geven van de bedoeling

Ik heb even snel een plaatje in elkaar gezet van wat de bedoeling is dat het eind resultaat moet worden: http://cl.ly/FQyQ

Ik hoop dat iemand me kan helpen.

Waarom doe je niet gewoon:

<ul>
  <li><a href="link">link</a></li>
  etc
</ul>

En dan in de style iets van:

ul li {display:block; width:breedte; height:hoogte; background:url(plaatje);

Freestyle schreef:

Waarom doe je niet gewoon:

<ul>
  <li><a href="link">link</a></li>
  etc
</ul>

En dan in de style iets van:

ul li {display:block; width:breedte; height:hoogte; background:url(plaatje);

Omdat ik dan voor elke link een aparte achtergrond moet maken, als je bij het voorbeeld plaatje ipv home fanvanjemoeder doet dan is dat langer dan de achtergrond.

Daarom is de bedoeling dat er een linker kant en een rechterkant is en in het midden een repeat van het midden stuk.

Kijk even op zillax.nl hoe ik het gedaan heb. 2 spantjes erover met background-image, background-repeat en background-position juist ingesteld

Vriendje schreef:

Kijk even op zillax.nl hoe ik het gedaan heb. 2 spantjes erover met background-image, background-repeat en background-position juist ingesteld

Dan heb je enkel het midden stuk, de bedoeling is dat er een image voor en een achter de href word geplaatst zoals op het plaatje (Met die rondingen bedoel ik voor en achter)

Je kan die rondingen ook eventueel met CSS doen, alleen dat ondersteunt nog niet elke browser.

Jponsen schreef:

Je kan die rondingen ook eventueel met CSS doen, alleen dat ondersteunt nog niet elke browser.

Dat, en de schaduw die naar binnen steekt en niet aan alle kanten gelijk is zal niet werken en ook zal het transparanten een probleem zijn.

Timmie schreef:

Eerdere citaten tonen

Jponsen schreef:

Je kan die rondingen ook eventueel met CSS doen, alleen dat ondersteunt nog niet elke browser.

Dat, en de schaduw die naar binnen steekt en niet aan alle kanten gelijk is zal niet werken en ook zal het transparanten een probleem zijn.

Hier is een tut hoe je dit kan doen, deze code gebruik ik ook altijd:
http://www.sitedeals.nl/tutorials/44123-een-menu-maken-met-een-afgeronde-hover.html

Marjolein schreef:

Eerdere citaten tonen

Timmie schreef:

Eerdere citaten tonen

Jponsen schreef:

Je kan die rondingen ook eventueel met CSS doen, alleen dat ondersteunt nog niet elke browser.

Dat, en de schaduw die naar binnen steekt en niet aan alle kanten gelijk is zal niet werken en ook zal het transparanten een probleem zijn.

Hier is een tut hoe je dit kan doen, deze code gebruik ik ook altijd:
http://www.sitedeals.nl/tutorials/44123-een-menu-maken-met-een-afgeronde-hover.html

Dankje, exact wat ik nodig had. Wat een gesakker ook om al die ouden browsers te ondersteunen met CSS3 was dit een fluitje van een cent geweest.

Edit: ouch, dit gaat nog niet helemaal op, omdat de achterkant transparant is en ze over elkaar heen gaan werkt het alsnog niet helemaal maar daar vindt ik wel wat op.

als je de reacties leest in dat artikel zie je daar ook een oplossing voor

Marjolein schreef:

als je de reacties leest in dat artikel zie je daar ook een oplossing voor

Oh, de volgende keer toch maar eens iets verder lezen dan me neus lang is. Had ondertussen al een oplossing gevonden door het rechter stuk niet transparant te maken maar de achtergrond erin te verwerken.