Navigatie

Fitne Slicing / basing

Voor een wordpress website werd mij gevraagd twee pagina's, een productenpagina en een tekstpagina, vanuit PSD om te zetten naar xhtml. In het ontwerp was veelvuldig gebruik gemaakt van opacity, waarbij achtergronden van bepaalde elementen transparant zijn.
Opdrachtgever:
Creative Pulses te Utrecht
Talen:
xhtml, css
Oplevering:
Winter 2010
Website / url:
Fitne
Fitne

Helaas erven alle child elementen van een element dat een opacity meekrijgt, dezelfde opacity. Dit zou betekenen dat eventuele tekst, afbeeldingen en borders binnen een div met opacity, ook doorzichtig zou worden. Dit moest voorkomen worden. Een oplossing is gebruik te maken van transparante PNG afbeeldingen. Een andere oplossing is de opacity property, waarbij geen gebruik hoeft te worden gemaakt van afbeeldingen en dus op laadtijd en dataverkeer bespaard kan worden. Enige nadeel is dat niet alle browsers naar dezelfde property luisteren en je properties moet gebruiken die niet door een CSS validator zouden komen. Dit is gelukkig een kleine kanttekening.

Nadeel is echter weer, dat je de opacity aan een andere div mee moet geven en deze via absolute positionering achter de eigenlijke tekst-div moet plaatsen. Dit is mogelijk, maar absoluut gepositioneerde divs verliezen hun block-behaviour en dus zullen ze onzichtbaar zijn zonder content. Ze rekken dus ook niet mee met de content van de eigenlijke tekst-div. Dit kan opgelost worden door de tekst-div relatief te positioneren om vervolgens de absolute div tegen de 'kantlijnen' van de relatieve div te positioneren door de properties top, right, bottom en left op 0px te zetten. Voor zover ik heb kunnen testen, luistert enkel IE6 hier niet naar.

Verder is in de slice gebruik gemaakt van een bg stretcher voor de meerekkende achtergrond, png transparantiefix voor IE6, voornamelijk voor het logo dat een doorzichtige schaduwrand bevat, cufon voor de niet-standaard lettertypes en jCarousel Lite voor de zoganaamde productenslider onderaan. Deze laatste gaf de meetse problemen, na debuggen kwam ik er achter dat een list-item geen child list-items mag bevatten, niet in de vorm van een unordered list, noch in de vorm van een ordered list.
In Chrome kregen de list-items geen juiste breedte mee, waardoor een enkele list-item over de hele breedte werd getoond, in plaats van twee naast elkaar. Om dit op te lossen, heb ik de padding van de list-item moeten verwijderen en de list-items helaas inline een vaste breedte mee moeten geven.