Header und Footer Hintergund, breiter als Layout

[Cristal]

Hallo,

Ich habe eine Layoutbreite von 960px welche ich zentriert habe.

Ich möchte jedoch im Header und Fotter einen Hintergrund der breiter ist als die 960px

Siehe Bilde



Wie kann ich das umseten?

Liebe Grüße

Cristal

[tblumrich]

Ganz einfach. Gib dem Layout = #wrapper (unter Seitenlayout) keine Breite!

Den Rest regelst du per eigenem CSS. Z.B. gibts du dann nur deinem #container die 960px Breite und zentrierst ihn.

Gruß
Thomas

[Cristal]

Funktioniert dann das Grid-System noch ?

[tblumrich]

Warum sollte es nicht. Du hast doch jede Menge DIVs. Die Hauptboxen haben alle z.B. noch ein .inside.

Gruß
Thomas

[Cristal]

Ausgezeichent!

Ich hab jetzt Gesamtbreite aus dem Seitenlayout entfernt und

#container

#Header .inside

#Footer .insde

eine Breite von 960px gegeben und margin Links & Rechts auto.

Soweit hervoragend!

Ein kleines Problem habe ich jedoch noch. Der Titel meiner Seite ist als Modul "Eigener HTML-Code" im Header eingebunden. Diesem würde ich gerne die breite g4 zuteilen. Leider kann ich im Modul "Eigener HTML Code" keine Möglichkeit entdecken dies einzutragen. Für gewöhnlich kann man in den Experten-Einstellunge eine CSS-ID/Klasse angeben. Dies fehlt im HTML Modul

Habt ihr eine Lösung?

[Maik]

Hi,

wenn das eigener HTML Code ist, dann kannst Du Deinen Titel doch mit einem div umschliessen und diesem die Klasse g4 mitgeben

<div class="g4">SEITENTITEL</div>

[magicsepp]

<h4 class="g4">Seitentitel<h4> 

reicht

[Cristal]

hervoragend

[Cristal]

Ich nochmal,

Wo schreib ich den die Klasse hin wen ich ein Bild verwende?

Das ist mein Code:

<a href="http://www.united-warlords.de/">
<img src="tl_files/themes/theme_lord/logo.png">
</a>

und das mein kläglicher Veruch

<a class=g4 href="http://www.united-warlords.de/">
<img src="tl_files/themes/theme_lord/logo.png"/>
</a>

Was hab ich den falsch gemacht?

Liebe Grüße

Cristal

[tblumrich]

Die Anführungszeichen um deinen Klassennamen fehlen.

Gruß
Thomas

[Ulrich]

Eine andere Möglichkeit, Header und Footer breiter zu gestalten, wäre die Modifikation des Templates (fe_page). Man setzt einfach Header und Footer vor bzw. hinter den Wrapper. Dann kann man die Breite des Wrappers wie üblich im Layout konfigurieren ...

[Cristal]

Hallo Thomas, und alle andern

auch die Anführungszeichen haben nicht den gewünschten Effekt erbracht

<a class="g4" href="http://www.united-warlords.de/">
<img src="tl_files/themes/theme_lord/logo.png" id="logo" />
</a> 

Ich habe es vorläufig so umgesetzt

<p class="g4">
<a href="http://www.united-warlords.de/">
<img src="tl_files/themes/theme_lord/logo.png" id="logo" />
</a> 
</p> 

Ist sicher nicht die korrekte Lösung aber es funktioniert.

Liebe Grüße

Cristal

[mike_mcfly]

Ahoi,

also wenn der Container, header.inside und der footer.inside eine von Dir angegebene Breite haben, setzt Du im CSS die Bilder in den Hintergrund:

#wrapper {background: url(../images/hintergrundbild_wrapper.jpg) no-repeat 50% 0;
#header {background: url(../images/hintergrundbild_header.jpg) no-repeat 50% 0;
#footer {background: url(../images/hintergrundbild_wrapper.jpg) no-repeat 50% 0;

Kleiner Tipp: große Hintergrundbilder nie im Contentbereich einsetzten!