Het volgende gaat niet over het kiezen van een WordPress Thema, maar over het vinden van de CSS stijlen binnen uw huidige Thema. Vaak doet een probleem zich voor in een deel van de layout of template. Bijvoorbeeld, er is een rand die u niet wilt tussen het zijbalk menu en de rest van de pagina. U jaagt en jaagt maar u kunt geen verwijzing vinden naar de rand. Wat nu?

Playing CSS Detective

Laten we beginnen met CSS detective spelen. Je weet waar het probleem zit, je kunt het alleen niet vinden. In het bovenstaande voorbeeld moet u op zoek naar een foutieve rand.

Begin met het zorgvuldig onderzoeken van een gegenereerde pagina (of testpagina) en zoek naar enige identificerende tekst in de zijbalk, in de buurt van de foutieve rand. Stel dat je in de zijbalk een post hebt met de titel “Alles over Harry”. Je weet dat je die titel in de zijbalk zult vinden als je de broncode van de pagina bekijkt.

Om de broncode van een pagina te bekijken, ga je naar de menubalk van je browser en kies je VIEW > PAGE SOURCE of VIEW > SOURCE. Een pagina zal verschijnen met de broncode van de pagina.

Gebruik je handige detective tool, Ctrl+F, om je zoekopdracht te activeren. Typ in “alles over Harry” en klik op ZOEKEN. De kans is groot dat, tenzij je de woorden “alles over Harry” in je bericht hebt staan, het je naar de eerste vertoning van de zin “alles over Harry” brengt, die waarschijnlijk in je zijbalk staat. Als dat niet het geval is, druk dan opnieuw op ZOEKEN totdat je de juiste zin in het juiste gebied hebt gevonden.

Als je Internet Explorer gebruikt, is een alternatieve methode het gebruik van de Internet Explorer Developer Toolbar, waarmee je de elementen, ID’s en klassen op de pagina visueel kunt zien en selecteren. Het toont de elementen binnen de hiërarchie van de pagina, hun CSS attributen, en kan DIVs, tabellen, enz. omlijnen. U kunt de Toolbar downloaden van Microsoft.

Als u de woordgroep hebt gevonden, is het tijd om CSS detective te spelen. Zoek in de code van de zin “Alles over Harry” naar een van de twee dingen. Het zal er ongeveer uitzien als een van deze, met woorden als sidebar, menu, of sidecolumn:

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

Dit is de hoofdsectie die je sidebar menu bevat. Je hebt de eerste verdachte gevonden.

Nu, open je style.css bestand en doe nog een zoekopdracht voor sidebar of wat de resulterende naam ook was die je ontdekte. Het wordt meestal geïdentificeerd op twee manieren:

#sidebaror.sidebar

Kijk in de stijlen onder deze CSS selectors en zie of er een vermelding van rand is, vaak op zoek iets als dit:

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

Daar is je rand, de crimineel! Als dit de schuldige is, verwijder dan de verwijzing naar de rand en je bent goed om te gaan.

Als dat niet zo is, gaat de jacht verder.

Soms is de boosdoener degene die je het minst vermoedt. Misschien wordt de rand niet veroorzaakt door de voor de hand liggende verdachte, de zijbalk, maar door de inhoudssectie. Ga terug naar de gegenereerde pagina broncode en zoek naar de eerste woorden van je bericht. Zoek daarboven naar iets als:

<div>

Het zou content, page. post, maincolumn, widecolumn kunnen heten, of een andere alias kunnen hebben, maar het zou de CSS container moeten zijn die je post informatie bevat. Ga nu terug naar het stijlblad en kijk of er een rand is in die sectie.

Risico van het stijlblad

Als dit allemaal mislukt, geeft de CSS detective de jacht nooit op. Ga terug naar de schuilplaats van alle stijlen, het style.css bestand, en fouilleer het door te zoeken op “border” en kijk zorgvuldig naar elke verdachte. Noteer de selector ID naam, zoals sidebar, menu, content en page, en ga dan terug naar de gegenereerde pagina bron om te zien of dat misschien je boosdoener is.

Je kunt ook de border verdachte selecteren die je hebt gevonden in het style sheet en knip en plak het in een TXT bestand (zoals Notepad) dat gewoon open op je computer staat als een kladblok. Noteer van welke selectornaam je het hebt verwijderd:

Removed border: solid 2px green from #content

Sla vervolgens de bewerkte style.css op en upload het naar je site. Ververs de gegenereerde test post en kijk of de ongewenste rand weg is. Zo ja, dan heb je de boosdoener gevonden. Zo niet, ga dan terug naar het kladblok en kopieer de code en zet het terug in je style.css in de “content” sectie, en zet alles weer terug waar je het gevonden hebt.

Als je de boosdoener gevonden hebt, doe dan een klein dansje, gil en juich, en maak anderen achterdochtig en nerveus als ze bij je in de buurt zijn. De CSS detective lost weer een CSS misdaad op!

Meer CSS Problemen Oplossen Hulp

  • CSS Browser Bugs Oplossen
  • CSS Problemen Oplossen