Mikael Brevik

Her i denne posten skal du få en liten innføring i hvordan du enkelt kan lage deg et bildegalleri ved hjelp av CSS. Men selvsagt har vi IE 6 som har dårlig støtte for webstandarder og CSS, så da må vi kompensere med JS. Vi har da problemet at om en bruker IE 6 eller lavere og har deaktivert JS vil ikke kunne se alle funksjonene som er essensielt for galleriet. Men jeg tror nok at de fleste som er beviste på å deaktivire JS, er smarte nok til å ha byttet nettleser, og dermed har vi ingen store problem!

Hvordan kan galleriet se ut til slutt? Her er et ferdig bilde over hvordan det kan bli.

Markup

Men la oss starte med hvordan vi skal bygge opp galleriet med XHTML koder. Som du kanskje ser ut av bildet ovenfor skal det komme frem et felt med beskrivelse av hva bildet er. Det feltet som skal komme frem der skal være av span-tagen. Det er det som er mest korrekt i følge W3 standarden. Her i markup delen kommer jeg ikke til å vise mer enn 4 bilder, men i eksemplene på eksterne sider kommer det 9 bilder.

Viser ikke de første kodene inne i bloggen, se på ekstern
lenke

Bildene er testbilder jeg har tatt fra min portefølje for å illustrere hvordan dette blir. Når du har kun denne markupen, og ingenting annet, vil det se ut slik som eksempel 1 (som du husker har eksterne eksempel 9 bilder, mens kodene her har kun 4). På eksempel 1 ser du uten noe som helst CSS, og det er ganske oversiktelig. Jeg kunne nå ha gått videre til CSS delen, men først stopper vi opp litt og tenker etter. LI elementet har som vi alle vet block som standard verdi i display. Det vil si at li kun har plass til et element i parent bredden. Dette må vi gjøre noe med, og en naturlig løsning er da float: left; på alle li elementene. Enten det eller vi kan bruke display: inline;. Men for dette foretrekker jeg å bruke float. Derfor må vi sette strek i floatingen etter alle listeelementene - så det må vi suplere med i markupen. Clearingen har jeg i en CSS klasse kalt "clear".

Jeg vil også ha en navigasjon som kan styre sidene til galleriet. Si jeg har maks 9 bilder, og totalt 43 bilder, så blir det flere sider, og det er viktig med et sideindikasjon som står i stil med resten. Sidene vil jeg også ha i liste.

Den nye markupen blir slik som dette

Se dette i live action på mitt eksterne eksempel 2.

CSS delen

Så nå har vi 5 klasser vi kan style og tulle med i CSS. Det kunne selvsagt sløyfes noen klasser og brukt pseudo-klasser (eks; div#gallery div:last-child { }) i stedet for navigation delen. Og slik kan jeg følge videre. Men vi har jo det problemet at IE eksisterer, og de har dårlig støtte for pseudo-klasser, slik som de har dårlig støtte for alt annet. Huff, IE ødelegger rett og slett all moroa fra CSS! Jeg har en tendens til å hoppe ut mot digeresjoner, men ja tilbake til CSS biten.

#gallery er wrap-biten som holder hele galleriet. Derfor er det naturlig at det er denne vi setter bredde på og alt annet som en wrapper/container tar seg av. Dette er noe jeg liker å kalle en global instilling. Derfor setter jeg den sammen med de andre instillingene som er globale. Jeg vil ikke ha en stygg ramme på IMG-elementet når IMG er child av A, slik som IE og delvis FX slenger på. Derfor setter jeg a img { border: 0px; } ved det globale. Ellers har vi også den vanlige utnullingen av px forskjellene på margin og padding. Øverste del av CSS-en er derfor slik som det her:

Merk jeg har 3 fonter i familien. Kan godt ha på flere, men dette er font jeg har lagt på som jeg syns er fin å bruke i dette eksempelet. Denne må du da gjerne endre, samt med alle andre instillinger som ikke ødelegger funksjonaliteten. Bredden av wrapen har jeg satt ut i fra hvor mange bilder jeg vil ha i bredden. Bildene jeg vil bruke er på 130 * 150 piksler, som gjør at 3 i bredden vil bli 390 piksler. Sleng med at jeg har 5 piksler i på hver side av bildene i padding også. Da blir det til sammen 420 piksler i bredde. Derfor har jeg satt 440 piksler i bredden for å ha med litt feilmargin og lignende.

Så hele poenget med dette CSS galleriet er at når vi har pekeren over et bilde vil det komme frem en forklaring av bildet. Dette er det vi skriver i span boksen som du ser i markeringen. Derfor sier det seg selv at vi har med position og z-index å gjøre her i CSS-en.

I denne artikkelen skal jeg prøve å lære bort flere ting enn å kun lage en kopi av galleriet mitt her. Jeg prøver å lære dere om metodene vi bruker også! Derfor kommer det her en liten liste over hva position og z-index gjør. Det er ikke alle som er så kjent med disse "egenskapene".

• Position: relative »» Sier seg selv, posisjonen er relativ (forklaring: i forhold til noe annet, variabel). Vi bruker tilleggsegenskapene left, right, bottom og top til denne, som viser til hvor dan skal stå relativt i forhold til orginale posisjon.
• Position: absolute »» Absolute plasserer elementet hvor som helst bestemt av samme egenskapene som over; left, right, bottom og top.
• z-index: 1 »» z-index betegner rekkefølgen elementer skal komme i. Si vi har 3 elementer, slik som i dette tilfellet. Bakerste får 0, den forran der får 1 og den fremste får 3. Du kan også bruke negative verdier. Dette går selvsagt hånd i hånd med position, siden det får elementene til å flyte over hverandre. I mitt tilfelle her, trenger en egentlig ikke z-index på annet enn det siste elementet (span), men jeg liker å være konsekvent og nøyen.

Nå skal vi ta oss av stylingen til #galleryList. #galleryList er som vi ser listen til alle bildene. På dette selve dokumentet trenger vi ikke å gjøre noe annet enn å fjerne list-style-type. Men det blir mer å gjøre på #galleryList li.

ul#galleryList li Skal som du ser være det bakerste elementet - det vi bestemmer med z-index, som du husker? Bredde og høyde setter vi etter hvor stort bildet er. Vi kunne ha klart oss uten å sette størrelsen, men da hadde det blitt problemer med stillingen og plasseringen av det span-elementet som skal flyte over bildet og li-elementet. For at bottom og right skal være nederst til høyre på 0, må vi ha helt korrekt størrelse på li elementet. Vi setter på position: relative for å få absolute verdien på span som dere får se senere, til å bevege seg i forhold til denne. Margin, color og font-size er trivielle ting som bare er satt for leselighetens skyld. Mens float: left har jeg forklart tidligere. Den er for å gå i mot block verdien av display, slik at det blir flere elementer på samme horisontale nivå i parent.

Bildet skal være over li, så vi er konsekvente med å sette det i z-index. Ellers har jeg på en ramme ved å bruke background-color og padding. Du kan også bruke rett border, men med dette kan du ha dobbel ramme, ved å legge border utenpå!

Viktig

Du ser ul#galleryList li span ovenfor i CSS kodene. Der er det viktig at span blir satt til display: none for å skjule elementet fra starten av. Uten dette er det nesten ingen poeng med artikkelen.

Her ser vi stylingen av span, når pekeren er over li vil span vises. Dette setter vi med display: block. Her er det viktig med !important bak display-verdien. Dette er for den skal overskrive den gamle verdien, særlig med tanke på at vi må supplere med JS og legge til en klasse i LI elementet onmouseover. Det er også derfor vi har li.activeHover span klasse settingen. For at IE støtter ikke psuedoen hover på element bortsett fra a-elementet. Derfor: Husk !important. Right og bottom har jeg forklart ovenfor, for å sette den absolutte posisjonen helt nederst til høyre av li-elementet. Derfor vi satte bredde og høyde tidligere.

Vi vet at dette skal være øverst. Derfor setter vi z-index til det høyeste tallet, i dette tilfellet 3. Ellers har vi mye trivielle ting som kun skal style opp i dette tilfellet. Det er jo viktig at det ser bra ut! Padding, background og cursor er slike ting. Cursor er satt til pointer for å fjerne den tekst musepilen som kommer over span når det ikke er en link der.

Når det gjelder * html .activeHover span, * html ul#galleryList li:hover span. Så er dette igjen på grunn av den dumme nettleseren gjerne kalt IE. Vi har en margin og padding feil IE, så uten denne vil span feltet ligge 2 px under LI elementet.

Komplett CSS kode

Da er galleriet ferdig. Den komplette CSS koden ser slik som dette ut:

Men som du husker har vi også en navigasjon vi skal bruke. Den kommer jeg ikke til å gå noe særlig igjennom, og vi får kalle det hjemmestudie!

JavaScript kompenseringer...

Vi vet at IE (og andre nettlesere) ikke støtter psuedotypen hover på andre element enn a. Så hva skal vi gjøre? Vi må slenge sammen noe JS som gjør dette for oss, ved å bruke funksjonene onmouseover og onmouseout. JavaScriptet kan se ut slik som det her:

Avslutting

Så da er vi i mål. Det er litt rotete på slutten her. Særlig med linjebrudd i kodene. Derfor er det her siste eksempel som viser hvordan det ser ut! Da er det bare til å kopiere kodene fra index-filen!

Lykke til med galleriet deres! Skriv gjerne respons i kommentarfeltet.