Navigation / Sub-Navigation getrennt

**Tweety** · 12.09.2009, 08:24

Hi all,

habe jetzt doch mal einen neuen Thread aufgemacht, weil ich mit den Navigationsmenus nicht ganz klar komme.

ich bin dabei (m)eine Homepage umzuziehen und in typolight zu integrieren (www.fotodesign-schaerer.de)
Da gibt es auf der linken Seite ein Menü, das blaue-OnHover-/Active Hintergründe hat und ein submenu (unter Dienstleistungen) horizontal. Jetzt habe ich drei probleme:
1) beim Anklicken von "Home" rutscht das linke menü ein paar pixel nach unten
2) das Submenu wird beim erscheinen ebenfalls 10-20px nach unten verschoben
3) klickt man eine seite im submenu an, ist die blaue Hinterlegung im Hauptmenu weg

Formatierungen habe ich alle in CSS gelöst:und das submenu in einem "eigenen layoutbereich" gelegt.

Code:

body {
    background-color: #d3f0e1;
    color: #7e7e7e;
    width:100%;
}

a:link, a:visited {
	text-decoration:none;
}

.clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both;}
.invisible{width:0px;height:0px;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline;}

#header {
	height:165px;
	background:url(./templates/header.jpg) no-repeat;
}

#container {
	width:915px;
	margin:20px auto;
}

#left-menu {
	float:left;
	width:205px;
	min-height:255px;
	height:auto;
	font-size:1.1em;
}
#left-menu ul, ol {
	list-style-position:outside;
	list-style:none;
}
#left-menu a {
	width:205px;
	height:38px;
	display:block;
	padding-top:6px;
	padding-left:20px;
	margin-bottom:-5px;
	margin-left:-40px;
	background:url(./templates/button.gif) no-repeat;
	font-family: Tahoma, serif;
	font-weight:bold;
	font-style: normal;
	color:#426f90;
}
#left-menu a:hover {
	background:url(./templates/button-active.gif) no-repeat;
	color:white;
}
#left-menu span.active, .trail {
	width:205px;
	height:38px;
	display:block;
	padding-top:6px;
	padding-left:20px;
	margin-top:-6px;
	margin-bottom:-5px;
	margin-left:-40px;
	background:url(./templates/button-active.gif) no-repeat;
	font-family: Tahoma, serif;
	font-weight:bold;
	font-style: normal;
	color:white;
}
#left-login {
	font-size:0.9em;
}

#main {
	float:right;
	width:710px;
	min-height:255px;
	background:url(./templates/content.gif)repeat-y;
	color: #7e7e7e;
}
#main-submenu {
	height:19px;
	font-size:1.0em;
	background:url(./templates/sub-menu.gif) no-repeat;
	color: #3e5561;
}
#main-submenu ul li {
	float:left;
	margin-left:30px;
	list-style-position:outside;
	list-style-type:square;
}
#main-submenu a:visited {
	color: #3e5561;
}
#main-submenu a:hover{
	color:red;
}

#main-content {
	margin-bottom:10px;
	margin-right:10px;
	margin-left:40px;
	padding-right:20px;
	text-align:justify;
	font-size:0.9em;
}

#bottom {
	height:30px;
	background:url(./templates/bottom.gif) no-repeat;
}

#footer {
	float:right;
	width:710px;
	margin: auto;
	background:none;
	text-align:center;
	font-size:0.9em;
	color: #7e7e7e;
}

Die Seite ist selbst nur bei mir in xampp am laufen, daher kann ich sie leider noch nicht zugänglich machen. Vielleicht weiß aber jemand trotzdem Rat?

bis denne
Tweety

**Stephan** · 15.09.2009, 12:11

Hallo Tweety,

ohne entsprechenden HTML-Code kann man nur raten, wo der Fehler liegen könnte, da wir ja nicht wissen, wie du dein Menü bzw. deine Seite aufgebaut hast. Tritt der Fehler in allen Browsern auf oder nur unter einem speziellen? Je mehr Infos du uns allgemein geben kannst, desto besser.

**savi** · 15.09.2009, 12:31

Hi!

Ich rate mal folgendes:

1) beim Anklicken von "Home" rutscht das linke menü ein paar pixel nach unten

das sind auf jeden fall irgendweche margins paddings die der browser automatisch bei listenelementen einfügt. Probier mal alle abstände (margin nimm ich an festzulegen. )
Welche abstände es genau sind kann ich dir nicht sagen aber dabei hilft dir sicher die erweiterung firebug für den Firefox weiter

2) das Submenu wird beim erscheinen ebenfalls 10-20px nach unten verschoben

s.o.

3) klickt man eine seite im submenu an, ist die blaue Hinterlegung im Hauptmenu weg

die blau hinterlegung kann mit der klasse .trail im css festgelegt werden. Also genauso wie du .active definert hast musst du auch .trail definieren.

**Tweety** · 17.09.2009, 05:51

Hi all,

Vielen dank schonmal für die Rückmeldungen!

1), 2)
Hier schonmal der aufbau der seite. Da er nicht viel enthält und ich den fehler eher im css vermute, habe ich ihn nicht mitgepostet.

Code:

<body>
<div id="container">
	<div id="header">
		<?php echo $this->header; ?>
	</div>
	<div id="left-menu">
		<?php echo $this->left; ?>
	</div>
	<div id="main">
		<?php echo $this->getCustomSection('main-submenu'); ?>
		<div id="main-content">
			<?php echo $this->main; ?>
		</div>
	</div>
	<div id="footer">
		<div id="bottom"></div>
		<?php echo $this->footer; ?>
	</div>
</div>
</body>

IE6 zerlegt das layout in der Form, als daß der hauptbereich weit nach unten geschoben ist. Unabhängig davon verschiebt es das Menü auch. Konqueror stellt alles richtig dar, hat aber auch den versatz. Ich habe im ersten thread nochmal die komplette css-datei reinkopiert, aber viel mehr steht da bisher auch nicht drin.
Scheint so, als ob beim menüwechsel noch irgendwas anderes an classen vom navi-modul aus verwendet wird, was das ganze durch die gegend schiebt.

3) .trail scheint die richtige wahl zu sein, allerdings habe ich es noch nicht geschafft diese eigenschaft an der richtigen stelle im css zu ergänzen. entweder kam nichts, oder nur ein dünner balken rechts neben dem aktiven Hauptmenüpunkt. aber es kam schonmal was

Das werde ich demnächst nochmal weiter testen.

bis denne
Tweety

**Stephan** · 17.09.2009, 08:37

Hallo Tweety,

der Code, den du da gepostet hast, stammt leider vom Template und enthält somit noch die ganzen Platzhalter. Bitte kopiere doch den HTML-Code, den der Browser dir schlussendlich ausgibt (wo dann alle Platzhalter entsprechend ausgetauscht wurden).

**Thomas** · 17.09.2009, 08:58

Ich kann das nicht reproduzieren, weder im FF 3.5 noch in allen IE Varianten.

**Tweety** · 17.09.2009, 18:28

Hihoo..

hier also dann nochmal den ganzen quelltext der zusammengebastelten seite:

Code:

<body>

<div id="container">

<div id="header">
		
<img style="margin-top:60px;margin-left:30px" src="tl_files/fotofactory/templates/fotofactory-logo.png" />	</div>

	<div id="left-menu">
		
<!-- indexer::stop -->
<div class="mod_navigation block" id="left-menu">

<a href="index.php/Fotostudio.html#skipNavigation1" class="invisible">Navigation überspringen</a>

<ul class="level_1">

<li class="left-menu first"><a href="index.php/Home.html" title="Home" class="left-menu first" onclick="this.blur();">Home</a></li>
<li class="left-menu trail"><a href="index.php/dienstleistungen.html" title="Dienstleistungen" class="left-menu trail" onclick="this.blur();">Dienstleistungen</a></li>
<li class="left-menu"><a href="index.php/sortiment.html" title="Sortiment" class="left-menu" onclick="this.blur();">Sortiment</a></li>
<li class="left-menu"><a href="index.php/kontakt.html" title="Kontakt" class="left-menu" onclick="this.blur();">Kontakt</a></li>
<li class="left-menu last"><a href="index.php/impressum.html" title="Impressum" class="left-menu last" onclick="this.blur();">Impressum</a></li>
</ul>
 
<a name="skipNavigation1" id="skipNavigation1" class="invisible">&nbsp;</a>

</div>
<!-- indexer::continue -->

<!-- indexer::stop -->
<div class="mod_login one_column tableless login block">

<form action="index.php/Fotostudio.html" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_login" />
<label for="username">Benutzername</label>
<input type="text" name="username" id="username" class="text" maxlength="64" value="" /><br />
<label for="password">Passwort</label>
<input type="password" name="password" id="password" class="text password" maxlength="64" value="" /><br />
<div class="submit_container">
<input type="submit" class="submit" value="Anmelden" />
</div>
</div>
</form>

</div>
<!-- indexer::continue -->
</div>

<div id="main">
		
<div id="main-submenu">

<!-- indexer::stop -->
<div class="mod_navigation block" id="main-submenu">

<a href="index.php/Fotostudio.html#skipNavigation3" class="invisible">Navigation überspringen</a>

<ul class="level_1">
<li class="first"><a href="index.php/Online_Service.html" title="Online Service" class="first" onclick="this.blur();">Online Service</a></li>
<li class="active main-submenu"><span class="active main-submenu">Foto-Studio</span></li>
<li class="main-submenu last"><a href="index.php/AusserHausService.html" title="&#34;Außer Haus&#34;-Service" class="main-submenu last" onclick="this.blur();">"Außer Haus"-Service</a></li>
</ul>
 
<a name="skipNavigation3" id="skipNavigation3" class="invisible">&nbsp;</a>

</div>

<!-- indexer::continue -->
</div>
<div id="main-content">
</div>
</div>
<div id="footer">
<div id="bottom"></div>
</div>
</div>
</body>

Es handelt sich dabei um das standard template nav_default. daran habe ich nichts geändert.

@Thomas:
was genau kannst du nicht nachvollziehen und wie hast du es bei dir getestet?

greez2all
Tweety

**Tweety** · 17.09.2009, 22:31

Hi all....

habe heute etws mehr zeit gehabt...

1) klappt jetzt. es lag an der padding/margin kombination bei den menueinstellungen.
3) klappt auch. da lag savi goldrichtig mit .trail -tnx-. Mein erster versuch hatte nicht funktioniert weil ich statt eine eigene klasse die trail eigenschaft so implementiert hatte:

Code:

#left-menu span.active, .trail {
...
}

allerdings verstehe ich ehrlich gesagt nicht den unterschied, weil doch gerade mit dem komma dargestellt wird, daß es für span.active UND alles andere mit trail gilt, wenn es denn vorher irgendwo mit der ID left-menu eingeleitet wurde. Jetzt habe ich erstemal zweimal genau das selbe im css stehen -doof aber klappt.

2) knabber ich immernoch. einziger unterschied ist ja das geschützte leerzeichen, wenn kein menü da ist und eben der standard nav-code, sobald das menü eingeblendet wird. warum es da nun um 10-20px hüpfen sollte, ist mir schleierhaft. vielleicht wegen einem standardabstand nach oben bei verwendung von <ul>...</ul>???

wem noch was dazu einfällt darf es mir gerne mitteilen..
greez2all
Tweety

**Stephan** · 17.09.2009, 22:38

Hallo Tweety,

leider hast du immer noch nicht den kompletten HTML-Code gepostet, d.h. Doctype-Deklaration und head-Bereich fehlen. Außerdem können wir schwer das Verhalten des Menüs (inkl. Submenü) testen, wenn du uns nur eine einzige Seite zur Verfügung stellst. Zudem fehlen natürlich alle Bilder, die im CSS verankert sind. Du machst es uns nicht einfach, deine Probleme zu lösen. Ich schrieb ja schon, je mehr Infos du uns geben kannst, desto einfacher für uns. Also, es gibt drei Möglichkeiten:

Du stellst die Test-Seite online zur Verfügung (einfachste Variante).
Du fertigst eine Zip-Datei mit allen relevanten HTML-, CSS- und Bild-Dateien an, so dass man sich das ganze lokal anschauen kann. Dieses Zip-Archiv hängst du hier an deinen Thread an.
Du postest hier im Thread alle relevanten Seiten und dazugehörigen Dateien (umständlichste Variante).

Was mir beim kurzen Überfliegen aufgefallen ist, dass dein Quellcode derzeit auch noch einige Fehler besitzt. Die IDs #left-menu und #main-submenu werden z.B. doppelt vergeben.

Mein Tipp:
Verwende allgemein zum Entwickeln die Firefox Erweiterungen Firebug und HTML Validator. Sie geben Aufschluss über den Quellcode und eventuelle Fehler.

**Tweety** · 18.09.2009, 06:13

Hallo Stephan,

ok, ich werde es mal zippen und hier hochladen.
Ich war der meinung, da alles andere was ich nicht gepostet habe, von typolight kommt, würde der code den ich geschrieben habe reichen.

Ich habe meine css-datei nochmal überflogen aber keine doppelten einträge der IDs gefunden. So ganz verstehe ich deine anmerkung daher nicht. Das css ist auch W3C-konform. Allerdings meckert die HTML validierung über zwei optionen beim frameset, das typolight eingefügt hat.

vielen dank für die Rückmeldung
greez2all
Tweety

**Stephan** · 18.09.2009, 06:38

Hallo Tweety,

ich meinte auch nicht die CSS-Datei sondern deinen geposteten HTML-Code:

HTML-Code:

<div id="left-menu">
…
<div class="mod_navigation block" id="left-menu">

HTML-Code:

<div id="main-submenu">
…
<div class="mod_navigation block" id="main-submenu">

Für die HTML-Validierung solltest du nicht die Frameset-Frontend-Vorschau von TYPOlight nehmen, sondern allein deine Seite. Dafür kannst du das Frameset mit einem Klick auf das Kreuz oben rechts in der Ecke ausschalten.

**Thomas** · 18.09.2009, 07:59

Sorry, ich habe da was misverstanden!
Ich war im Irrglauben, dass würde auf Deiner Seite ein Phänomen darstellen.

Dem ist ja nicht so.

Aber wie Stephan schon erwähnte, ist das nicht optimal mit 2x gleich vergebener IDs.

**Tweety** · 20.09.2009, 09:42

Hi all,

Ich habe also in der Zwischenzeit ein wenig ausprobiert und aus den Modulen die css-id für left-menu und main-submenu rausgenommen. damit erscheinen schonmal keine doppelten IDs mehr. Die Verschiebung bleibt aber weiter bestehen. Daher vermute ich, daß es irgendwie an den an dem template nav_default liegt.
Spaßeshalber habe ich in css die option "no-repeat" beim submenu-hintergrund rausgenommen um zu sehen, ob da vielleicht noch irgendetwas drüber steht, aber es bleibt eigentlich nur die verschiebung.
hier noch die beiden code-schnipsel ohne und mit submenu (home, dienstleistungen):
ohne elemente im submenu

Code:

<div id="main">
		
<div id="main-submenu">
&nbsp;
</div>

mit elementen im submenu

Code:

<div id="main">
		
<div id="main-submenu">

<!-- indexer::stop -->
<div class="mod_navigation block">

<a href="index.php/dienstleistungen.html#skipNavigation3" class="invisible">Navigation überspringen</a>

<ul class="level_1">
<li class="first"><a href="index.php/Online_Service.html" title="Online Service" class="first" onclick="this.blur();">Online Service</a></li>
<li class="main-submenu"><a href="index.php/Fotostudio.html" title="Foto-Studio" class="main-submenu" onclick="this.blur();">Foto-Studio</a></li>
<li class="main-submenu last"><a href="index.php/AusserHausService.html" title=""Außer Haus"-Service" class="main-submenu last" onclick="this.blur();">"Außer Haus"-Service</a></li>
</ul>
 
<a name="skipNavigation3" id="skipNavigation3" class="invisible">&nbsp;</a>

</div>
<!-- indexer::continue -->

</div>

Angehängt habe ich zusätzlich ein zip mit den dateien.

greez2all
Tweety

Nachtrag: Mir ist gerade etwas aufgefallen. Im vergleich zum original, ist auch das linke menu um 10-20px nach unten verschoben. da es aber immer eingeblendet ist, merkt man keinen unterschied. kann es sein, daß beim nav_default wirklich irgendwo ein zusätzlicher abstand nach oben mit integriert ist???

**Stephan** · 21.09.2009, 13:08

Leider hast du immer noch nicht das gemacht, worum ich dich gebeten habe, nämlich alle HTML-Dateien zur Verfügung zu stellen. Mit der Template-Datei können wir wie gesagt wenig anfangen. Also bleibt uns nach wie vor nur das Raten. Aus den Code-Schnipseln habe ich deshalb versucht, die Seite zusammenzubasteln. Ich stelle fest, du machst es dir unnötig schwer! Warum benutzt du ein eigenes Seitenlayout und nicht das von TYPOlight? Als Tipp und Hilfe, lies dir bitte dazu mal diesen Thread durch.

Nun zu deinem Problem:
Die Abstände kommen vermutlich daher, dass du kein Reset-Stylesheet benutzt. D.h. in deinem Fall haben beide Menüs, die jeweils standardmäßig aus einer unsortierten Liste bestehen, die Default-Abstände, die der Browser vorgibt. (Diese sind im Übrigen von Browser zu Browser unterschiedlich!) Um die Abstände zu resetten, also auf Null zu stellen, sollte Folgendes im CSS-Code ergänzt werden:

Code:

ul { margin: 0; padding: 0; }

Oder eben speziell nur auf die Listen der Navigation angewandt (und nicht global auf alle Listen):

Code:

.mod_navigation ul { margin: 0; padding: 0; }

**Tweety** · 21.09.2009, 17:17

Ahoi..

HTML-Code:

.mod_navigation ul { margin: 0; padding: 0; }

hat geholfen! Vielen Dank Stephan!

Leider weiß ich aber immer noch nicht, wie ich Dir noch andere (bzw welche anderen) html-files hätte schicken sollen?!? Der restliche Seitenaufbau wird doch komplett über das backend gesteuert.

Für mich war es einfacher, das vorhandene Layout zu nehmen, von Hand in anständigem html (original ist mit tabellen etc) umzusschreiben, und anschließend laut anleitung

HTML-Code:

https://contao.org/tl_files/screencasts/template

in typolight einzubauen. Jetzt wo ich wieder einiges dazugelernt habe, bekomme ich es vielleicht auch unter typolight direkt hin. Unter Umständen werde ich das zu Übungszwecken auch noch tun.

Meine Fragen aus diesem Thread sind allerdings jetzt gelöst und ich bin zufrieden mit meinem neuen Kenntnisstand

Vielen Dank an alle!

greez2all
Tweety

**Stephan** · 21.09.2009, 17:47

Schön, dass ich mit meiner Vermutung Recht hatte.
Falls du in der Zukunft wieder einmal eine Frage hast, so wäre es hilfreich, wenn du deine Seite z.B. im Firefox aufrufst und sie dann mit STRG+S (Datei > Seite speichern unter) speicherst oder dir den HTML-Code mit STRG+U (Ansicht > Seitenquelltext anzeigen) anzeigen lässt und diesen dann in eine Datei kopierst. Anhand dieser HTML-Datei(en) lässt sich das Frontend analysieren und hätte damit die Fehlersuche enorm erleichtert.

**Tweety** · 23.09.2009, 22:19

Hi all,

Ich habe mir mal die Mühe gemacht, die gesamte Seite nochmal in typolight direkt einzutippern. Finde ich allerdings recht umständlich und vor allem weiß ich nicht wo am ende zB die angelegte css-datei steht. Also übersichtlicher finde ich es mit selbstgeschriebenem template+css.

Neben diesem "Nachteil" habe ich wieder ein problem mit dem submenu. Entweder reserviere ich dafür einen eigenen layoutbereich nach dem kopfbereich, dann rutscht das linke menu um die höhe des submenus nach unten. lege ich den eigenen layoutbereich in/unter die hauptspalte, dann ist es immer unten drunter und läßt sich nicht so einfach nach oben verschieben. verwende ich nur css, dann stimmt die position aller menüs, aber das submenu wird ausgeblendet, sobald im hauptmenu keine unterpunkte sind.

eine andere sache, die ich unschön hinbekommen habe ist der footer. der wird auch nur angezeigt, wenn etwas drinsteht, daher hab ich ein modul mit " " erstellt und das im footer anzeigen lassen.

von daher geht es für mich schon schneller alles von hand in Quanta einzutippen, es typolight-gerecht umzuschreiben und in typolight schließlich zu verwenden. bin aber natürlich gerne bereit dazuzulernen

falls also jemand eine lösung für die beiden angesprochenen probleme hat, werde ich sie gerne ausprobieren.

greez2all
Tweety

**joerg-t** · 23.09.2009, 22:31

@Tweety
hast du schon einmal in der Online Demo gesehen?
http://demo.https://contao.org/typolight/
oder
https://contao.org/buecher-und-videos.html#videos
das hilft zum verstehen.

Grüße Jörg

**Tweety** · 24.09.2009, 12:22

Hi Jörg,

habe ich schon gemacht, daher hab ich auch zuerst mein eigenes template erstellt und das integriert - klappt ja auch.
wollte aber noch mal testen wie es direkt in typolight geht und da hängts jetzt wieder, weil ich noch keine option gefunden habe, wie/daß man eigene layoutbereicht an beliebiger stelle in header/left/right/main/footer anordnen kann.

greez2all
Tweety

**Stephan** · 24.09.2009, 12:53

Du kannst einen eigenen Layoutbereich nach dem Header, vor dem Footer oder in die Hauptspalte (main) setzen. Das reicht auch völlig aus, die Module entsprechend im Seitenlayout zu verteilen. Im Normalfall benötigt man meines Erachtens noch nicht einmal einen eigenen Layoutbereich, es sei denn du erstellst ein wahnsinnig kompliziertes Layout. Setze deine Module, die du ansonsten einem eigenen Layoutbereich zugeführt hättest, einfach in die Bereiche header, left, main, right oder footer. Die Positionierung im Frontend lässt sich ohne Weiteres über CSS lösen.

**Tweety** · 26.09.2009, 11:31

Hi all,

also langsam bin ich mir nicht mehr sicher, daß das mit dem submenu so einfach direkt in typolight mit css mit/ohne eigenen layoutbereich geht...

Hier mal meine überlegungen, vielleicht ist da ein denkfehler drin:
Im gegensatz zum eigenen template wo ich mit

HTML-Code:

<?php echo $this->getCustomSection('main-submenu'); ?>

den genauen ort meines eigenen bereiches festlegen kann und vor allem alles reinpacken kann was ich will, bietet typolight nur 3 vorgeschriebene positionen. Damit der Hintergrund des menus immer eingeblendet ist, könnte ich ein modul mit

HTML-Code:

<div id="main-submenu_space"> </div>

anlegen und das in der Hauptspalte anzeigen lassen. Dann wäre es aber notwendig, diesen bereich auszublenden, sobald ein untermenü vorhanden ist, da ansonsten das menu selbst UNTER dem bereich steht, d.h. ich habe zwei zeilen dort. Oder ich verschiebe das eingeblendete untermenü um die höhe des o.a. platzhalters nach oben. Das funktioniert auch, halte ich aber für eine sehr unschöne Programmierung!
Unter Verwendung eines eigenen Layoutbereiches in einer der drei "typolight-bereiche" wird dieser bereich reserviert und alles folgende unten drunter angeordnet. Das wiederum führt an einer absoluten positionierung der folgenden elemente nicht vorbei, wenn man/ich unschöne abstände vermeiden möchte. In meinem fall müßte ich dafür also das linke menu mit

HTML-Code:

position:absolute;
top:19px;
option:oä...;

nach oben verschieben, damit ich das selbe aussehen hinbekomme. Prinzipiell spricht da nichts dagegen, allerdings habe ich schlechte erfahrung damit unter verwendung von IE6. Für meine eingene Seite www.birdyshome.de ist mir das egal, aber für die, an der ich gerade dran bin leider nicht.

Also nach den bisherigen überlegungen und tests halte ich die erstellung eines templates mit eigenen layoutbereichen für die eleganteste lösung. Für weitere Vorschlage, Tipps und Tricks bin ich aber natürlich jederzeit zu haben

vielen Dank für eure bisherige hilfe!
greez2all
Tweety

P.S. jetzt fehlt nur noch ein [gelöst] im Titel. wie geht das???