Blog-Technik: Einbau von Tabellen und Übersichten.

Einbau von Tabellen in den Textbereich eines Blogs

Hallo,

Da es mir ja ein Anliegen ist, Ihnen auch die Technik zu zeigen, will ich auf die beiden Blog-Menüs „Literatur“ und „eBooks“ oben näher eingehen:

Durch Betrachten des Quelltextes der Seite können Sie mir bestimmt folgen, denn jeder Browser hat m.W. eine Quelltextanzeige!.

Alle Menüs sind als Blog-Seiten aufgebaut. Sie sind mit WordPress geschrieben. Im Editor wurde aber fast ausschließlich der HTML-Teil benutzt. Und da kommt es zu ein paar Kniffeligkeiten!

Der Editor im normalen WordPress ist nicht unbedingt der beste! Beim Wechsel von HTML nach Visuell unternimmt das Programm oftmals Optimierungen, die nicht optimal sind. So fliegen z.B. <div> </div> Anweisungen ganz raus. Absätze werden nicht eingehalten. Somit konnte ich mir nur mit einer Anpassung im Source des WordPress behelfen.

Aber keine Angst: Es ist nur das dem Theme unterliegende CSS. Nur durch Einführung einiger eigener Klassen, war es möglich, das Layout wie eine Art Bildergalerie aussehen zu lassen. Dafür habe ich die CSS erweitert.

In meinem Theme gibt es unter wp-content/themes/dig-3-col/ die CSS Datei style.css. Diese ist zuständig für die Darstellung des Blogs. Um nun meine CSS-Klassen aufzunehmen habe ich die CSS um folgendes erweitert:

/*-------------------- SyBeKlue --------------------------------*/
.horspace10 {margin-top:10px }
.horspace20 {margin-top:20px }
.horspace30 {margin-top:30px }

table.mytab {padding:0;margin:0;
             padding-left:1px;
             width:100%;
           }
.mytabHRow {background-color: #E0FFC0;
            margin-left:1px;
           }
.mytabHContent { font-family: Verdana, Arial,sans-serif;
                 padding-top:5px; font-size: 10px;
                 background-color: #E0E0E0;
                 color: #336699;
                 font-weight:normal
              }
.mytabRow { background-color: #FFFFFF;
            margin-left:1px;
          }
.mytabContent { font-family: Verdana, Arial,sans-serif;
                padding-top:5px;
                font-size: 10px;
                background-color: #FFFFFF;
                color: #336699;
                font-weight:normal
             }
.cod {font-family: Courier New;
      font-size: 12px;
      color:blue
     }

Damit habe ich meine Klassen definiert, die ich im Menü benutze, um eine Bildergalerie aufzubauen. Wenn Sie sich jetzt mal die Seite des Menüs “eBook” im Quelltext anschauen, sehen Sie die Tabellen im HTML-Format. Ich versuchte es erst ohne diese Klassen, und der Editor machte mir einen dicken Strich durch die Rechnung.

HINWEIS: Wie finden Sie Ihre .css-Datei, die Sie anpassen müssen? Nun, indem Sie sich den Quellcode Ihres Blogs anschauen <strg>U im Firefox. Suchen Sie nach einer .css-Datei im HTML-Header und schon haben was!

Es ist sowieso besser, wenn man derartige Tabellen definiert, diese in einem Editor zunächst zu schreiben (ggf. geht auch NVU), und sie dann vom Editor in den HTML-Teil des WordPress-Editors einzukopieren.

Für die eBbook-Anzeige (Blog-Seite) habe ich auf HTML-Tabellen verzichtet und die Aufteilung mit CSS gemacht. Dafür müssen Sie aber auch das style.css weiter ausweiten. Sie müssen die Dinge floaten lassen: Die neu hinzugekommenen CSS-Anweisungen sind:


.sbk_line {margin:0;padding:0;margin-top:5px; width:100%}
.sbk_imgright { float:right; margin-top:0px;  margin-right:0px;
                margin-left:10px;  padding:5px;}
.sbk_line50 { float:left;margin-top:0px;  margin-right:10px;
                margin-left:10px;  padding:3px; width:44%}
.sbk_imgleft { float:left;  margin-top:0px;  margin-right:10px;
               margin-left:10px;  padding:3px;}
.sbk_p {float:left;  margin-top:0px;  margin-right:10px;
        margin-left:10px;  padding:3px;
        font-family: Verdana, Arial,sans-serif;
        color:#336699 !important; font-weight:bold;}
.sbk_clear {clear: both;}

Schauen Sie sich die Quelltexte der beiden Seiten an, dann werden Sie den Unterschied merken.

Grüße

Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar