Hvis man – som jeg – som jeg af og til ændrer lidt på et tema, kan det hænde, at et tema ikke længere vises helt korrekt. Det sker også, at et tema ikke vises korrekt, fordi man ikke kan forudsige alt, eller fordi temadesigneren ikke har tænkt på alt.
Jeg bruger for tiden Vladimir Prelovacs Amazing Grace-tema. Men det undrede mig, at de billeder, jeg satte ind og bad om at få centreret, blev vist venstrejusteret. Jeg forsøgte mig først med en class-angivelse og en tilhørende beskrivelse i css-filen. Jeg læste dernæst et forslag på WordPress.dk’s forum. Men det hjalp faktisk heller ikke.
Et uundværligt redskab
Så installerede jeg Firebug. Det er en udvidelse til Firefox. Den bør alle, der arbejder med sin blog, benytte, synes jeg. Hvis man også installerer IE Tab eller IE Tab Plus til FF 3.6+, kan man ved at trykke på en knap i ens statuslinje skifte fra Firefox til Internet Explorer uden at forlade Firefox. Man kan altså se, hvordan ens side ser ud i Internet Explorer. Men tilbage til Firebug.
Firebug giver mulighed for at inspicere ens eller andres internetsider og f.eks. se, hvilke styles et givet elment er påvirket af. Det er vigtigt, fordi CSS jo betyder Cascading Style Sheets. Meget, meget groft sagt betyder det, at et element påvirker alle de elementer, det selv indeholder. De designvalg, der træffes for BODY, gælder også for de elementer, der vises på denne side. Hvis ikke det var tilfældet, ville man skulle angive uendelig mange indstillinger. Der er dog undtagelser. Firebug viser, hvilke styles et givet element påvirkes af.
Konkret havde jeg som nævnt et problem. Mine illustrationer ville ikke centrere. Det så sådan her ud:
Problemet
Det var mærkeligt, for der var faktisk en class-definition, og den burde jo trumfe almindelige indstillinger. Jeg har ikke illustreret dette, da jeg har slettet denne class igen i mine links.
Jeg sad og kørte rundt med musen, for hvis jeg genindlæste siden, kunne jeg faktisk se illustrationerne placere sig midt på siden, for med det samme at trykke ud til venstre margin. Det havde givet mig en mistanke om, at der måtte være en venstremargin defineret et sted. Jeg havde søgt i Firebug, men fandt ikke nogen. Men CSS betyder jo, at den kan være der alligevel, blot nedarvet. Der måtte også være et element, jeg ikke lige kunne se, for billede og tekst havde egne sektioner i CSS-filen, men de fulgtes jo alligevel ad. Også med bevægelsen fra midten og til venstremargin.
Endelig så jeg en ramme, da jeg havde trykket “Inspicér” i Firebug og kørte rundt med musen. Endelig fremhævede Firebug en ramme, som ellers var usynlig. Den er her markeret med blåt.
Den fælles container
Og en nærmere inspektion hjalp mig til at finde løsningen (okay, en smule viden om CSS var heller ikke af vejen).
En container
wp-caption havde en class defineret: .aligncenter, men det hjalp altså ikke. Illustrationen ville til venstremargin (det betyder naturligvis ikke, at illustrationerne har deres egen vilje!). Men når centreringen ikke virker, men overtrumfes af en – må man tro – venstremargins kommando, så ville det jo være fint, hvis en sådan stod der. Det gjorde den ikke. Ikke direkte. Men som det kan ses i den røde fremhævelse, så var der defineret en margin på 10px (eller deromkring; jeg kan have rettet lidt). Når der kun er en værdi, så stilles alle marginer til denne værdi. Altså også venstre. Og løsningen er, at det ikke er sådan, at noget bliver centreret, hvis det er smallere end den plads, margin-værdierne er indstillet til. Hvis matematikken ikke går op, så vil browserne tvinge højremargin til auto. Venstremargin vil altså være stærkere end højre margin.
Margin-indstillingerne
En af de rigtig nyttige funktioner i Firebug er, at man kan ændre i de værdier, man ser, eller tilføje nye properties (‘egenskaber’) og værdier. I det her tilfælde kan man altså teste sin hypotese her og nu og (normalt) se ændringen med det samme. Forudsat igen, at der ikke er andre styles, der overtrumfer den, man forsøger at ændre på. Man kan også klikke foran en egenskab og dens værdi og derved få Firebug/Firefox til at ignorere dem. Jeg har fremhævet med grønt, hvor jeg ændrede værdien “10px” til “10px auto”. Det grå stopskilt viser, hvor man kan få Firebug/Firefox til at ignorere en egenskab og dens værdi(er). Et uhyre nyttigt redskab!
Man kan eksperimentere og se ændringerne her og nu
Med tilføjelsen af værdien “auto”, skal man nu forstå margin-property’en således: Brug 10 pixels margin for oven, auto til højre. Gentag dette for bundmargin og venstremargin. Venstremargin er nu også auto. Browseren vil da tage bredden, der er til rådighed, f.eks. 490 pixels. Indsætte billedet, som f.eks. kan være 300 pixels. Resten på 190 pixels fordeles nu med halvt til venstre- og halvt til højremargin, hvis billedet skal centreres.
Endelig centreret
Naturligvis kan man finde problemet og løsningen uden Firebug. Men det ville nok have taget noget længere tid!
