Arbeiten mit Column

Zunächst einmal, was sind column? Als column bezeichnet man in der html Sprache Spalten, diese könnten genauso, Bereich oder Abschnitt heissen. In der Programmiersprache verwendet man jedoch meist englische Begriffe. Column sind also Bereiche auf einer Webseite. Also angenommen man hat eine Homepage die eine Breite von 1000 Pixeln hat. Nun könnte man die 1000 Pixel in vier column´s teilen. Dafür müsste man einfach die Bereiche mit sogenannten div´s (Definitionen) festlegen.

Als Beispiel:

1000 Pixel geteilt durch vier sind je 250 Pixel. Also legt man vier div´s an mit col-250. Dieses lässt man dann links floaten. Eines der vier nennt man col-250-last, als letztes und lässt es rechts floaten.

Muster:

<div class="col-250">
<p>Hier der Text für diese column</p>
</div>


<div class="col-250">
<p>Hier der Text für diese column</p>
</div>


<div class="col-250">
<p>Hier der Text für diese column</p>
</div>


<div class="col-250-last">
<p>Hier der Text für diese column</p>
</div>

Die CSS hierfür wäre dann:

.col-250 {
	float: left;
	width: 250px;
                
}

.col-250-last {
	float: right;
	width: 250px;
}

Sozusagen können die 1000 Pixel einer Webseite in beliebig viele Bereiche (column´s) aufgeteilt werden.

Webseiten an sich bestehen ja immer aus Bereichen die mit div´s gestaltet werden. Div für container, wrapper, left, right u.s.w. Viele Webdesigner legen Bereiche wie sidebar schon von beginn an fest, um letzten News, Twitter und co zu zeigen. Mit column´s ist die Gestaltung frei und kann immer individuell eingesetzt werden. Die 1000 Pixel einer Page müssen halt dann in möglichst viele Bereiche geteilt werden um eine große Auswahl an Darstellungsmöglichkeiten zu bieten.

Columns für Websitebaker

Das Content Management System Websitebaker ist auf PHP Basis und Inhalte werden mit einem Editor in die Webpage eingefügt. Die meisten WB User verwenden den HTML-Editor wo Schriftarten, Bilder und weiteres per Klick auf einem Icon eingefügt und gestaltet werden können. Erfahrene WB-User verwenden nicht den herkömmlichen Editor sondern schalten diesen in den Optionen aus. Was bleibt ist ein reines Feld in dem man HTML Codes schreiben muß.

Vorteile:

Der herkömmliche Editor setzt immer ein Klammer p /Klammer bei Texten ein, ohne – kann man selbst bestimmen ob nun ein p sein soll oder nicht, was sich in anderen Bereichen oft auch Seo-Technisch auswirken kann. Zu viele unnötige Klammern und Codemüll bedeutet auch längere Ladezeiten.

Nachteile:

Man sieht nicht was man gemacht hat und muss halt HTML können! Sozusagen müssen alle Codes für das Einfügen in reinem HTML im Kopf eines Webdesigners sitzen.

Editor und Abschnitte

Wer die Columns nicht über HTML im Editor schreiben möchte, muss halt Blöcke bauen. In der Anwendung müssen dann Abschnitte angelegt werden und diese müssen natürlich vorher in der info.php auch stehen. Beim befüllen einer Seite sind somit vier Abschnitte zu erstellen. Abschnitt 1 wäre dann col-250-1. Abschnitt zwei – col-250-2. Die Bezeichnungen -1, -2, -3 und -last, sind nur zur Orientierung für die Abschnitte wenn diese im Backend unter Abschnitte verwalten erstellt werden.

Zunächst mal die index.php.

Für eine Column brauchen wir ein div, also:

<div id="col-250">
<?php page_content(2); ?>
</div>
<div id="col-250">
<?php page_content(3); ?>
</div>
<div id="col-250">
<?php page_content(4); ?>
</div>
<div id="col-250-last">
<?php page_content(5); ?>
</div>

Nun kommt die info.php:

$block[2]='col-250-1';
$block[3]='col-250-2';
$block[4]='col-250-3';
$block[5]='col-250-last';

Die CSS hierfür wäre dann:

.col-250 {
	float: left;
	width: 250px;
                
}

.col-250-last {
	float: right;
	width: 250px;
}

Wichtig!

Für alle Columns muss am Ende ein clearing stehen. Das clear macht sozusagen einen Schlussstrich unter alle Bereiche. Danach können weitere Bereiche oder Content angelegt werden.

<div class="clearing"></div>

CSS für clearing:

.clearing {height: 1px;clear: both;}

Hier ein Muster:
Das Template Starlight, was auch für das WebsiteBaker CMS ist, hat wie auch weitere Premium Templates von Combosa columns eingebaut.

Demo

Template kaufen?