Herhalende afbeelding in footer (Joomla 2.5/aangepaste Beez20 template)

[reinierp]

Beste mensen,

Ik heb een afbeelding geplaatst dmv custom HTML in de footer op positie 10, maar zou graag willen dat de ruimtes links en rechts (resp 9 en 11) worden voorzien van een herhalende afbeelding.
Het maken van 1 afbeelding over de volledige breedte is helaas geen optie omdat de middelste (10) klikbaar moet zijn en ik niet wil dat de hele breedte een knop wordt natuurlijk.
Ik heb geprobeerd de url van de afbeelding incl. repeat-x in zowel de footer tags van position.css en layout.css te plaatsen, maar dat heeef geen resultaat (er wordt muv pos 10, niret getoond, plaatje is via url wel te zien).
Omdat het plaatje/patroon betreft en geen kleur, is een kleurcode helaas geen optie.

Graag een advies of duwtje in de juiste richting !

Mvg Reinier

 

[csshunter]

Hoi Reinier,
In principe zou via de css regelen van het background-image in posities 9 en 11 moeten werken, lijkt me. Misschien dat er voor het betreffende element nog een {display:block;} of {display:inline-block;} bij moet of zoiets (een z-index zou het bv. ook kunnen zijn)? Of een tikfoutje, of een verwijzing naar een verkeerde map voor het img?
Maar zonder de concrete code valt er eigenlijk weinig (=niets) over te zeggen.
Heb je een testpagina online?

Met vriendelijke groet,
CSShunter

 

[reinierp]

voorbeeld

hartelijk dank voor je bericht !
: het voorbeeld staat op artforheaven.com
ik heb de url van plaatje dat moeten herhaald getest en dat is online
(../images/afh/bg_footer.png) iig
zal straks aanvullen position.css ook plaatsen
hartelijk dank alvast

 

[csshunter]

Hoi Reinier,
O - de site is intussen niet meer online. Maar ik had gisteren al even gekeken, en toen zag ik dat de afbeelding (die over de volle breedte moet komen) als voorgrond-afbeelding binnen de link van het Googe-mapje staat.
Dan wordt de volle breedte aanklikbaar, wat niet de bedoeling is.

Wat je kan doen is het volgende:

• De afbeelding als background-image opnemen in de <div> waar de link naar de Google-map in zit.
• De link een id geven (bv. id="googleMap") en binnen de link niets zetten (het gaat een transparant gebiedje worden).
• In de css de link een breedte en een hoogte geven, gelijk aan de grootte van het Google-mapje op de afbeelding.
• De link ook een {display: inline-block;} geven, waarmee het hele oppervlakje hoverbaar en klikbaar wordt.
• En tenslotte de link een margin-left en een margin-top geven om het vlakje op de juiste positie binnen z'n <div> te rangeren.

Voor het laatste is het handig om er even een tijdelijke border omheen te zetten met #googleMap { border: 1px dotted fuchsia;}, anders zie je niet waar ie zit.

Met vriendelijke groet,
CSShunter