Seitenlayouts mit und ohne "eigenem Bereich" optisch angleichen

[Summi]

Hallo, ich bins mal wieder.
Ich brüte mal wieder über einem Problem und brauch dringend eure Hilfe. Ich habe in der horizontalen meine Navigation. Bei einigen Links taucht darunter eine Subnavi auf. Bei einigen anderen nicht. Die Subnavi hab ich mit einem eigenen Bereich angelegt. Sprich: Man klickt auf die Seite und kommt auf ein Seitenlayout mit einer weiteren Navi unterhalb des Kopfbereichs.
Mein Problem ist jetzt folgendes:
Auf den Seiten bei denen der eigene Bereich nicht angelegt ist, rutscht der ganze Contentbereich nach. Ich hätte an der Stelle aber gerne Weißraum. Ich hab mal versucht das Ganze grafisch zu veranschaulichen. Ich hoffe man kanns verstehen.

Version 1#############Version 2

header##############header
----------#############-----------
navi################navi
----------#############-----------
subnavi (bei Bedarf)######hier brauch ich Leerraum den ich in px angeben kann
----------#############-----------
content##############content
----------#############-----------
footer###############footer

Die Rauten sind nur Platzhalter. *gg*

Liebe Grüße

[codestorm]

Gib dem Bereich für die Subnavigation eine feste Höhe. In beiden Seitenlayouts den eigenen Bereich definieren und nur in dem Seitenlayout einbinden wo es hin soll oder den Header im Seitenlayout ohne Subnav um die Größe der Subnav erweitern.

[Andreas]

Ich würde ganz ohne eigene Bereiche arbeiten. Pack die Navi und die Subnavi in den Header. Positioniere deine Bilder, Logos, Texte im Header, darunter dann die Navi und darunter dann die Subnavi. Gib dem Header eine feste Höhe, so dass ohne die Subnavi der Platz für die Subnavi freigehalten wird. Wenn sie dann generiert wird erscheint sie dann eben in diesem Freiraum.

Solltest du unbedingt mit eigenen Layoutbereichen arbeiten wollen, mach es so wie codestorm sagt. Du brauchst dann aber nur ein Layout, da das Modul für die Subnavi so eingestellt sein sollte, dass es nur generiert wird, wenn auch Seiten vorhanden sind (startlevel). Sorge dafür, dass zumindest ein leerer Container für die Subnavi erscheint auch wenn sie nicht generiert wird und gib ihm die passende Höhe.

Grüße

[Summi]

Ich habs jetzt mit dem eigenen Bereich hinbekommen. Dabei tut sich ein neues Problem auf. Um das zu verdeutlichen hab ich mal ein Bild gebaut.
screen.jpg

Der obere Kasten mit dem roten Rahmen ist mein Headerbild. Mit allerlei Bildchen. #-) den unteren Bereich hab ich weiß gelassen, dort steht die Subnavi. Da sich der header an die Bildschirmbreite anpasst, hab ich den Hintergrund in der Farbe des Headerbildes angelegt. Jetzt muß ich aber den Versatz wegbekommen. Am einfachsten wäre jetzt ein schmales Bild (oben Farbe, unten weiß). Kann ich in dem Codefeld Code eingeben um noch ein Bild hinter das Headerbild zu legen? Wenn ja wie muss der Code lauten? Ich hab von sowas leider garkeine Ahnung.

[Andreas]

http://de.selfhtml.org/css/eigenschaften/index.htm

Firefox - Firebug

Contao - Handbücher

[Summi]

Die Css-Eigenschaften kenn ich. Damit bin ich ja die ganze Zeit dran.

Firebug nutze ich auch. Ich versteh allerdings nicht in wieweit mir das hier helfen kann.

Ich hab das offizielle Typolight-Handbuch und die DVD "Webseiten erstellen mit Typolight". In beidem find ich keine Problemlösung.

Ich hab jetzt versucht bei #header unter "Eigener Code" ein Bild einzubinden. Egal ob ich jetzt das Headerbild oder das Hintergrundbild in den "Eigenen Code" einbinde, es klappt nicht.
Mit einem Modul hab ich es auch schon versucht. Geht ebenfalls nicht.

[Kayzu]

Binde doch das headerbild einfach in der CSS im Div# Header ein als Background.
Wenn es sowieso immer gleich ist, brauchst Du ja das nicht als eigenen Code da reinzubringen.

Desweiteren solltest Du versuchen per Eigenem HTML das Bild einzubinden kommst du an einer CSS auch nicht vorbei.
Du musst dem Bild ja eine ID mitgeben die wiederrum in der CSS formatiert ist, da du ja ansonsten garkeine Angaben machst wie es dargestellt werden soll.

Ausserdem macht das Einbinden meiner Meinung nach nur Sinn wenn du n Logo overlay hast vor dem Background.

Background immer direkt in der CSS einbinden.

Denke Dir fehlt es im allgemeinen n bissl an den Basics wie CSS und HTML, das hat mit Contao dann ziemlich wenig zu tun.

Und das Firebug Addon benutzt du eigentlich dazu um die Klassen und Selektoren rauszufinden die von Contao genutzt werden.

[Andreas]

...
Ich hab jetzt versucht bei #header unter "Eigener Code" ein Bild einzubinden. Egal ob ich jetzt das Headerbild oder das Hintergrundbild in den "Eigenen Code" einbinde, es klappt nicht.
Mit einem Modul hab ich es auch schon versucht. Geht ebenfalls nicht.

Schau mal hier: http://www.contao.org/blog-leser/ite...-pflegbar.html

[Summi]

@Kayzu
Es geht um ein Logo das über einem vorhandenen Bild liegen soll. Den Hintergrund muss ich mit einem Bild machen, da er zweifarbig ist. Ich hab also ein 5px breites Bild (oben grau, unten weiß) angelegt das über die x-Achse gekachelt wird. Dies wird im div header angegeben. Mein Problem ist das man dort über die Menüs (ich nenn sie jetzt mal so) nur eine Hintergrundfarbe und ein Hintergrundbild definieren kann. Jetzt versuche ich gerade über das Menü "eigener Code" ein weiteres Bild einzufügen. Dieses soll das Logo enthalten und mittig über dem gekachelten Hintergrund liegen.

Mir ist bewusst das mir noch so einiges an Wissen bezüglich html und CSS fehlt. Da mir aber auch noch so einiges an Wissen bezüglich Typolight/Contao fehlt, kann ich nicht so genau sagen woran es jetzt liegt.

@Andreas
Ich glaube ich hab genau das was du verlinkt hast versucht. Ich habe ein Modul angelegt in dem ich das Logo und seine Position definiert habe. Anschließend habe ich das Modul in der Seite eingebunden. Modul "Logo Header" bei eingebundene Module in der Kopfzeile eingefügt. Leider hat auch das nicht geklappt und der Kopfbereich wurde komplett weiß.

Ich hoffe Ihr könnt mir weiterhin Tipps geben was ich falsch mache.

[Andreas]

Ich denke jetzt hilft erstmal nur noch ein Link auf die Seite und wenn das auch nicht reicht einen Zugang zum BE.

Grüße

[Kayzu]

Da ich nicht weiss wie dein Layout aussehen soll kann ich nichts dazu sagen.
Ist die Seite dynamisch oder statisch usw.

Soll der BG über die ganze breite gehen oder nur so breit wie der Header sein?

Also ich löse das eigentlich immer so.
Mein Background kommt immer direkt in den Body und wird per CSS angepasst.
Der Header welcher bei mir bei einer statischen Seite meist ein Bild als auch das Logo enthält kommt immer in den Header Bereich als bg.

Sofern Du ein Bild als bg in den Headerbereich einfügen willst und darüber ein Logo platzieren willst, musst Du das Logo prinzipiell auch übers CSS platzieren und ansprechen.

Du erstellst z.b. ein Modul mit folgendem HTML Code:

<div id="logo">
<a href="{{env::url}}" title="logo"><img src="tl_files/Pfad/Dateiname.png" alt="logo" /></a>
</div>

So wird es auch standardmässig erklärt.
Den insertTag da oben kannst Du auch weglassen.

Dann muss es natürlich auch einen Eintrag in deiner CSS geben mit #logo .
Über diesen Selektor kannst Du jetzt das Aussehen und Position deines Logos formatieren.

Um das jetzt detailliert zu erklären müsste ich einen Link von der Seite haben.

EDIT:
Wenn es so aussehen soll wie in deinem geposteten Bild oben machst Du dir glaub ich n bissl zu viel Arbeit.

Mal grob erklärt.
Ich würde einfach einen grauen Balken als Hintergrund erstellen der die gewünschte Höhe hat und 1px breit ist.
Dann packst Du das einfach in den #body und repeatest es nach rechts (x).

Dann gehst Du her und gibst deinem Submenücontainer eine feste breite die genau so breit ist wie die eigentliche Seite. Höhe nach Wunsch anpassen.
Einfach dem Submenü einen weißen bzw. den gewünschten Hintergrund geben und fertig.
Entweder mit der Farbangabe oder einem Hintergrundbild.

Oder Du machst Schritt 1 und haust deinen BG in den Body und fügst in den Header einfach nochmal ein BG ein mit grau/weiss wie Du das haben willst.

Dann hast Du genau das was du willst.
Wie Du das aber lösen willst ist eher Geschmackssache.