Det følgende handler ikke om at vælge et WordPress-tema, men om at finde CSS-stilarter i dit nuværende tema. Ofte opstår et problem i en del af layoutet eller skabelonen. Der er f.eks. en kant, som du ikke ønsker mellem sidebarmenuen og resten af siden. Du jager og jager, men du kan ikke finde nogen henvisning til grænsen. Hvad nu?

Lege CSS-detektiv

Lad os begynde med at lege CSS-detektiv. Du ved, hvor problemet er, men du kan bare ikke finde problemet. I ovenstående eksempel skal du gå på jagt efter en fejlagtig kant.

Begynd med at undersøge en genereret side (eller testside) nøje og kigge efter noget identificerende tekst i sidebjælken i nærheden af den fejlagtige kant. Lad os sige, at du i sidebjælken har en indlægstitel, der hedder “Alt om Harry”. Du ved, at du finder den titel i din sidebar, når du ser sidens kildekode.

For at se en sides kildekode skal du gå op i menulinjen i din browser og vælge VIEW > PAGE SOURCE eller VIEW > SOURCE. Der vises en side med sidens kildekode.

Brug dit praktiske detektivværktøj, Ctrl+F, til at aktivere din søgning. Skriv “alt om harry”, og klik på FIND. Medmindre du har ordene “alt om harry” i dit indlæg, vil det sandsynligvis føre dig til den første visning af udtrykket “alt om harry”, som sandsynligvis findes i din sidebar. Hvis ikke, skal du trykke på FIND igen, indtil du har fundet den rigtige sætning i det rigtige område.

Hvis du bruger Internet Explorer, er en alternativ metode at bruge Internet Explorer Developer Toolbar, som giver dig mulighed for visuelt at se og vælge elementer, ID’er og klasser på siden. Den viser elementerne i sidens hierarki, deres CSS-attributter og kan skitsere DIV’er, tabeller osv. Du kan downloade værktøjslinjen fra Microsoft.

Når du har fundet sætningen, er det tid til at lege CSS-detektiv. Kig op gennem koden fra sætningen “Alt om Harry” efter en af to ting. Det vil se nogenlunde ud som en af disse, med ord som sidebar, menu eller sidecolumn:

<div>or<div class="sidebar">

Dette er hovedafsnittet, der indeholder din sidebarmenu. Du har fundet den første mistænkte.

Åbn nu din style.css-fil, og søg igen efter sidebar eller hvad end det resulterende navn var, som du fandt frem til. Det identificeres normalt på to måder:

#sidebaror.sidebar

Kig i styles under disse CSS-selektorer, og se, om der er en omtale af border, som ofte ser nogenlunde sådan ud:

#sidebar {position: relative; float: right; width: 170px; color: blue; font-size: 90%; border-right: solid 1px blue; }

Der er din border, forbryderen! Hvis det er den skyldige, skal du slette henvisningen til border, og så er du klar.

Hvis det ikke er det, fortsætter jagten.

Sommetider er synderen den, som du mindst mistænker. Måske skyldes grænsen ikke den åbenlyse mistænkte, sidebaren, men derimod indholdsdelen. Gå tilbage til den genererede sidekildekode, og søg efter de første ord i dit indlæg. Se over det efter noget i retning af:

<div>

Det kan hedde content, page. post, maincolumn, widecolumn eller have et andet alias, men det bør være den CSS-container, der indeholder dine indlægsoplysninger. Gå nu tilbage til stilarket, og tjek, om der er en kant i det pågældende afsnit.

Forsøg stilarket

Hvis alle disse fejl mislykkes, opgiver CSS-detektiven aldrig jagten. Vend tilbage til skjulestedet for alle stilarter, filen style.css, og gennemsøg den ved at søge efter “border”, og se nøje på hver mistænkt. Noter navnet på selector-ID’et, f.eks. sidebar, menu, content og page, og gå derefter tilbage til den genererede sidekilde for at se, om det kan være din synder.

Du kan også vælge den mistænkte border, som du har fundet i stilarket, og klippe og indsætte den i en TXT-fil (f.eks. Notepad), der bare ligger åben på din computer som en skrabet notesblok. Notér, hvilket selectornavn du har fjernet det fra som her:

Removed border: solid 2px green from #content

Spar derefter den redigerede style.css, og upload den til dit websted. Opdater det genererede testindlæg, og se, om den uønskede kant er væk. Hvis det er tilfældet, har du fundet den skyldige. Hvis ikke, skal du vende tilbage til Notepad og kopiere koden og sætte den tilbage i din style.css i afsnittet “content” og sætte tingene tilbage, hvor du fandt dem.

Hvis du finder din synder, så dans en lille dans, skråle og juble, og gøre andre mistænksomme og nervøse, når de er i nærheden af dig. CSS-detektiven opklarer endnu en CSS-forbrydelse!

Mere hjælp til fejlfinding i CSS

  • CSS-fjernelse af browserfejl
  • CSS-fjernelse af fejl