Navigation mit Akkordeon // Problem bei der Formatierung von MooToolsNav

[JanK]

Guten Tag, ich hab einige konflikte mit meiner Navigation und stehe gerade vollkommen auf dem Schlauch. Meine Kunde hat sich eine 2 level Navigation gewünscht, die beim Klick auf den Hauptmenüpunkt in Level 1 nach unten "auf slided".

Habe mich dann ein wenig umgesehen und mootoolsnav gefunden, diese Erweiterung macht ja genau das, zwar auf Mousehover aber das kann man anpassen.

Bei der Formatierung drehe ich mich allerdings im Kreis.

So soll das erste Level aussehen:

Das hat soweit noch ganz gut funktioniert:

Aber mein Horror ist das 2. Level. So soll dieses aussehen:

Und so sieht es aus:

Der Hover von level 1 ragt oben ins Untermenü, die Schrift ist ausserhalb "ihres" lis und so weiter.

Ich hab zwar herausgefunden wie ich die Elemente anspreche, hab den hintergrund farbig gemacht und dann am Selektor rumgeschraubt bis es gepasst hat, aber sie wollen sich nicht bewegen oder verändern.

Die Frage die ich mir inzwischen stelle, liegt da daran das die Erweiterung nicht mit ver. 2.9 getestet wurde? Oder liegt es an meinen Mangelnden fähigkeiten?

Vielleicht hat jemand von euch einen Tipp, es muss nicht unbedingt mit Mootools sein um diesen Slide Effekt hinzubekommen, wir möchten das das Design einfach steht, "Luxus" Extras können später noch eingebaut werden.

Gibt es vielleicht eine möglichkeit die Navigation mit der Standard Navigation umzusetzten?

MfG
Jan

Falls etwas unklar ist oder totaler Blödsinn oder eventuell etwas fehlt, bitte schreibts einfach, ich werds dann nachreichen oder versuchen besser/anders zu erklären.

[kos]

Gibt es dazu einen Link?

[KMalis]

http://tl.xcilio.de

[psren]

was mir spontan auffällt ist das deine schrift größer ist als das parent li??

deine li sind 15px hoch, deine a aber 18.

führt aber noch nicht zu einer lösung, ist nur etwas unschön..
habe leider momentan kein ezeit mir das noch näher anzuschauen. vielleicht morgen.

[kos]

Hallo Kai

bin gerade dabei mich in Deinen Code einzulesen.
Was mir auffällt:

Wie es aussieht, hast Du das Template fe_page geändert, das <div id="hintergrundgesamt"> deutet für mich darauf hin. Da das aber nicht weiter per CSS formatiert wurde ist es eigentlich überflüssig.

Orange Linie oben: die würde ich nicht durch ein separates <div> im header erzeugen, sondern per css im body:

body{border-top:11px solid #FF9C04

und dann das <div> dann aus dem Headercode entfernen.

Den grauen Balken oben würde ich in entsprechender Höhe oben in Dein body-Hintergrundbild (hintergrund6.png) einfügen.

Mit dem <div id="wrapper"> ließe sich die Seite dann noch weiter gestalten.

Dein <div id="platzhalter"> bekommt dann background-color:transparent;

Nebenbei:
Deine Seite produziert im Moment 15 HTML-Fehler.
In XHTML Strict kennt das <img> tag keinen Befehl border="0", außerdem ist es durch " />" zu schließen, also <img src="...." alt="..." />, dabei ist alt="..." obligatorisch.

Weiter:
Zeilenumbruch: <br /> und nicht <br>!
<div align="center" id=".." gibt es nicht sondern wenn schon inline über style="text-align:center;", aber besser über eine css-Datei.

Sei doch bitte so gut und versuche, die Fehler zu eliminieren, dann können wir uns der Navigation zuwenden.

Eins schon vorab: DU verwendest sehr oft position:absolute. Das wird sich zumindes bei der Navigation nicht durchhalten lassen, da Du ja im Voraus oft nicht weist, wie viele Untermenüpunkte aufzulisten sind.

Ich schlage vor, wir machen dann weiter, wenn Du das erledigt hast.

[psren]

dabei ist alt="..." obligatorisch.

zur ergänzung.

Das alt-Attribut ist wichtig für die Barrierefreiheit. Es wird von Screenreadern Textbrowsern und Search-Robots genutzt.

Wenn das Bild Aussagekräftig ist sollte da eine Beschreibung des Bildes stehen und wenn es nur irgendein Bild ist (ein Platzhalter/Schatten etc.) dann wird

alt=""

verwendet.

Zur Navigation:
#left_main_navi hat position:absolute
Daraus folgt dass wenn Unterpunkte angezeit werden der Block nach der Navi von der Navi überlappt wird.

Versuch die Absolute Positionierung bei dynamischen Elementen möglichst zu vermeiden.

[JanK]

Einige der Unstimmigkeiten habe ich schon beseitigt, den Rest oder wenn ich etwas vergessen habe, werde ich morgen in angriff nehmen.

Vielen dank schonmal für Eure Hilfe.

[kos]

Hier mal grob skizziert meine Vorstellung vom Aufbau des Kopfes der Seite:

<div id="wrapper">
  <div id="header">

    <div class="inside">
      <div id="logo">
      <p>
      <a id="logo_box_logo" href="http://tl.xcilio.de"><img alt="logo" src="tl_files/xcilio/theme/logo_box_logo.png" /></a>
      </p>
    </div>
    
    <div id="banner">
      <img alt="banner" src="tl_files/xcilio/theme/platzhalter.png" />
    </div>

    <div id="pfad_navigation" class="mod_breadcrumb block">
      <a title="X.CILIO" href="start.html">X.CILIO</a> »
      <span class="active">START</span>
    </div>

    </div>
  </div>

<div id="container">
.
.

und das css:

#wrapper{
  margin:11px auto;
  width:958px;
  background:lightBlue; /*zum testen*/
  }
#header{
  height:225px
  }
#main{
  background-color:red; /*zum testen*/
  }
#logo{
  position:absolute;
  top:-33px;
  left:10px;
  width:266px;
  height:176px;
  background:url("tl_files/xcilio/theme/logo_box.png") no-repeat scroll 0 20px transparent;
  z-index:5;
  }
#logo_box_logo {
  position:static;
  }
#banner{
  position:absolute;
  left:268px;
  }
#pfad_navigation{
  position:absolute;
  top:200px;
  left:268px;
  background-color:#cccccc;
  font-family:"Trebuchet MS";
  font-size:12px;
  width:690px;
  padding:3px 0 4px 15px;
  width:676px;
  }
#container{
  background-color:blue; /*zum testen*/
  position:relative;
  height:200px
  }

img{padding:0}

Den Rest erledigen wir später

[JanK]

Sooo, hab leider jetzt erst wieder Zeit gefunden, werde mir das mal angucken und anpassen.

Edit:
Okay, das mit dem CSS verstehe ich, aber soll ich auch das HTML anpassen?
Oder war das nur zum verdeutlichen gedacht?

[kos]

Wie oben schon erwähnt verwendest Du für meinen Geschmack zu viel position:absolute.

Wenn ich mir ansehe, was bisher vorliegt, so hast Du links eine Navigation mit fester Breite (wg.=>Hintergundbild) und Dein #main hat eine Breite von 686px. Bei den Vorgaben kommst Du weitgehend ohne absolute Positionierung aus und kannst ein festes Seitenlayout verwenden.

Wähle mal den Menüpunkt Support und schiebe das Browserfenster kleiner. Den Effekt hast Du dann nicht.

Absolute Positionierung hat ja auch den Nachteil, dass man im Voraus z.B. wissen muss, welche Abmessungen ein Element hat, weil es ja komplett aus dem Context herausgenommen wird. (bei der Navigation z.B. hättest Du dann Probleme, wenn ein weiterer Menüpunkt hinzugefügt werden soll).
Ich würde daher weitgehend darauf verzichten und mit margin und padding arbeiten wo immer es möglich ist.

Schau Dir mal mit dem FFox und FireBug die "Music-Academy" an. Da ist nicht allzuviel absolut positioniert und ich glaube doch, dass Leo sein Handwerk einigermaßen versteht.

Mein Vorschlag: ich würde alles in den #wrapper packen und diesen mittig im Fenster ausrichten. Der horizontale braune Balken im Kopfbereich lässt sich am Einfachsten durch eine Änderung Deines Hintergrundbildes erreichen. Eine Alternative wäre es, im Template fe_page.tpl unterhalb von body ein zusätzliches <div> einzufügen und dem die Farbe mitzugeben (dann müsste aber wieder absolut positioniert werden).

Wenn Du Dich damit anfreunden kannst, gib Bescheid, dann können wir weitermachen.

[JanK]

Du würdest also ganz auf die positionierungsarten verzichten? Also auch nicht "relative" benutzen?

Edit:
Ich muss gestehen, nach der entfernung der Positionsart, stellt es sich als immer schwieriger heraus die einzelnen Elemente wieder an ihren richtigen Ort zu platzieren.

[kos]

Wieso? Ich hatte Dir doch den Entwurf für den #header zugeschickt zusammen mit dem css.

Edit: Ich würde jetzt #left positionieren (also in den #headerbereich hochschieben und darin die Navigation, #Supporthotline und #twitter einfach mit margin und padding ausrichten

[JanK]

Guten Morgen,
bei dem Text und Twitter stimm ich so zu, hätte ich wohl eh gemacht, damit der Text von der Navigation "heruntergeschoben" wird wenn diese aufklappt.

Warum ich die Navigation in den Header verschieben soll, verstehe ich allerdings nicht so ganz. Habe extra für diese 2 Spalten angelegt.

[kos]

Da hab' ich mich wohl nicht klar ausgedrückt also ein neuer Versuch:

Ich würde wie beschrieben in #left die Navigation, #Supporthotline und #twitter hineinpacken.
Da aber auf Deiner Seite die Navigation in den Kopfbereich reicht und etwas unterhalb des Logos beginnt, würde ich #left entsprechend hochschieben. So wären alle 3 divs im Kontext und man könnte über margin/padding gewünschte Abstände innerhalt von #left einstellen.

[JanK]

*Kopf -> Tisch*
Okay, DAS ergibt für mich nun einen Sinn, hätte es wohl vorher schon sollen.