Seitentitel im Kopfbild anordnen

Normalerweise wir der Seitentitel einer Seite innerhalb des Hauptinhalts als Überschrift 1 oben angezeigt. Mit ein wenig CSS-Code ist es möglich, den Seiten-Titel im Kopfbild der Seite anzuzeigen. Nachfolgend zeigen wir das Vorgehen beispielhaft für die Design-Familie tylium.

tylium_beta_960

tylium_beta_960: Titel im Header

Und so geht's

CSS-Code für die Registerkarte Global

Dieser Code verschiebt den Seitentitel in das Kopfbild auf der Seite.

Damit das funktioniert, versehen wir das Div für den Hauptinhalt (#centerContent) mit der Anweisung position: relative. Anschliessend lässt sich der Seitentitel absolut positionieren: wir schieben den Titel durch die negative Positions-Angabe an die gewünschte Stelle.

Hinterlegen Sie diesen Code am besten im globalen CSS-Code für das Projekt auf der Registerkarte Global.
#centerContent {
    position: relative;
}

.pageTitle {
  border: 0 none;
  position: absolute;
  top: -165px;
  z-index: 100;
  width: 700px;
}
Für Seiten mit eingeschalteter linker Spalte funktioniert dies tadellos. Sobald wir aber die linke Spalte ausschalten, landet der Seitentitel zu weit links über dem Logo.

Der Grund ist einfach: der oben stehende CSS-Code verschiebt den Titel nur in der vertikalen nach oben; die horizontale Position ergibt sich aus der Position des Hauptinhalts auf der Seite. Damit rutscht der Titel zwangsläufig nach links, da ja bei ausgeschalteter linker Spalte der Hauptinhalt weiter links zu liegen kommt.

Hier kommen nun die Ausbaustufen ins Spiel (vgl. Eigenen CSS-Code für ein Projekt hinterlegen): weblica erlaubt es uns, CSS-Code für jede Ausbaustufe zu hinterlegen. Damit können wir den Titel gezielt an die richtige Position schieben, wenn die linke Spalte nicht aktiv ist.

CSS-Code für die Registerkarten "Ausbaustufe Rechts" & "Minimale Ausbaustufe"

Hierzu hinterlegen wir den nebenstehenden CSS-Code:
  • Ausbaufstufe Rechts = Hauptinhalt und 
  • Rechte Spalte aktivMinimale Ausbaustufe = Nur Hauptinhalt aktiv.
.pageTitle {
    margin-left: 220px;
}
tylium_beta: Titel im Kopfbild ohne aktive linke Spalte

Vorgehen für andere Designs

Die obigen Ausführungen gelten analog auch für andere Designs und insbesondere für das Design  tylium_alpha. Die vertikale Position innerhalb des Kopfbilds können Sie durch andere Pixel-Angaben für top Ihren Wünschen anpassen:
  • eine grösserer negativer Wert schiebt den Titel weiter nach oben.
  • ein kleinerer negativer Wert schiebt den Titel weiter nach unten.