Problem mit mehrzeiliger zweispaltiger Navigation

[till]

Hallo Ihr Checker,

Ich bin schier am verzweifeln und hoffe mal, dass ich vielleicht auf diesem weg einen Rat bekomme.

unter www.der-schwarzwaelder.de/site/index.html - dann auf deutsche Version klicken findet ihr auf der rechten Seite eine Navigation.

Im Moment ist diese noch mit einer Tabelle aufgebaut. Der Rest der Seite ist schön xhtml und css-konform.
Ich schaffe es nicht die Navigation mit Hilfe von Listenelementen bündig mit den rechtsstehenden Zahlen hinzubekommen.

Eine andere Möglichkeit wäre 9 versch. divlayer zu machen, aber ich glaube dann ist eine tabelle weit aus sinnvoller.

das problem ist auch das es mit normalen umbrüchen auch nicht geht,da ein br zu wenig und zwei zuviel sind.

ich habe es auch schon mit definierten p-tags versucht und diesen eine line-height verpasst, aber das es so wie jetzt mit der tabelle aussieht ist unmöglich.

Wäre spitze wenn jemand ein Idee hätte, da es doch etwas unschön ist, wenn alles über css gesteuert wird, aber denoch eine tabelle eingesetzt werden muss.

[Ashura]

Hallo till.

unter www.der-schwarzwaelder.de/site/index.html - dann auf deutsche Version klicken findet ihr auf der rechten Seite eine Navigation.

Nein, finde ich nicht. Sowohl „Deutsch“ als auch „Englisch“ verlinken auf die index.html.
Da ich einen Blick auf deinen Quellcode geworfen habe, entnehme ich deinem JS, dass du http://der-schwarzwaelder.de/site/de/home.html meinst.
Frage: warum verlinkst du nicht direkt darauf?

Im Moment ist diese noch mit einer Tabelle aufgebaut. Der Rest der Seite ist schön xhtml und css-konform.
Ich schaffe es nicht die Navigation mit Hilfe von Listenelementen bündig mit den rechtsstehenden Zahlen hinzubekommen.

Also eine (oder mehrere) Navigationsliste, in der jeder Navigationspunkt eine weitere Liste enthält, welche auf die verschiedenen Seiten verweist. Wo liegt das Problem?

Einen schönen Dienstag noch.

Gruß, Ashura

[till]

Hallo Ashura
das javascript ist so gewollt da der kunde fullscreen möchte.
kannst du das mit den unterlisten etwas genauer beschreiben?
ich habe das mit verschiedenen listen versucht, aber entweder wird der zeilenabstand größer oder die zahlen werden nicht bündig...

danke
till

[Ashura]

Hallo till.

das javascript ist so gewollt da der kunde fullscreen möchte.

Er möchte also seine Besucher bevormunden?

kannst du das mit den unterlisten etwas genauer beschreiben?
ich habe das mit verschiedenen listen versucht, aber entweder wird der zeilenabstand größer oder die zahlen werden nicht bündig...

Ja, das ganze ist weniger trivial, als ich mir das anfangs vorgestellt hatte. Du kannst dir ja einmal meinen Vorschlag anschauen. Ich habe nur einen kleinen Teil der Navigation übernommen; den Rest solltest du ergänzen können.

Einen schönen Dienstag noch.

Gruß, Ashura

[till]

Hallo Ashura,

vielen dank erst mal für den Vorschlag.
Nur wenn ich mir das auf dem IE anschaue, dann habe ich zwischen dem Text und den Zahlen einen langen Strich. Weisst du auch woran das liegt.
Aber ich werde es trotzdem mal versuchen, so umzusetzen.

schönen gruss

[Ashura]

Hallo till.

Nur wenn ich mir das auf dem IE anschaue, dann habe ich zwischen dem Text und den Zahlen einen langen Strich. Weisst du auch woran das liegt.

Ja, es liegt am Unvermögen des IEs, reguläre Selektoren aus CSS Level 2.0 umzusetzen.
Hier die betreffende Stelle:

dd {  
  border-left:1px solid #c3b9c3;  
  /* … */  
}  
dt+dd {  
  border:none;  
}

Browser™ deaktivieren dank des unteren Selektors den Rahmen für das erste dd-Element, welches sich auf gleicher Ebene wie das dt-Element befindet.

Entweder nimmst du diesen optischen Mangel in Kauf, überlegst dir etwas Besseres, oder du verzichtest auf die Linie.

Einen schönen Mittwoch noch.

Gruß, Ashura

[till]

Hallo Ashura,

Habe jetzt noch ne andere Lösung gefunden für die Strichsache.
Das klappt.
Nun bin ich gerade dabei die navigation nach deinem schema nachzubauen.
wenn ich jetzt aber den listen codeblock dupliziere und drunter setze, zerhaut es die darstellung.

<ul>
      <li><h2>Das Unternehmen</h2>
        <ul>
          <li>
            <dl>
              <dt>Home</dt>
                <dd>1</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><a href="http://der-schwarzwaelder.de/site/de/unternehmen/uu1.html">Wir über uns</a></dt>
                <dd class="trenner"><a href="http://der-schwarzwaelder.de/site/de/unternehmen/uu1.html">1</a></dd>
                <dd><a href="http://der-schwarzwaelder.de/site/de/unternehmen/uu2.html">2</a></dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><a href="http://der-schwarzwaelder.de/site/de/unternehmen/impressum.html">Impressum</a></dt>
                <dd><a href="http://der-schwarzwaelder.de/site/de/unternehmen/impressum.html">1</a></dd>
            </dl>
          </li>
        </ul>
      </li>

<li><h2>Das Unternehmen</h2>
        <ul>
          <li>
            <dl>
              <dt>Home</dt>
                <dd>1</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><a href="http://der-schwarzwaelder.de/site/de/unternehmen/uu1.html">Wir über uns</a></dt>
                <dd class="trenner"><a href="http://der-schwarzwaelder.de/site/de/unternehmen/uu1.html">1</a></dd>
                <dd><a href="http://der-schwarzwaelder.de/site/de/unternehmen/uu2.html">2</a></dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt><a href="http://der-schwarzwaelder.de/site/de/unternehmen/impressum.html">Impressum</a></dt>
                <dd><a href="http://der-schwarzwaelder.de/site/de/unternehmen/impressum.html">1</a></dd>
            </dl>
          </li>
        </ul>
      </li>

</ul>

habe ich da was falsch gemacht?
oder funktioniert das irgendwie anders.

gruss
till

[Ashura]

Hallo till.

Nun bin ich gerade dabei die navigation nach deinem schema nachzubauen.
wenn ich jetzt aber den listen codeblock dupliziere und drunter setze, zerhaut es die darstellung.

[…]
habe ich da was falsch gemacht?

Nein, nicht du. Ich habe vergessen, das float:left für die ul-Elemente wieder aufzuheben. Dadurch kommt die Anordnung der folgenden ul-Elemente durcheinander.

Ich habe nun den li-Elementen ein clear:left verpasst. Damit stimmt die Anordnung wieder. (Mich wundert es wirklich, dass der IE all diese Spielchen mitmacht.)

Einen schönen Freitag noch.

Gruß, Ashura

[Ashura]

Hallo Gunnar™

Ich habe nun den li-Elementen ein clear:left verpasst.

Links ist da, wo der Daumen rechts ist. Ich meinte natürlich clear:right fürs float:right.

Einen schönen Freitag noch.

Gruß, Ashura

[till]

hi ashura,

erst mal ein dickes dankeschön!!

nur noch ne kleinigkeit, die dir sicherlich auch aufgefallen ist.
unser lieber ie macht einen abstand zwischen dem <h2> das unternehmen</h2> und dem restlichen block - hast du auch dafür eine lösung...

[Ashura]

Hallo till.

nur noch ne kleinigkeit, die dir sicherlich auch aufgefallen ist.
unser lieber ie macht einen abstand zwischen dem <h2> das unternehmen</h2> und dem restlichen block - hast du auch dafür eine lösung...

Dieser Fehler hängt offenbar mit dem Double-Float-Margin-Bug zusammen.

Dementsprechend behebt folgender http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hack den Darstellungsfehler:

* html ul li {  
  display:inline;  
}

Einen schönen Freitag noch.

Gruß, Ashura