Texter mit x: div innnerhalb von Navi-Liste, wo ist die "HTML-Schutz-Polizei"

Die Polizei soll ja auch Freund und Helfer sein, daher die Frage, wo ist der grüne Rechtsabbiegerpfeil an der roten Ampel?

Ich will eine alte Navigation neu auflegen. An jedem Link in der Navi hängt z.Z. als Gestaltungselement ein Kreuz bestehend aus zwei divs*. Das Kreuz möchte ich beibehalten und wenn möglich nicht wieder durch ein Bild ersetzen. (Geschichte der Navi: Grafik-Buttons -> Text mit Bild-Kreuz (Zwischenschritt für ein paar Tage) -> Text mit div-Kreuz -> ?)

Nun gehören die Links in eine Liste. Problem dabei, div in Liste ist laut HTML-Ordung mit Bußgeld belegt (oder habe ich mich falsch informiert?).

Was ist hier das Mittel der Wahl für eine vernünftig strukturierte Navigation?

*so siehts z.Z. aus:
HTML:
<div class="k"><a href="/">Index</a><div class="kv"></div><div class="kh"></div></div>

Das div um das a soll auch noch weg aber das soll hier nicht unbedingt  Thema sein.

CSS:

.k {  
float:left;  
border:1px solid #000;  
position:relative;  
margin:15px 0px 5px 30px;  
display:inline !important;  
}  
  
.kh {  
font-size:1px;  
width:53px;  
height:5px;  
position:absolute;  
top:-3px;  
left:-27px;  
background-color:#000000;  
}  
  
.kv {  
font-size:1px;  
width:5px;  
height:21px;  
position:absolute;  
top:-11px;  
left:-3px;  
background-color:#000000;  
}
  1. Nun gehören die Links in eine Liste. Problem dabei, div in Liste ist laut HTML-Ordung mit Bußgeld belegt (oder habe ich mich falsch informiert?).

    Nein, falsch informiert.

    Was ist hier das Mittel der Wahl für eine vernünftig strukturierte Navigation?

    Eine Unsortiereliste gefüllt mit Links, verzichte auf das div-Element - ich kann nicht erkennen, warum es wichtig wäre.

    1. Eine Unsortiereliste gefüllt mit Links, verzichte auf das div-Element - ich kann nicht erkennen, warum es wichtig wäre.

      Ich habe lange nach einer Lösung gesucht, die in allen berücksichtigten Browsern ein gewünschtes Ergebnis liefert, ohne div ohne Erfolg. Wenn ich mich recht entsinne habe ich einen Browser z.B. im Gesamtergebnis nicht dazu bewegen können den anklickbaren Bereich über den Text hinaus zu vergrößern. Aber vielleicht war das auch etwas, was ich doch noch gelöst habe und der endgülige Grund ein anderer.

      Ich will es aber noch mal versuchen.

  2. Hallo

    Ich will eine alte Navigation neu auflegen. An jedem Link in der Navi hängt z.Z. als Gestaltungselement ein Kreuz bestehend aus zwei divs*. Das Kreuz möchte ich beibehalten und wenn möglich nicht wieder durch ein Bild ersetzen. (Geschichte der Navi: Grafik-Buttons -> Text mit Bild-Kreuz (Zwischenschritt für ein paar Tage) -> Text mit div-Kreuz -> ?)

    Nun gehören die Links in eine Liste. Problem dabei, div in Liste ist laut HTML-Ordung mit Bußgeld belegt (oder habe ich mich falsch informiert?).

    Die <http://de.selfhtml.org/html/referenz/elemente.htm#li@title=HTML-Elementreferenz zu li> sagt etwas anderes (falls <li> innerhalb von <ol> oder <ul> benutzt wird.

    Was ist hier das Mittel der Wahl für eine vernünftig strukturierte Navigation?

    *so siehts z.Z. aus:
    HTML:
    <div class="k"><a href="/">Index</a><div class="kv"></div><div class="kh"></div></div>

    Das div um das a soll auch noch weg aber das soll hier nicht unbedingt  Thema sein.

    Im Rahmen einer Liste brauchst du dieses <div> ja auch nicht.

    CSS:

    .k {

    float:left;
    border:1px solid #000;
    position:relative;
    margin:15px 0px 5px 30px;
    display:inline !important;
    }

      
    Schließen sich float und position (abseits von static) gerade zuzüglich von display:inline; nicht aus? Das widerspricht sich doch mehrfach.  
      
    Wozu dienen die Kreuze überhaupt? Als Zierelement könntest du sie auch als Hintergrundbild vergeben. Im Falle, dass sie sich den Linkzuständen entsprechend ändern sollen, sind sie dem Link zuzuordnen.  
      
    Tschö, Auge  
    
    -- 
    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
    Terry Pratchett, "Wachen! Wachen!"  
      
    [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)
    
    1. Nun gehören die Links in eine Liste. Problem dabei, div in Liste ist laut HTML-Ordung mit Bußgeld belegt (oder habe ich mich falsch informiert?).

      Die <http://de.selfhtml.org/html/referenz/elemente.htm#li@title=HTML-Elementreferenz zu li>

      Grr, die habe ich nicht gefunden, nur die Kurzreferenz und da ist nur der Link zur Beschreibung, nicht zur Referenz. Da wo ich mich dann informiert habe, muß ich Quacksalbern aufgesessen sein.

      Schließen sich float und position (abseits von static) gerade zuzüglich von display:inline; nicht aus? Das widerspricht sich doch mehrfach.

      Ich habe mich damals intensiv damit beschäftigt irreguläre Verhalten von verschiedenen Browsern zu kompensieren und das ohne Browserweichen und dergleichen. Eventuell ist auch was wirklich sinnlos zurückgeblieben aber das meiste sollte seien Zweck haben, ich kann mich nur nicht mehr daran erinnern.

      Wozu dienen die Kreuze überhaupt? Als Zierelement könntest du sie auch als Hintergrundbild vergeben.

      Könnte ich, will ich aber vermeiden.

    2. Schließen sich float und position (abseits von static) gerade zuzüglich von display:inline; nicht aus? Das widerspricht sich doch mehrfach.

      Nein, es widerspricht sicht keineswegs. float und relative gemeinsam zu verwenden ist sinnvoll, wenn man innerhalb des floatenden Elements noch etwas positionieren will und das floatende Element als Ursprung dient.

      Das display: inline; hat in diesem Fall keine Wirkung, behebt aber den
      Doubled Float-Margin Bug - das !important ist aber überflüssig.

      1. Das display: inline; hat in diesem Fall keine Wirkung, behebt aber den
        Doubled Float-Margin Bug - das !important ist aber überflüssig.

        Wußt ichs doch :-D

        Das !important könnte meinen CSS-Eigenschften ähh -Fähigkeiten geschuldet gewesen sein.

        Ich mach mich mal an die Arbeit.

      2. Hallo

        Schließen sich float und position (abseits von static) gerade zuzüglich von display:inline; nicht aus? Das widerspricht sich doch mehrfach.

        Nein, es widerspricht sicht keineswegs. float und relative gemeinsam zu verwenden ist sinnvoll, wenn man innerhalb des floatenden Elements noch etwas positionieren will und das floatende Element als Ursprung dient.

        Ok.

        Das display: inline; hat in diesem Fall keine Wirkung, behebt aber den
        Doubled Float-Margin Bug

        Ich bin davon ausgegangen, dass ein zum Blockelement erklärtes Element per display:inline; explizit zum Inlineelement würde, womit Blockelementeigenschaften wie z.B. width, height, margin nicht mehr wirkten. Was so alles an einem vorbei geht, wenn man nicht auf die entsprechenden Probleme stößt. Namentlich ist mir dieser Bug zwar bekannt, nur bin ich ihm selbst nie aufgesessen. Wenn ich von der letzten Aktualisierung der Seite (3. Juni 2009) ausgehe, ist dieser Bug bei aktuellen IEs (7, 8) nicht mehr drin?

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        Veranstaltungsdatenbank Vdb 0.3
        1. Ich bin davon ausgegangen, dass ein zum Blockelement erklärtes Element per display:inline; explizit zum Inlineelement würde [...]

          Ist auch richtig - aber ein floatendes Element erzeugt einen Block formatting context - damit verhält es sich quasi wie ein Block-Element. Ob man jetzt display: block oder display: inline notiert ist dann egal, da du mit der display-Eigenschaft die float-Eigenschaft nicht überschreiben kannst.

          Wenn ich von der letzten Aktualisierung der Seite (3. Juni 2009) ausgehe, ist dieser Bug bei aktuellen IEs (7, 8) nicht mehr drin?

          Nein, der betrifft afaik nur den IE6 abwärts.

          1. Hi,

            [E]in floatendes Element erzeugt einen Block formatting context - damit verhält es sich quasi wie ein Block-Element. Ob man jetzt display: block oder display: inline notiert ist dann egal, da du mit der display-Eigenschaft die float-Eigenschaft nicht überschreiben kannst.

            Und wer's noch mal nachlesen möchte, schaue hier:
            CSS 2.1, 9.7 Relationships between 'display', 'position', and 'float'

            MfG ChrisB

            --
            Light travels faster than sound - that's why most people appear bright until you hear them speak.
          2. Hallo

            Ich bin davon ausgegangen, dass ein zum Blockelement erklärtes Element per display:inline; explizit zum Inlineelement würde [...]

            Ist auch richtig - aber ein floatendes Element erzeugt einen Block formatting context - damit verhält es sich quasi wie ein Block-Element.

            Ja, klar. Ich mach das immer (eine der von molily gezeigten Möglichkeiten) mit overflow, das hat für meine Zwecke immer gereicht. Da verdränge ich gern das nicht benötigte. Danke auch an Chris für den Link zur CSS-Doku.

            Tschö, Auge

            --
            Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
            Terry Pratchett, "Wachen! Wachen!"
            Veranstaltungsdatenbank Vdb 0.3
  3. Hi,

    Ich will eine alte Navigation neu auflegen. An jedem Link in der Navi hängt z.Z. als Gestaltungselement ein Kreuz bestehend aus zwei divs*. Das Kreuz möchte ich beibehalten und wenn möglich nicht wieder durch ein Bild ersetzen. (Geschichte der Navi: Grafik-Buttons -> Text mit Bild-Kreuz (Zwischenschritt für ein paar Tage) -> Text mit div-Kreuz -> ?)

    Also den zweiten Schritt vor dem dritten gemacht ...

    Ein optische Verzierung wäre als Hintergrundbild wesentich besser eingesetzt, als mittels zusätzlicher, keinerlei Inhalt transportierender Elemente.

    Was ist hier das Mittel der Wahl für eine vernünftig strukturierte Navigation?

    Eine Liste von Links, ohne zusätzlichen, sinnfreien Schnickschnack.
    Formatierung dieser per CSS, um das gewünschte Aussehen zu erreichen.

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
  4. Nachdem ich die letzten Tage viel versucht habe, suche ich noch mal nach Rat.

    Die bisher nur optisch differenzierten Bereiche der Navigation habe ich nun in entsprechendes HTML gegossen. Eine Navigation (navi_fix_1) mit Unterpunkten (sub_navi) und eine ohne Unterpunkte (navi_fix_2):

      <ul id="navi_fix_1">  
        <li>  
          <span>naviA1</span>  
          <ul id="sub_navi">  
            <li><a href="">sub_naviA1_1</a></li>  
            <li><a href="">sub_naviA1_2</a></li>  
            <li><a href="">sub_naviA1_3</a></li>  
          </ul>  
        </li>  
        <li><a href="index2.htm">naviA2</a></li>  
        <li><a href="">naviA3</a></li>  
      </ul>  
      <ul id="navi_fix_2">  
        <li><a href="">naviB1</a></li>  
        <li><a href="">naviB2</a></li>  
        <li><a href="">naviB3</a></li>  
        <li><a href="">naviB4</a></li>  
      </ul>
    

    (Die Navigation navi_fix_2 ist zwar wie die navi_fix_1 immer gleich, man könnte also denken es ist nur eine Navigation, sie ist aber für einen anderen "Themen"-Bereich (seitenthemen-unspezifische Navigationspunkte wie Impressum u.s.w.) und hat keine Unterpunkte.)

    Alle Navigationspunkte eines "Bereiches" sollen horizontal, also je Bereich in einer Zeile, dargestellt werden (solange es nicht zum Umbruch kommt). Die navi_fix_1 soll in der ersten Zeile und sub_navi in einer Zeile darunter dargestellt werden. Die navi_fix_2 soll rechts neben navi_fix_1 und bub_navi dargestellt werden und dazu in der Breite begrenzt (was auch schon bei relativ breitem viewport und vier Navigationspunkten gewollt zum Zeilenumbruch führt).

    so soll es aussehen:
    naviA1 naviA2 naviA3                                naviB1 naviB2
    sub_naviA1_1 sub_naviA1_2 sub_naviA1_3 naviA2       naviB3 naviB4

    (Auch bei der Verringerung der Breite des viewports sollte, muß aber nicht, naviA2 und naviA3 oberhalb der sub_navi dargestellt werden.)

    Aus Versehen, und für mich nicht recht nachvollziehbar, habe ich diese Darstellung mit folgenden CSS im FF2 und IE6 erreicht.

    #navi_fix_1, #navi_fix_2, #sub_navi {  
      list-style-type:none;  
      line-height:2.5em;  
      margin:0px;  
      padding:0px;  
    }  
      
    #navi_fix_1, #sub_navi {  
      float: left;  
    }  
      
    #navi_fix_2 {  
      width:30%;  
      float: right;  
    }  
      
    #navi_fix_1 li, #navi_fix_2 li, #sub_navi li {  
      list-style:none;  
      margin:15px 0px 15px 30px;  
      display: inline;  
    }  
      
    #navi_fix_1 a, #navi_fix_2 a, #sub_navi li a, #navi_fix_1 span, #navi_fix_2 span, #sub_navi span{  
      text-decoration:none;  
      padding:5px 8px;  
      border:1px solid #000;  
    }  
      
    .clear {  
      clear:both;  
      display:block;  
    }
    

    Im FF3 und FF3.5 sowie aktuellem Opera sieht es aber unbrauchbar aus, wobei das (ungewollte) Ergebnis von FF3.5 und Opera bei dem CSS nachvollziehbar ist. Dummerweise habe ich die vielen anderen Versuche nicht mit den aktuellen Browsern testen können und habe diese auch nicht gespeichert. Ich hatte nicht damit gerechnet, daß sich die Darstellungen zwischen FF2, 3 und 3.5 bei so überschaubarem CSS so unterscheiden.

    Nun die Frage, wie bekomme ich die sub_navi, als Liste innerhalb einer Liste, ohne absolute Positionierung in eine Zeile unter die navi_fix_1?

    Meine bisherigen Versuche waren zwar gezielt aber auf logischem Weg sehe ich eigentlich keine Möglichkeit und das Ergebnis des obigen Beispiels im FF2 hat mich schon überrascht. Die sub_navi als dritte Liste, statt als Liste in Liste, wären eine Notlösung die bestimmt nicht gutgeheißen wird.

    1. Hi,

      Nun die Frage, wie bekomme ich die sub_navi, als Liste innerhalb einer Liste, ohne absolute Positionierung in eine Zeile unter die navi_fix_1?

      Warum soll es denn ohne absolute Positionierung sein?

      Ohne wird schwierig, weil es sich um im DOM benachbarte Elemente handelt - da zwischendrin welche mit CSS woanders hinzubekommen, geht ohne Positionierung nur beschränkt.

      MfG ChrisB

      --
      Light travels faster than sound - that's why most people appear bright until you hear them speak.
      1. Nun die Frage, wie bekomme ich die sub_navi, als Liste innerhalb einer Liste, ohne absolute Positionierung in eine Zeile unter die navi_fix_1?

        Warum soll es denn ohne absolute Positionierung sein?

        Wegen der Nachteile bei der Flexibilität. Ich habe einige Umsetzungen gefunden, die aber alle mit absoluter Positionierung (und pixelgenau) gearbeitet haben. Die negativen Effekte die da auftreten kann man zwar mit em-Angaben (statt px) entschärfen aber alles bin ich noch nicht losgeworden.  Ich meld mich noch mal konkreter zu Wort.

        Ohne wird schwierig, weil es sich um im DOM benachbarte Elemente handelt - da zwischendrin welche mit CSS woanders hinzubekommen, geht ohne Positionierung nur beschränkt.

        Schon gemerkt, wobei ich mir natürlich sehr unsicher war, ob ich den Weg nur noch nicht gefunden habe. Vor allem, weil ich es im FF2 und IE zufällig hinbekommen habe.

        die Darstellung:
        naviA1                                          naviA2 naviA3
          sub_naviA1_1 sub_naviA1_2 sub_naviA1_3 naviA2

        naviA1 naviA2                                          naviA3
                 sub_naviA2_1 sub_naviA2_2 sub_naviA2_3 naviA2

        erhalte ich in allen Browsern, wenn ich #navi_fix_1 li floten lasse. Die nachfolgenden naviAx rücken aber nicht an das naviA1 ran (das wundert mich auch nicht, das ist der Platz den das li einnimmt).

        1. Nun die Frage, wie bekomme ich die sub_navi, als Liste innerhalb einer Liste, ohne absolute Positionierung in eine Zeile unter die navi_fix_1?

          Warum soll es denn ohne absolute Positionierung sein?

          Wegen der Nachteile bei der Flexibilität. Ich habe einige Umsetzungen gefunden, die aber alle mit absoluter Positionierung (und pixelgenau) gearbeitet haben. Die negativen Effekte die da auftreten kann man zwar mit em-Angaben (statt px) entschärfen aber alles bin ich noch nicht losgeworden.  Ich meld mich noch mal konkreter zu Wort.

          Ich bekomme es nicht hin. Bei jeder Lösungen liegen Elemente übereinander oder es bleiben Bereiche sinnlos frei, statt von anderen Elementen eingenommen zu werden, sobald es zu Zeilenumbrüchen kommt, die subnavi länger als die Hauptnavi ist oder umgekehrt.

          Hattest Du, absolut positioniert, etwas anderes im Sinn als etwas ohne Zeilenumbrüche?

          Ich bin kurz davor

            <ul id="navi_fix_1">  
              <li>naviA1</li>  
              <li>naviA2</li>  
              <li>naviA3</li>  
            </ul>  
            <ul id="sub_navi">  
              <li>sub_naviA1_1</li>  
              <li>sub_naviA1_2</li>  
              <li>sub_naviA1_3</li>  
            </ul>  
            <ul id="navi_fix_2">  
              <li>naviB1</li>  
              <li>naviB2</li>  
              <li>naviB3</li>  
              <li>naviB4</li>  
            </ul>
          

          oder etwas wie

            <ul id="navi_fix_1">  
              <li>  
                <ul>  
                  <li>naviA1</li>  
                  <li>naviA2</li>  
                  <li>naviA3</li>  
                </ul>  
                <ul id="sub_navi">  
                  <li>sub_naviA1_1</li>  
                  <li>sub_naviA1_2</li>  
                  <li>sub_naviA1_3</li>  
                </ul>  
              </li>  
            </ul>  
            <ul id="navi_fix_2">  
              <li>naviB1</li>  
              <li>naviB2</li>  
              <li>naviB3</li>  
              <li>naviB4</li>  
            </ul>
          

          zu nehmen.

          1. Hi,

            Ich bekomme es nicht hin. Bei jeder Lösungen liegen Elemente übereinander oder es bleiben Bereiche sinnlos frei, statt von anderen Elementen eingenommen zu werden, sobald es zu Zeilenumbrüchen kommt, die subnavi länger als die Hauptnavi ist oder umgekehrt.

            Zeig doch bitte mal an hand von Beispielen, wo die Problemfälle liegen.

            MfG ChrisB

            --
            Light travels faster than sound - that's why most people appear bright until you hear them speak.
            1. Ein paar Beispiele? Drei, zwanzig? Welchen Ansatz hast Du denn im Hinterkopf? Einen flexiblen?

              Hier ein paar Variationen von zwei Ansätzen:

                <ul id="navi_fix_1">  
                  <li>  
                    <span>naviA1</span>  
                    <ul id="sub_navi">  
                      <li><a href="">sub_naviA1_1</a></li>  
                      <li><a href="">sub_naviA1_2</a></li>  
                      <li><a href="">sub_naviA1_3</a></li>  
                    </ul>  
                  </li>  
                  <li><a href="">naviA2</a></li>  
                  <li><a href="">naviA3</a></li>  
                </ul>  
                <ul id="navi_fix_2">  
                  <li><a href="">naviB1</a></li>  
                  <li><a href="">naviB2</a></li>  
                  <li><a href="">naviB3</a></li>  
                  <li><a href="">naviB4</a></li>  
                </ul>
              

              CSS float-Variationen:

              #navi_fix_1 {  
                float: left;  
              }
              

              (hier wird die die Hauptnavigation #navi_fix_1 nicht in einer Zeile dargestellt*)

              #navi_fix_1, #navi_fix_1 li {  
                float: left;  
              }
              

              (hier wird die die Hauptnavigation #navi_fix_1 in einer Zeile dargestellt aber der Platz (Breite) den die sub_navi einnimmt bleibt in der Hauptnavi frei*)

              CSS Variationen mit position:

              #navi_fix_1 {  
                float: left;  
              }  
                
              #sub_navi {  
                position:absolute; top:3em; left:0px;  
              }
              

              (hier überlappen sich Elemente, wenn ein Zeilenumbruch erfolgt und auch schon vorher, wenn die sub_navi breiter ist als die Hauptnavigation und der viewport entsprechend schmal ist*)

              #navi_fix_1, #navi_fix_1 li {  
                float: left;  
              }  
                
              #sub_navi {  
                position:absolute; top:3em; left:0px;  
              }
              

              (hier überlappen sich die Elemente, bei geeignetem Zeilenabstand, nicht**, wenn ein Zeilenumbruch erfolgt aber auch schon vorher, wenn die sub_navi breiter ist als die Hauptnavigation*)

              weiteres CSS für alle gleich:

              #navi_fix_1, #navi_fix_2, #sub_navi {  
                list-style-type:none;  
                line-height:3em;  
                margin:0px;  
                padding:0px;  
              }  
                
              #navi_fix_2 {  
                width:30%;  
                float: right;  
              }  
                
              #navi_fix_1 li, #navi_fix_2 li, #sub_navi li {  
                list-style:none;  
                margin:15px 0px 15px 30px;  
                display: inline;  
              }  
                
              #navi_fix_1 a, #navi_fix_2 a, #sub_navi li a, #navi_fix_1 span, #navi_fix_2 span, #sub_navi span{  
                text-decoration:none;  
                padding:5px 8px;  
                border:1px solid #000;  
              }
              

              * was so weit logisch ist

              ** Die abwechselnde Anordnung von Elementen der Haupt- und der Subnavi ist aber etwas - naja, wer das Fenster so schmal macht, wird vielleicht damit leben müssen.

              Das verhält sich in den verschiedenen Browsern (IE habe ich vorerst nur die 6 testen können) auch weitgehend gleich. Von diesen Variationen ausgehend habe ich verschiedenes versucht, aber die grundlegenden Probleme, so sich überhaupt eine Auswirkung zeigt, bleiben gleich.

              Von der ersten Variation ausgehend will ich noch versuchen die Elemente der Hauptnavigation, absolut positioniert, von der dritten in die erste Zeile zu bekommen. Aber davon verspreche ich mir mindestens so viele Nachteile wie von den anderen Lösungen mit absoluter Positionierung.

              Bei Opera (immer in der rechten #navi_fix_2) und bei manchen Varianten beim IE (beide navi_fix) fallen nur die umbrechenden Rahmen und "eigenwilligen" Einrückungen bei Zeilenumbrüchen negativ auf, aber das hat mit dem eigentlichen Problem nichts zu tun.

              PS.: Das mit den noch vor dem Umbruch überlappenden Elementen (bei absolut positionierter sub_navi) habe ich teilweise in den Griff bekommen. Ich hatte die Breite der nav_fix_1 statt der sub_navi zugewiesen.
              hinzugefügt:

              #sub_navi {  
                width:60%;  
              }
              
              1. Hi,

                Ein paar Beispiele? Drei, zwanzig? Welchen Ansatz hast Du denn im Hinterkopf? Einen flexiblen?

                Ich würde gern erst mal genau wissen, was du letztendlich erreichen willst - wie es aussehen soll, und wie es sich in Sonderfällen (Sub-Navi über mehrere Zeilen) verhalten soll.

                Das ist mir nämlich trotz all der blumigen Erklärungen, was *nicht* funktioniert, immer noch nicht komplett klar.

                MfG ChrisB

                --
                Light travels faster than sound - that's why most people appear bright until you hear them speak.
                1. Ich würde gern erst mal genau wissen, was du letztendlich erreichen willst - wie es aussehen soll, und wie es sich in Sonderfällen (Sub-Navi über mehrere Zeilen) verhalten soll.

                  Das ist mir nämlich trotz all der blumigen Erklärungen, was *nicht* funktioniert, immer noch nicht komplett klar.

                  Das steht auch nicht dort wo ich erklärt habe was nicht funktioniert. Ich erkläre es aber gern noch mal.

                  Jede Navi (2 x Haupt, 1 x Sub) soll jeweils in einer Zeile dargestellt werden. Diese Zeilen sollen wie ganz normaler Fließtext umbrechen, wenn der zur Verfügung stehende Platz nicht ausreicht. Die Subnavi (S) soll dabei in einer Zeile unter der Hauptnavi (H1), zu der sie gehört, stehen. Die zweite Hauptnavi (H2) soll rechts neben der ersten Hauptnavi stehen und darf/soll unter die anderen Navis rutschen, wenn der zur Verfügung stehende Platz nicht ausreicht.

                  grundsätzlich:
                  H1_1 H1_2 H1_3        H2_1 H2_2 H2_3 H2_4
                  S_1_1 S_1_2 S_1_3

                  bzw. wenn der Punkt H1_2 aktiv ist:
                  H1_1 H1_2 H1_3        H2_1 H2_2 H2_3 H2_4
                  S_2_1 S_2_2 S_2_3

                  durch Begrenzung der Breite (in %) für die rechte Navi:
                  H1_1 H1_2 H1_3        H2_1 H2_2
                  S_1_1 S_1_2 S_1_3     H2_3 H2_4

                  bei Verinngerung der viewport-Breite:
                  H1_1 H1_2 H1_3 H2_1
                  S_1_1 S_1_2    H2_2
                  S_1_3          H2_3
                                 H2_4

                  noch schmaler:
                  H1_1 H1_2    H2_1
                  H1_3         H2_2
                  S_1_1 S_1_2  H2_3
                  S_1_3        H2_4

                  im Extremfall:
                  H1_1
                  H1_2
                  H1_3
                  S_1_1
                  S_1_2
                  S_1_3
                  H2_1
                  H2_2
                  H2_3
                  H2_4

                  Mit obigen Darstellungen soll _nicht_ veranschaulicht werden was zuerst umbrechen soll, das ist vom Inhalt der Navigation und von der prozentualen Breite der rechten Navi abhängig.

                  Zum Verhalten zwischen Hauptnavi und zugehöriger Subnavi beim Umbruch (bei entsprechend schmalem viewport):
                  Im Idealfall gibt es dazu nichts abweichendes zu sagen.

                  ideal:
                  H1_1
                  H1_2
                  H1_3
                  S_1_1
                  S_1_2
                  S_1_3
                  H2_1
                  H2_2
                  H2_3
                  H2_4

                  Wenn nicht anders möglich würde es mich aber auch nicht stören, wenn in dem Fall die Punkte der Hauptnavigation, die nach dem aktiven Punkt der Hauptnavigation stehen unter die Subnavi (des aktiven Punktes) rutschen.:
                  H1_1
                  S_1_1
                  S_1_2
                  S_1_3
                  H1_2
                  H1_3
                  H2_1
                  H2_2
                  H2_3
                  H2_4

                  bzw. wenn der Punkt H1_2 aktiv ist:
                  H1_1
                  H1_2
                  S_2_1
                  S_2_2
                  S_2_3
                  H1_3
                  H2_1
                  H2_2
                  H2_3
                  H2_4

                  Wenn jetzt noch was unklar ist, dann sag bitte was unklar ist.

                  1. Hi,

                    Das steht auch nicht dort wo ich erklärt habe was nicht funktioniert. Ich erkläre es aber gern noch mal.

                    Gut, du willst also ein Höchstemaß an Flexibilität, und hast dabei auch noch für jeden Sonderfall eine sehr spezielle Vorstellung, wie das ganze dann fliessen soll.

                    Nur fürchte ich, dass es über die aktuellen Fähigkeiten von CSS hinausgeht, das alles unkompliziert abzudecken bzw. umzusetzen.

                    Da sind wohl doch Kompromisse erforderlich - bspw. in Form bestimmter Mindestbreiten, die einfach nicht unterschritten werden dürfen.

                    MfG ChrisB

                    --
                    Light travels faster than sound - that's why most people appear bright until you hear them speak.
                    1. Gut, du willst also ein Höchstemaß an Flexibilität,

                      Flotende bzw. Inline-Elemente die am Zeilenende umbrechen.

                      und hast dabei auch noch für jeden Sonderfall eine sehr spezielle Vorstellung, wie das ganze dann fliessen soll.

                      Welche Sonderfälle? Wenn es keine verschachtelte Liste wäre, wäre das Verhalten das normalste Verhalten der Welt. Moment, selbst für eine verschachtelte Liste ist es völlig normal. Einzig die Bedingung, daß nachfolgende Hauptpunkte nicht unter der Subnavi dargestellt werden sollen, das aber zur Not aber auch nur solange es noch nicht zum Umbruch gekommen ist, macht es besonders. Komplizierter wird es mit absoluter Positionierung aber Sonderfälle sehe ich nicht.

                      Nur fürchte ich, dass es über die aktuellen Fähigkeiten von CSS hinausgeht, das alles unkompliziert abzudecken bzw. umzusetzen.

                      Das stimmt vermutlich. Meine Hoffnung war, daß man das im FF2 und IE7 (mein Fehler, überall wo ich vom IE6 geschrieben habe, war es der IE7) erzielte Ergebnis, siehe Beitrag vom 05. Oktober 2009, 19:43, mit korrektem CSS nachbilden kann.

                      Da sind wohl doch Kompromisse erforderlich - bspw. in Form bestimmter Mindestbreiten, die einfach nicht unterschritten werden dürfen.

                      Mindestbreiten so, daß es, außer in der rechten Navi, überhaupt nicht zum Umbruch kommt (solange niemand die Schriftgröße erhöht), oder woran denkst Du?