[Gelöst] Container innerhalb eines "eigenen Layoutbereiches" nicht voll ansprechbar

**KloBoBBerLe** · 03.06.2015, 01:05

Liebe Leser,

durch das Anlegen eines "eigenen Layoutbereiches" per Seitenlayout-Einstellungen wird bekanntlich der CSS-Selektor .custom für diesen Layoutbereich generiert. Woran kann es denn liegen, dass weder die zu einem innerhalb von .custom liegenden Inhaltselement zugehörige Klasse .inside, noch die eigentliche Klasse bzw. ID selbst mit bestimmten Anweisungen per CSS angesprochen werden möchte?

Minimales Beispiel:

HTML:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
	<head>
	<body id="top" class="win firefox gecko fx38">
		<div id="wrapper">
			<header id="header">
			<div class="custom">
				<div id="Navigation_Untermenue">
					<div class="inside">
						<nav class="mod_navigation block">
					</div>
				</div>
			</div>
			<div id="container">
			<footer id="footer">
		</div>
	</body>
</html>

CSS:

Code:

html,
body,
#top,
#wrapper { width: 100%; }

#header,
.custom,
#container,
#footer { width: 100%; }

#Navigation_Untermenue { width: 70%; margin: 0 auto; background: blue; border-top: 4px solid  red; }

#Navigation_Untermenue .inside { width: 40%; margin: 0 auto; background: red;  border-bottom: 4px solid green }

(Korrekt) funktionsfähiges Beispiel: https://jsfiddle.net/u6ozhk68/1/

Leider reagieren #Navigaton_Untermenue und .inside aus meinem Contao-HTML im Gegensatz zum obigen jsfiddle-Beispiel nicht auf die zugeteilten CSS-Anweisungen bezüglich Farbe und Rahmen, die Breiteneinstellung hingegen funktioniert bei beiden problemlos. Woran liegt das denn? Auch beim Überfahren des jeweiligen Container-HTML's mit Firebug leuchten diese beiden Flächen nicht auf - lediglich .custom und mod_navigation werden von Firebug visualisiert.

Möchte ich den "eigenen Layoutbereich" also z.B. einfärben, dann kann ich dies nur auf den Selektor .custom anwenden, nicht jedoch auf die eigentlichen Inhaltselemente #Navigation_Untermenue und .inside...

Wieder mal ein ganz banaler Denkfehler?

Herzlichen Dank für Eure Unterstützung!

Viele Grüße
KloBoBBerLe

**tab** · 03.06.2015, 07:35

Bist du dir sicher, dass dein im Seitenlayout angelegter eigener Layoutbereich auch wirklich innerhalb des #header ausgegeben wird? Das geht nur mit einer Änderung des Seitentemplates fe_page. Ansonsten steht der Layoutbereich bestenfalls nach dem #header.

**Spooky** · 03.06.2015, 08:37

Zitat von tab

Bist du dir sicher, dass dein im Seitenlayout angelegter eigener Layoutbereich auch wirklich innerhalb des #header ausgegeben wird? Das geht nur mit einer Änderung des Seitentemplates fe_page. Ansonsten steht der Layoutbereich bestenfalls nach dem #header.

In seinen bisherigen Threads hat sich Klobberle oft bei seinen Beispielen verschrieben, ich glaube er hat das nur Beispielhaft hingeschrieben und keinen Closing Tag für den #header gemacht.

@KloBoBBerLe: stell' das Ding endlich mal auf einem öffentlich zugänglichen Webserver zur Verfügung

**tab** · 03.06.2015, 09:01

Zitat von Spooky

In seinen bisherigen Threads hat sich Klobberle oft bei seinen Beispielen verschrieben, ich glaube er hat das nur Beispielhaft hingeschrieben und keinen Closing Tag für den #header gemacht.

@KloBoBBerLe: stell' das Ding endlich mal auf einem öffentlich zugänglichen Webserver zur Verfügung

Genau, notfalls mit Blindtext.
@Spooky: Hier hat er sich definitiv verschrieben, denn die closing tags für header und footer fehlen. Genau die wären ja interessant, sonst weiss man nicht, ob der Custombereich innerhalb liegt oder außerhalb. Falls er innerhalb liegt, ist jedenfalls sicher mehr notwendig, als den Layoutbereich einfach im Seitenlayout anzulegen. Ich gehe davon aus, dass er außerhalb iegt, sonst würde das CSS greifen, das hat ja nichts mit Contao zu tun. Jedenfalls dann, wenn das entsprechende CSS auch ausgeliefert wird. Womit wir wieder beim online stellen wären

**KloBoBBerLe** · 03.06.2015, 13:40

Besten Dank für Eure Unterstützung und Eure verständnisvollen Anregungen trotz der Unklarheiten! Ich befürchte, nach dem Lesen dieses Postings werdet ihr mit Tomaten nach mir werfen und euch über die vergeudete Zeit ärgern...

Zitat von tab

Ansonsten steht der Layoutbereich bestenfalls nach dem #header.

Das ist natürlich korrekt, der Layoutbereich steht unterhalb des Headers! Den HTML-Code hatte ich dummerweise sporadisch aus Firebug herausrauskopiert, damit es optisch übersichtlich bleibt... Was ich zu später Stunde natürlich vergessen habe war, dass ihr das vor den DIV's stehende "+" zum Ausklappen der zugehörigen End-Tags nicht sehen könnt...

Zitat von Spooky

@KloBoBBerLe: stell' das Ding endlich mal auf einem öffentlich zugänglichen Webserver zur Verfügung

Zitat von tab

Womit wir wieder beim online stellen wären

Okay, okay, ihr habt ja Recht! Beim nächsten Mal wird das definitiv zielführender sein!

Damit nun wenigstens der HTML-Code stimmt:

HTML:

HTML-Code:

<div id="wrapper">
        <header id="header">Header</header>
        <div class="custom">
    	        <div id="Navigation_Untermenue">
    					<div class="inside">
                            <nav class="mod_navigation block">Navigationsmodul</nav>
                        </div>
                </div>
        </div>
        <div id="container">Container</div>
        <footer id="footer">Footer</footer>
</div>

JSFiddle.net-Minimalbeispiel (mit korrektem HTML-Code): https://jsfiddle.net/u6ozhk68/4/

ACHTUNG: Für Leute mit schwachen Nerven: Bitte nicht weiterlesen...

Nach einer ausführlichen "Spielerei" heute Morgen habe ich den Fehler gefunden und mich in Grund und Boden geschämt: Die innerhalb von .custom liegenden Container hatten keine Höhe zugewiesen bekommen, weshalb ohne Höhe natürlich auch keine Hintergrundfarbe angezeigt werden kann...

Manchmal ist es besser, zunächst den Verstand einzuschalten, bevor hastig im Forum darauf losgepostet wird...

Gestattet mir trotz dieser Schusseligkeit eine letzte Frage zu diesem Thema:

Angenommen, ich möchte wie mehrfach beschrieben nicht den kompletten Hintergrund von .custom einfärben, sondern nur einen Teil davon über eine Breite von z.B. 70 % (siehe obiges Beispiel): Sollte ich dann für die entsprechende Breitenangabe und zum Einfärben lieber den Selektor Navigation_Untermenue wählen, oder den wiederum darin befindlichen Container .inside?

Ich erinnere mich von Peter Müller einmal irgendwo gelesen zu haben, dass man Spielereien in der Gestaltung grundsätzlich immer nur mit den jeweiligen und exakt dafür vorgesehenen .inside-Containern tätigen sollte, um die übergeordneten Container nicht zu "missbrauchen"... War da nicht irgend etwas?

Besten Dank für Eure Hilfe!

Viele Grüße
KloBoBBerLe

**MacPix** · 30.09.2015, 18:22

Dieser eigener Layoutbereich.

Also ich verzweifle auch, ich habe es gemäss Link https://contao.org/de/news/einen-ind...h-anlegen.html versucht. Es geht einfach nicht, bin mit Contao 3.5.3 unterwegs. Hat mir da jemand ein Tip.
Es zeigt mir im Quelltest schon gar nicht der Custom Bereich an.