Mehrere Fragen

**lilly263** · 14.10.2012, 16:06

Hallo,

ich bin ein ziemlicher Anfänger und habe ein paar Fragen - ich hoffe ihr könnt ihr mir helfen!

1. Überschrift mit Hintergrundgrafik
Alle Überschriften auf der Seite möchte ich auf eine Art "Tag" stellen. Die Breite soll sich natürlich automatisch an die Länge der Überschrift anpassen. Ich hätte gedacht, man schneidet dafür die Hintergrundgrafik in 3 Teile: links, rechts, mitte. Die mittlere Grafik kann man ja der Überschrift als gekachelte Hintergrundgrafik mitgeben. Aber wie bringe ich jetzt die Teile links und rechts an die Überschrift?

2. Meine Navigation soll auf einem grünen Hintergrundstreifen (horizontal) stehen. Dieser Hintergrund soll nicht nur die Breite der Webseite haben sondern immer über die Gesamte Browserbreite gehen. Wie stelle ich das denn an?

3. Die Homepage soll einen anderen Hintergrund bekommen und auch andere Maße was den Header betrifft. Kann man der Homepage ein komplett eigenes css zuweisen?

VIELEN VIELEN DANK schon mal für eure Hilfe!!!!

**jubel** · 14.10.2012, 16:30

1. Überschrift mit Hintergrundgrafik
Da gibt es sicher verschiedene Möglichkeiten. Eine davon wäre z.B. :before und :after zu nutzen.

2. grüner Hintergrundstreifen über die gesamte Breite
So etwas kann man z.B. lösen, wenn man dem äußeren Element 100% Breite gibt und dem inneren Element (also der eigentlichen Navigation) weniger.
Genau Tipps sind am "lebenden" Beispiel sicher einfacher zu geben.

3. Kann man der Homepage ein komplett eigenes css zuweisen?
Mit Homepage meinst du jetzt sicher die Startseite? Ja, das ist kein Problem über ein eigenes Seiten-Layout.
Um nur einen anderen Hintergrund zu haben, brauchst du allerdings kein komplett eigenes CSS, sondern nur einen anderen Background für eine Klasse "homepage".

**lilly263** · 14.10.2012, 17:13

1. Überschrift mit Hintergrundgrafik
-> So habe ich das auch schon gedacht. Aber ich bekomme es nicht hin. Ich habe einen neue Definition für die Überschrift gemacht, für die es sein soll
h2:before
Hier habe ich dann versucht einerseits nur mit einem Hintergrundbild zu arbeiten was nicht ging, oder unten bei eigener Code: content:url(tl_files/...)" ";, was aber auch nicht geht. Hier wird mir das Bild nicht angezeigt, nur ein blaues Fragezeichen obwohl das Bild hochgeladen ist. Was mache ich falsch?

2. grüner Hintergrundstreifen über die gesamte Breite
Lebendes Beipiel hierfür gibt´s leider erst auf meinem Computer.
Aber meine Navi steht im Header. Der grüne Streifen soll nur unter der Navi liegen und habe ich im css auch schon so definiert. Meiner ganzen Seite habe ich jetzt eine Breite von 100% gegeben. Dem Wrapper die eigentliche Breite von 960 px. Wie stelle ich es jetzt an, dass die Hintergrundfarbe 100% bekommt?

3. Kann man der Homepage ein komplett eigenes css zuweisen?
Ja, Startseite meine ich. Betroffen ist nicht nur die Hintergrundfarbe sonder auch die Headergröße. Auf der Homepage haben wir ein viel größeren Header und teilweise auch andere Farben weil eben die Hintergrundfarbe anders ist. Ist es da besser, ein eigenes CSS zu schreiben? Und wenn ja, wie weise ich das zu?!?

**ciaobello** · 14.10.2012, 17:56

Schau doch mal ein bisschen bei den Freien Themen die Demoseiten an... Falls eine Seite Deiner am nächsten kommt kannst ja mal den Link posten ... so wird es einfacher zu helfen.

**jubel** · 14.10.2012, 18:32

h2:before
Hier habe ich dann versucht einerseits nur mit einem Hintergrundbild zu arbeiten was nicht ging, oder unten bei eigener Code: content:url(tl_files/...)" ";, was aber auch nicht geht. Hier wird mir das Bild nicht angezeigt, nur ein blaues Fragezeichen obwohl das Bild hochgeladen ist. Was mache ich falsch?

Wenn du das Hintergrundbild unter eigener Code definierst, musst du den Pfad anpassen, deshalb kommt auch das blaue Fragezeichen.
Einfacher ist es, wenn du das Hintergrundbild oben definierst. Zusätzlich musst du aber unter eigener Code einen Content reinschreiben, z.B.

Code:

content: "";

und dem ganzen genug padding geben, z.B.

Code:

padding-left:15px;

Dem Wrapper die eigentliche Breite von 960 px. Wie stelle ich es jetzt an, dass die Hintergrundfarbe 100% bekommt?

Gib dem Wrapper 100% und dem Header .inside die gewünschte Breite. Dann kannst du header unabhängig davon eine Hintergrundfarbe für die ganze Breite geben.

Auf der Homepage haben wir ein viel größeren Header und teilweise auch andere Farben weil eben die Hintergrundfarbe anders ist. Ist es da besser, ein eigenes CSS zu schreiben? Und wenn ja, wie weise ich das zu?!?

1. Du weist in der Seitenstruktur der Startseite eine Klasse zu, z.B. "homepage"
2. Dann kannst du im CSS für diese Seite eigene Farben usw. vergeben, z.B.

Code:

.homepage header h1 {
color: #fff;
... }

**lilly263** · 15.10.2012, 09:38

oh je. Ich bekomme es einfach nicht hin.

Ich hab jetzt den Aufbau meines Layouts angehängt, damit man sich das besser vorstellen kann.
Die Webseite soll wie gesagt ne Gesamtbreite von 960px / zentriert haben.
Im Moment habe ich Navigation und Logo im Header. (Bildbereich habe ich noch nicht eingebaut.) Vielleicht ist das auch ungeschickt und ich sollte die Seite anders aufbauen?

Wenn ich beim #wrapper 100% eingebe, dann geht meine Seite über die komplette Browserbreite.

Kann mir jemand für Dummies erklären, wie ich das am besten anstelle?

1000 Dank!!!

**corticelli** · 15.10.2012, 11:05

Zu deiner letzten Frage: das ist so ziemlich exakt der Standardfall, den der Layoutbuilder von Contao Dir anbietet.
Einfach im Seitenlayout ganz unten "statisches LAyout" > "Breite 960" > "Ausrichtung zentriert".

Wenn Du es unbedingt "zu Fuß" willst: #wrapper width auf 960px, left- und rightmargin auf auto;