Im Folgenden geht es nicht darum, ein WordPress-Theme auszuwählen, sondern die CSS-Stile innerhalb Ihres aktuellen Themes zu finden. Oft tritt ein Problem in einem Teil des Layouts oder der Vorlage auf. Zum Beispiel gibt es einen Rand zwischen dem Seitenleistenmenü und dem Rest der Seite, den Sie nicht haben wollen. Sie suchen und suchen, aber Sie können keinen Hinweis auf den Rahmen finden. Was nun?

CSS-Detektiv spielen

Lassen Sie uns zunächst CSS-Detektiv spielen. Sie wissen, wo das Problem liegt, Sie können es nur nicht finden. Im obigen Beispiel müssen Sie nach einem fehlerhaften Rand suchen.

Beginnen Sie, indem Sie eine generierte Seite (oder Testseite) sorgfältig untersuchen und nach einem identifizierenden Text in der Seitenleiste in der Nähe des fehlerhaften Randes suchen. Nehmen wir an, Sie haben in der Seitenleiste einen Beitrag mit dem Titel „Alles über Harry“ aufgeführt. Sie wissen, dass Sie diesen Titel in der Seitenleiste finden, wenn Sie den Quellcode der Seite anzeigen.

Um den Quellcode einer Seite anzuzeigen, gehen Sie zur Menüleiste Ihres Browsers und wählen Sie ANSEHEN > QUELLEN DER SEITE oder ANSEHEN > QUELLEN. Es öffnet sich eine Seite mit dem Quellcode der Seite.

Verwenden Sie Ihr praktisches Suchwerkzeug, Strg+F, um Ihre Suche zu aktivieren. Geben Sie „all about harry“ ein und klicken Sie auf FINDEN. Wenn Sie die Worte „Alles über Harry“ nicht in Ihrem Beitrag haben, werden Sie wahrscheinlich zur ersten Anzeige des Begriffs „Alles über Harry“ in Ihrer Seitenleiste geführt. Wenn dies nicht der Fall ist, drücken Sie erneut auf FINDEN, bis Sie den richtigen Ausdruck im richtigen Bereich gefunden haben.

Wenn Sie den Internet Explorer verwenden, können Sie alternativ die Internet Explorer-Entwickler-Symbolleiste verwenden, mit der Sie die Elemente, IDs und Klassen auf der Seite visuell anzeigen und auswählen können. Sie zeigt die Elemente in der Hierarchie der Seite und ihre CSS-Attribute an und kann DIVs, Tabellen usw. umreißen. Sie können die Symbolleiste von Microsoft herunterladen.

Wenn Sie die Phrase gefunden haben, ist es an der Zeit, CSS-Detektiv zu spielen. Suchen Sie im Code des Satzes „All About Harry“ nach einem von zwei Dingen. Er wird in etwa so aussehen, mit Begriffen wie sidebar, menu oder sidecolumn:

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

Dies ist der Hauptabschnitt, der Ihr Seitenleistenmenü enthält. Sie haben den ersten Verdächtigen gefunden.

Öffnen Sie nun Ihre style.css-Datei und suchen Sie erneut nach sidebar oder nach dem Namen, den Sie entdeckt haben. Normalerweise gibt es dafür zwei Möglichkeiten:

#sidebaror.sidebar

Schauen Sie in den Stilen unter diesen CSS-Selektoren nach, ob dort border erwähnt wird, was oft etwa so aussieht:

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

Das ist der Verbrecher: border! Wenn es sich um den Schuldigen handelt, löschen Sie den Verweis auf die Umrandung, und Sie können loslegen.

Wenn nicht, geht die Jagd weiter.

Manchmal ist der Schuldige der, den Sie am wenigsten vermuten. Vielleicht wird der Rand nicht durch den offensichtlichen Verdächtigen, die Seitenleiste, verursacht, sondern durch den Inhaltsbereich. Kehren Sie zum generierten Seitenquelltext zurück und suchen Sie nach den ersten Worten Ihres Beitrags. Suchen Sie darüber nach etwas wie:

<div>

Es könnte content, page. post, maincolumn, widecolumn oder einen anderen Alias haben, aber es sollte der CSS-Container sein, der Ihre Beitragsinformationen enthält. Kehren Sie nun zum Stylesheet zurück und überprüfen Sie, ob in diesem Abschnitt ein Rahmen vorhanden ist.

Risiko für das Stylesheet

Wenn all dies fehlschlägt, gibt der CSS-Detektiv die Jagd nie auf. Kehren Sie zum Versteck aller Stile zurück, der Datei style.css, und filzen Sie sie, indem Sie nach „border“ suchen und sich jeden Verdächtigen genau ansehen. Notieren Sie sich den Namen der Selektor-ID, z. B. „sidebar“, „menu“, „content“ und „page“, und gehen Sie dann zum generierten Seitenquelltext zurück, um zu sehen, ob es sich dabei um den Übeltäter handelt.

Sie können auch den verdächtigen „border“, den Sie in der Stilvorlage gefunden haben, markieren und in eine TXT-Datei (z. B. Notepad) ausschneiden und einfügen, die Sie auf Ihrem Computer wie einen Notizblock geöffnet haben. Notieren Sie sich den Namen des Selektors, aus dem Sie ihn entfernt haben, etwa so:

Removed border: solid 2px green from #content

Speichern Sie dann die bearbeitete style.css und laden Sie sie auf Ihre Website hoch. Aktualisieren Sie den generierten Testbeitrag und prüfen Sie, ob der unerwünschte Rahmen verschwunden ist. Wenn ja, haben Sie den Übeltäter gefunden. Wenn nicht, kehren Sie zum Notepad zurück, kopieren Sie den Code und fügen Sie ihn wieder in Ihre style.css im Abschnitt „content“ ein, so dass alles wieder so ist, wie Sie es vorgefunden haben.

Wenn Sie den Übeltäter gefunden haben, führen Sie ein kleines Tänzchen auf, jubeln Sie und machen Sie andere misstrauisch und nervös, wenn sie in Ihrer Nähe sind. Der CSS-Detektiv löst ein weiteres CSS-Verbrechen!

Mehr Hilfe zur CSS-Fehlerbehebung

  • CSS-Fehlerbehebung im Browser
  • CSS-Fehlerbehebung