Zweimal float + einmal clear = nix float

[Robert]

Hallöle,

hab da ein Problemle mit float.
Genaugenommen damit, daß ich zwei Linklisten (eine senkrechte mit verlinkten Bildern, in den Beispielen Item 1, Item2, ...) und eine mit Textlinks (horizontal, ggf. mehrzeilig, Item A, Item B, ...) links floaten lassen will und den anschließenden Seiteninhalt zwar unter der horizontalen Liste, aber rechts neben der vertikalen Liste haben will.

Es soll also so aussehen:

Item 1  Item A  Item B  Item C  Item D  Item E
Item 2  Item F  Item G  Item H  Item I  Item J
Item 3  Item K  Item L
Item 4
Item 5  Irgendeine Überschrift
Item 6
Item 7  Es war einmal ein Mann, ...
Item 8
Item 9

Ok, für Liste 1 float left und Breite angegeben, kein Problem.
Bei der Liste 2 sollen die Items fließen, also bekommen die li das float left und ne Breite.
Gebe ich der Überschrift kein clear, passiert folgendes:

Item 1  Item A  Item B  Item C  Item D  Item E
Item 2  Item F  Item G  Item H  Item I  Item J
Item 3  Item K  Item L  Irgendeine Überschrift
Item 4
Item 5  Es war einmal ein Mann, ...
Item 6
Item 7
Item 8
Item 9

Die Überschrift sitzt also (abhängig von Fensterinnenbreite und Schriftgröße) meist nicht unterhalb der Liste 2, sondern (teilweise) rechts neben den Items.

Gebe ich der Überschrift clear:left, passiert das:

Item 1  Item A  Item B  Item C  Item D  Item E
Item 2  Item F  Item G  Item H  Item I  Item J
Item 3  Item K  Item L
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
        Irgendeine Überschrift

Es war einmal ein Mann, ...

Der clear tut also genau das, was er laut Standart soll - er hebt das gesamte Gefloate auf. Ich hätte aber gerne nur ein float aufgehoben durch clear.

Benutze ich float:right für die items der Liste 2, bekomme ich die Überschrift per clear:right an die richtige Stelle - aber die Items hängen natürlich rechts und in der falschen Reihenfolge:

Item 1    Item E  Item D  Item C  Item B  Item A
Item 2    Item J  Item I  Item H  Item G  Item F
Item 3                            Item L  Item K
Item 4
Item 5  Irgendeine Überschrift
Item 6
Item 7  Es war einmal ein Mann, ...
Item 8
Item 9

Gibt es eine Lösung, die ohne position auskommt? Und natürlich ohne Tabelle.
Bevorzugt auch mit möglichst wenig zusätzlichen div- oder sonstigen Elementen.

Ich kann leider im Moment keine Testseite zur Verfügung stellen, da ich gerade Probleme mit meinem Webspace habe. Ich kann aber die Test-Datei hier posten, wenn gewünscht, weiß aber nicht, ob die nicht zu lang ist (~ 60 Zeilen).

cu,
Robert

[Kalle]

Hi, Robert,

nur eine Idee: Packe die einzelnen Gruppen doch mal in <div> ein ...

Kalle

[Robert]

Hallöle, ich nochmal,

für den Opera krieg ich es hin.
Und zwar indem ich für die Liste zwei die li-Elemente nicht floate, sondern als display:inline-block; definiere.
Dann kann auch das clear bei der Überschrift wegfallen, so daß sie nicht mehr unterhalb des letzten items der Liste 1 dargestellt wird.

inline-block funktioniert aber im IE nicht.

Und (was mich etwas wundert) auch im Mozilla nicht - ich dachte, Cheatah hätte das mal für irgendwas erfolgreich genutzt.

cu,
Robert

[Ingo Turski]

Hi,

Genaugenommen damit, daß ich zwei Linklisten

das ist Dein erster Fehler: Du hast bzw. brauchst nur _eine_ Liste.

Es soll also so aussehen:

Item 1  Item A  Item B  Item C  Item D  Item E

<ul>
  <li>Item 1<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
    <li>Item D</li>
    <li>Item E</li>
  </ul></li>
...
</ul>

ul li ul { margin-top:-1.2em; }
ul li ul li { display:inline; }

Gibt es eine Lösung, die ohne position auskommt? Und natürlich ohne Tabelle.
Bevorzugt auch mit möglichst wenig zusätzlichen div- oder sonstigen Elementen.

Wie Du siehst: Ja. Du mußt sie nur noch etwas ergänzen und verfeinern.

freundliche Grüße
Ingo

[Robert]

Hallöle,

Genaugenommen damit, daß ich zwei Linklisten
das ist Dein erster Fehler: Du hast bzw. brauchst nur _eine_ Liste.

Hm.

Es soll also so aussehen:
Item 1  Item A  Item B  Item C  Item D  Item E
<ul>
  <li>Item 1<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
    <li>Item D</li>
    <li>Item E</li>
  </ul></li>
...
</ul>

Werd ich mal ausprobieren.

Hm, das führt zu nix vernünftigem - da die Anzahl der Items auf verschiedenen Seiten stark schwankt und ich außerdem keinen Einfluß auf Fensterbreite und Schriftgröße habe, weiß ich nicht, wieviele Zeilen die Items einnehmen. Und der Inhaltsbereich (Überschrift, Text) floatet damit nicht wirklich unterhalb der Items, sondern überlagert sie zum Teil.

ul li ul { margin-top:-1.2em; }
ul li ul li { display:inline; }

Dann kann ich dem li aber keine width/height mehr zuordnen.
Wäre

ul li ul li { display:inline; }
ul li ul li a { display:block; width:10em; }

erlaubt? Sprich: ein block-formatiertes Element in einem inline-formatierten Element?

cu,
Robert

[Ingo Turski]

Hi,

Hm, das führt zu nix vernünftigem - da die Anzahl der Items auf verschiedenen Seiten stark schwankt und ich außerdem keinen Einfluß auf Fensterbreite und Schriftgröße habe, weiß ich nicht, wieviele Zeilen die Items einnehmen. Und der Inhaltsbereich (Überschrift, Text) floatet damit nicht wirklich unterhalb der Items, sondern überlagert sie zum Teil.

Gerade float passt sich flexibel an die Gegebenheiten des Fensters und der Schriftgrößen an. Ich sehe da kein Problem.

ul li ul { margin-top:-1.2em; }
ul li ul li { display:inline; }

Dann kann ich dem li aber keine width/height mehr zuordnen.

wozu benötigst Du dies? Du weisst doch meist nicht, welche Weiten passend sind.

Wäre

ul li ul li { display:inline; }
ul li ul li a { display:block; width:10em; }

erlaubt? Sprich: ein block-formatiertes Element in einem inline-formatierten Element?

natürlich, CSS-Formatierungen ändern das HTML-Markup und dessen Validität nicht. Aber das a würde dann einen Zeilenvorschub bewirken. Besser wäre wohl dann, den li display:block und float:left zuzuweisen. Dann hättest Du hier auch Deine Größenangabe.

freundliche Grüße
Ingo

[Robert]

Hallöle,

Wäre
ul li ul li { display:inline; }
ul li ul li a { display:block; width:10em; }
erlaubt? Sprich: ein block-formatiertes Element in einem inline-formatierten Element?
natürlich, CSS-Formatierungen ändern das HTML-Markup und dessen Validität nicht.

Daß die Validität des HTML nicht von CSS abhängt, ist klar.

Aber erlaubt CSS, daß in einem display:inline formatierten Element ein oder mehrere Elemente mit display:block enthalten sind?
(mal ganz abgesehen davon, wie das dann formatiert wird)

Aber das a würde dann einen Zeilenvorschub bewirken. Besser wäre wohl dann, den li display:block und float:left zuzuweisen. Dann hättest Du hier auch Deine Größenangabe.

Back to square one. Dann wird bei entsprechendem Platz wieder die auf die Liste folgende Überschrift neben die list-items gezogen.

cu,
Robert

[at]

Hallo.

Daß die Validität des HTML nicht von CSS abhängt, ist klar.

Dann sollte sich die Frage

Aber erlaubt CSS, daß in einem display:inline formatierten Element ein oder mehrere Elemente mit display:block enthalten sind?

doch gar nicht stellen.

(mal ganz abgesehen davon, wie das dann formatiert wird)

(Mal ganz abgesehen davon, dass es so formatiert wird, wie es zu erwarten ist.)
MfG, at

[Robert]

Hallöle,

Daß die Validität des HTML nicht von CSS abhängt, ist klar.

Dann sollte sich die Frage

Aber erlaubt CSS, daß in einem display:inline formatierten Element ein oder mehrere Elemente mit display:block enthalten sind?

doch gar nicht stellen.

Doch, natürlich. Ich will wissen, ob das in CSS erlaubt ist.
Ich will nicht nur valides _und_ korrektes HTML, sondern auch valides _und_ korrektes CSS - wann immer es möglich ist.

cu,
Robert

[Ingo Turski]

Hi,

Doch, natürlich. Ich will wissen, ob das in CSS erlaubt ist.
Ich will nicht nur valides _und_ korrektes HTML, sondern auch valides _und_ korrektes CSS - wann immer es möglich ist.

Verstehe doch einfach, daß die Validitäten in keiner Weise voneinander abhängen. Der HTML-Validator validiert nicht das CSS und der CSS-Validator nicht das HTML (von Kodierungsfehlern einmal abgesehen, sofern man ihn die CSS-Dateien im HTML-File suchen läßt).

freundliche Grüße
Ingo

[Robert]

Hallöle,

Verstehe doch einfach, daß die Validitäten in keiner Weise voneinander abhängen.

Das habe ich verstanden. Schon vor Jahren.

Aber trotzdem will ich wissen, ob _IN_  _CSS_ irgendwo festgelegt ist, ob ein display:inline-Element ein display:block-Element enthalten darf oder nicht.

Es geht mir nicht darum, ob diese Elemente in HTML als inline- oder blocklevel definiert sind.

bla { float:left; }
wird zum Beispiel vom CSS-Validator als valide bezeichnet, ist aber falsch, wenn das Element keine explizite Breite besitzt.
Es gibt im CSS-Standard eben Dinge, die verboten sind, die aber für den Validator nicht zu erfassen sind.
So wie ja auch der HTML-Validator bei dem fehlerhaften <img src="bla.png" alt="" width="20px"> die px nicht anmeckern kann (weil formal nicht ausdrückbar ist, daß das width-Attribut nur eine Zahl enthalten darf). Dennoch ist es falsch.

Und ich will eben wissen, ob es irgendwo im CSS-Standard eine Stelle gibt, die verbietet, ein display:block-Element in ein display:inline-Element zu packen.

cu,
Robert

[Ingo Turski]

Hi,

bla { float:left; }
wird zum Beispiel vom CSS-Validator als valide bezeichnet, ist aber falsch, wenn das Element keine explizite Breite besitzt.

Korrekt. Und das kann der CSS-Validator im Übrigen auch nicht wissen. Und valide betrifft hier ohnehin nur die Syntax.

Und ich will eben wissen, ob es irgendwo im CSS-Standard eine Stelle gibt, die verbietet, ein display:block-Element in ein display:inline-Element zu packen.

Nein. Die Regel, daß inline-Elemente keine blockleve-Elemente enthalten dürfen, ist eine HTML-Regel, bei der es auch nicht um die Darstellung der Elemente, sondern um die Elemente selbst geht.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Aber trotzdem will ich wissen, ob _IN_  _CSS_ irgendwo festgelegt ist, ob ein display:inline-Element ein display:block-Element enthalten darf oder nicht.

Meines Wissens gibt es keine solche Festlegung.

Das wäre auch nicht sinnvoll, da dann z.B. die bekannten Info-Boxen

<a href="bla">blubb<span>info</span></a>
mit
a span { display:none; }
a:hover span { display:block; position: absolute; /*...*/ }

und andere, ähnliche Effekte nicht möglich wären.
(Position:absolute impliziert zwar schon display:block, aber das display:none muß m.E. explizit aufgehoben werden - http://www.w3.org/TR/REC-CSS2/visuren.html#q24 sagt ja, daß position ignoriert wird, wenn display:none gilt - und der Selektor a span trifft ja auch auf ein gehovertes span zu)

cu,
Andreas

[Ingo Turski]

Hi,

Back to square one. Dann wird bei entsprechendem Platz wieder die auf die Liste folgende Überschrift neben die list-items gezogen.

Du kennst clear?

freundliche Grüße
Ingo

[Robert]

Hallöle,

Back to square one. Dann wird bei entsprechendem Platz wieder die auf die Liste folgende Überschrift neben die list-items gezogen.
Du kennst clear?

Ja, klar. Siehe Ursprungspost. Mit clear wandert die Überschrift bis unter das letzte Item der linken Liste.

Das Problem ist ja (und war es von Anfang an), daß ich zwei floats habe (den links für das senkrechte Menü) und den oben (für das horizontale ggf. mehrzeilige Menü), aber nur einen (nämlich den oben) beenden will. clear beendet aber immer ALLE floats auf den angegebenen Seiten (left/right/both).

cu,
Robert

[Robert]

Hallöle,

irgendwie krieg ich das nicht auf die Reihe.

So wie im unten folgenden Code (kann leider immer noch nicht uploaden) stelle ich es mir vor, nur daß eben die Items der zweiten Liste (Kapitelnavigation) nicht von rechts nach links, sondern von links nach rechts floaten sollen.

Wichtig ist mir, daß das ganze (so gut wie) unabhängig von der Fenster- oder Schrift-Größe funktioniert und schön "floatet". (Fenster schmäler als 10em sind mir wurscht)

cu,
Robert

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Testseite</title>
<style type="text/css">
body { width: 98%; max-width: 80em; height: 98%;
  margin: 0 auto; padding: 0.6%; border: none;
   color: black; background-color: #feb;   }
ul.Navigation {  list-style-type: none;
     margin: 0; padding: 0; }
ul.Navigation li { display: block;
     list-style-type: none;
     margin: 0.2em; padding: 0.1em; border:1px solid black;
     float: right; /* hier wäre left ideal, aber dann klappt nix mehr */
     width: 8.4em;
     text-align:center;  }
ul#Kapitelnavigation {  margin-left: 90px; /* Pixel-Maß, da Hauptnavigation feste Pixel-Breite hat */ }
ul#Hauptnavigation {  width:80px; /* hier kommen im Endeffekt Bilder rein, daher Pixel-Maße */
      float:left; }
ul#Hauptnavigation li {  float:left;
       width:66px; /* Pixelmaß, da Inhalt ein Bild sein wird */
       height:75px; }
div#Inhalt {  margin-left: 90px; /* Pixel-Maß, da Hauptnavigation feste Pixel-Breite hat */
     clear:right;  /* siehe oben, im Zusammenhang mit float:right; */ }
</style>
</head><body>
<ul id="Hauptnavigation" class="Navigation"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul>
<ul id="Kapitelnavigation" class="Navigation"> <li>Item A</li> <li>Item B</li> <li>Item C</li> <li>Item D</li> <li>Item E</li> <li>Item F</li> <li>Item G</li> <li>Item H</li> <li>Item I</li> <li>Item J</li> <li>Item K</li> <li>Item L</li> <li>Item M</li> <li>Item N</li> <li>Item O</li> </ul>
<div id="Inhalt">
 <h1>Eine Überschrift</h1>
 <p> Es war einmal ein Mann, der hatte sieben Söhne. Eines Tages baten ihn seine sieben Söhne: "Ach lieber, Vater, erzähle doch Deinen sieben Söhnen eine Geschichte!". Da fing der Vater an: </p>
 <p> Es war einmal ein Mann, der hatte sieben Söhne. Eines Tages baten ihn seine sieben Söhne: "Ach lieber, Vater, erzähle doch Deinen sieben Söhnen eine Geschichte!". Da fing der Vater an: </p>
</div>
</body></html>

[Ingo Turski]

Hi,

<ul id="Hauptnavigation" class="Navigation"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul>
<ul id="Kapitelnavigation" class="Navigation"> <li>Item A</li>

wenn Du das so machst, stehen die beiden Listen doch in keinem Zusammenhang zueinander - weder inhaltlich, noch vom Layout her. Das ist ungefähr so, als wenn Du ein Formular in eine zweiszeilige Tabelle setzt und mit br's arbeitest und dann hoffst, daß die Eingabefelder auch wirklich neben dem Promts stehen.

freundliche Grüße
Ingo

[Robert]

Hallöle,

<ul id="Hauptnavigation" class="Navigation"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul>
<ul id="Kapitelnavigation" class="Navigation"> <li>Item A</li>
wenn Du das so machst, stehen die beiden Listen doch in keinem Zusammenhang zueinander - weder inhaltlich, noch vom Layout her. Das ist ungefähr so, als wenn Du ein Formular in eine zweiszeilige Tabelle setzt und mit br's arbeitest und dann hoffst, daß die Eingabefelder auch wirklich neben dem Promts stehen.

Die beiden Listen stehen ja auch zumindest designmäßig nicht im Zusammenhang. Die linke vertikale Liste soll Bildchen (60*75) enthalten. Die horizontale Liste wird kurze Text-Navigationspunkte enthalten - diese sollen als Buttons designed werden (alle gleich groß, mit 3D-Border usw.) Die Größe dieser Buttons soll - weil sie Text enthalten - von der Schriftgröße abhängig sein, also width und height in em. Schon allein von daher - einmal feste px-Größe, einmal nicht-feste em-Größe  - ergibt sich, daß kein design-mäßiger Zusammenhang existert.

Links soll eine Spalte mit Bild-Buttons sein mit den Hauptbereichen der Seite, oben soll ein Bereich mit den Text-Buttons für den aktuell ausgewählten Bereich sein.

Egal welcher Hauptbereich ausgewählt ist, sollen die Text-Buttons immer ganz oben anfangen und halt so viele Zeilen belegen, wie sie benötigen.

Der jeweils gewählte Hauptbereich in der linken Bilderspalte wird durch farbige Hervorhebung angezeigt.

Danke jedenfalls für Deine Bemühungen.

cu,
Robert

[Ingo Turski]

Hi,

Die beiden Listen stehen ja auch zumindest designmäßig nicht im Zusammenhang.

laut Deiner Eingangsbeschreibung:

Es soll also so aussehen:

Item 1  Item A  Item B  Item C  Item D  Item E
Item 2  Item F  Item G  Item H  Item I  Item J
Item 3  Item K  Item L
Item 4
Item 5  Irgendeine Überschrift
Item 6
Item 7  Es war einmal ein Mann, ...
Item 8
Item 9

aber schon. Oder ich habe die Skizze falsch interpretiert? Ich sehe hier einen Zusammenhang zwischen Item 1 und Item A - E, zwischen Item 2 und Item F - K usw.

Die linke vertikale Liste soll Bildchen (60*75) enthalten. Die horizontale Liste wird kurze Text-Navigationspunkte enthalten -

Ja und? alles eine Frage von richtig (und zugegeben nicht ganz einfach) einzusetzendem CSS. Du kannst eine Liste wirklich xtrem vielseitig formatieren.

diese sollen als Buttons designed werden (alle gleich groß, mit 3D-Border usw.) Die Größe dieser Buttons soll - weil sie Text enthalten - von der Schriftgröße abhängig sein, also width und height in em. Schon allein von daher - einmal feste px-Größe, einmal nicht-feste em-Größe  - ergibt sich, daß kein design-mäßiger Zusammenhang existert.

wieso px und em? Wo ist hier px? Und überhaupt: grafisch wirkende Buttons lassen sich über CSS ganz prima erzeugen - ganz ohne Bilder und feste px-Werte.

Egal welcher Hauptbereich ausgewählt ist, sollen die Text-Buttons immer ganz oben anfangen und halt so viele Zeilen belegen, wie sie benötigen.

genau das machen floatende Elemente doch - wenn Du sie oben angibst bzw. nach oben hin ausrichtest.

freundliche Grüße
Ingo

[Robert]

Hallöle,

laut Deiner Eingangsbeschreibung:

Es soll also so aussehen:
Item 1  Item A  Item B  Item C  Item D  Item E
Item 2  Item F  Item G  Item H  Item I  Item J
Item 3  Item K  Item L
aber schon. Oder ich habe die Skizze falsch interpretiert? Ich sehe hier einen Zusammenhang zwischen Item 1 und Item A - E, zwischen Item 2 und Item F - K usw.

Wenn Du die zugehörige Beschreibung gelesen hättest, hättest Du von 2 (in Worten: zwei) Listen gelesen.
So wie Du es verstehen willst, wären es aber mehr als 2 Listen.

Die linke vertikale Liste soll Bildchen (60*75) enthalten. Die horizontale Liste wird kurze Text-Navigationspunkte enthalten -
Ja und? alles eine Frage von richtig (und zugegeben nicht ganz einfach) einzusetzendem CSS. Du kannst eine Liste wirklich xtrem vielseitig formatieren.

Das ist mir ja auch klar, daß ich Listen vielfältig formatieren kann.

Das Problem, das ich habe, ist, daß ich mit clear nicht nur einen float, sondern ALLE floats beende.

So bekomme ich die Überschrift, die nach der Liste steht, nicht direkt unter die horizontale Liste, sondern unter das letzte Element der vertikalen Liste.

Oder aber (wenn ich auf clear verzichte) neben die letzten Elemente der horizontalen Liste.

diese sollen als Buttons designed werden (alle gleich groß, mit 3D-Border usw.) Die Größe dieser Buttons soll - weil sie Text enthalten - von der Schriftgröße abhängig sein, also width und height in em. Schon allein von daher - einmal feste px-Größe, einmal nicht-feste em-Größe  - ergibt sich, daß kein design-mäßiger Zusammenhang existert.

wieso px und em? Wo ist hier px?

Die eine Liste soll Grafiken enthalten. Grafiken haben üblicherweise Maße in Pixeln.

Und überhaupt: grafisch wirkende Buttons lassen sich über CSS ganz prima erzeugen

Ich habe das Gefühl, Du liest gar nicht, was ich schreibe.

Ich will in der einen Liste Grafiken haben (mit Pixel-Maßen) und in der anderen Liste Texte, die per CSS wie Buttons designed werden.

ganz ohne Bilder und feste px-Werte.

Ohne Bilder geht das nur für die Text-Buttons. Für die Buttons, die Bilder enthalten sollen, brauche ich selbstverständlich Bilder. Und damit habe ich feste px-Werte.

Egal welcher Hauptbereich ausgewählt ist, sollen die Text-Buttons immer ganz oben anfangen und halt so viele Zeilen belegen, wie sie benötigen.
genau das machen floatende Elemente doch - wenn Du sie oben angibst bzw. nach oben hin ausrichtest.

Ja, ich will aber nach den floatenden Elementen der horizontalen Liste weitere Elemente haben, die NICHT neben diesen floatenden Elementen der horizontalen Liste stehen, aber NEBEN der vertikalen Liste.

Und das bekomme ich eben nicht hin, weil clear ALLE floats beendet.

cu,
Robert

[Ingo Turski]

Hi,

Wenn Du die zugehörige Beschreibung gelesen hättest, hättest Du von 2 (in Worten: zwei) Listen gelesen.

habe ich - und bemerkt:

Du hast bzw. brauchst nur _eine_ Liste.

und ich sehe immer noch keinen Anhaltspunkt dagegen.

So wie Du es verstehen willst, wären es aber mehr als 2 Listen.

Natürlich meine ich eine verschachtelte Liste.

Und überhaupt: grafisch wirkende Buttons lassen sich über CSS ganz prima erzeugen

Ich habe das Gefühl, Du liest gar nicht, was ich schreibe.

Ich will in der einen Liste Grafiken haben (mit Pixel-Maßen) und in der anderen Liste Texte, die per CSS wie Buttons designed werden.

doch. Nur wollte ich hiermit ausdrücken, daß dies u.U. auch ohne Grafiken - jedenfalls solche über IMG mit fixen Größen eingebundene - realisieren läßt.

Ja, ich will aber nach den floatenden Elementen der horizontalen Liste weitere Elemente haben, die NICHT neben diesen floatenden Elementen der horizontalen Liste stehen, aber NEBEN der vertikalen Liste.

Und das bekomme ich eben nicht hin, weil clear ALLE floats beendet.

Warum sagst Du das nicht gleich so deutlich? Auch wenn ich das sonst ablehne, aber hierfür würde sich position:absolute vielleicht anbieten. Eine weitere und vielleicht bessere Lösung hast Du vielleicht noch garnicht versucht: float:right wird von clear:left nicht beeinflußt.

freundliche Grüße
Ingo

[Robert]

Hallöle,

Ich habe das Gefühl, Du liest gar nicht, was ich schreibe.

Der Meinung bin ich immer noch bzw. immer mehr.

Und das bekomme ich eben nicht hin, weil clear ALLE floats beendet.
Warum sagst Du das nicht gleich so deutlich?

Zitat aus meinem allerersten Posting:

Der clear tut also genau das, was er laut Standart soll - er hebt das gesamte Gefloate auf. Ich hätte aber gerne nur ein float aufgehoben durch clear.

Zitatende. (Der Tippfehler bei Standard war schon im Originalposting)

Zitat aus dem Posting von 21:25

Das Problem ist ja (und war es von Anfang an), daß ich zwei floats habe (den links für das senkrechte Menü) und den oben (für das horizontale ggf. mehrzeilige Menü), aber nur einen (nämlich den oben) beenden will. clear beendet aber immer ALLE floats auf den angegebenen Seiten (left/right/both).

Zitatende.

Eine weitere und vielleicht bessere Lösung hast Du vielleicht noch garnicht versucht: float:right wird von clear:left nicht beeinflußt.

Zitat aus meinem ersten Posting:

Benutze ich float:right für die items der Liste 2, bekomme ich die Überschrift per clear:right an die richtige Stelle - aber die Items hängen natürlich rechts und in der falschen Reihenfolge:

Zitatende.

Trotzdem Danke für Deine Mühen.

cu,
Robert

[Ingo Turski]

Hi,
ich glaube Du hast recht und ich habe Dein Eingangsposting falsch verstanden und wohl auch nicht ganz rübergebracht, wie ich es genau interpretiert habe. Das lag daran, daß ich meist erst die logische Struktur sehe und dann das Layout. Gehe ich nun Recht in der Annahme, daß Dein Beispiel ein Hauptmenü mit den Items 1-9 und ein Submenü mit den Items A-L darstellt?

Hierfür wäre die logische Umsetzung mMn _eine_ verschachtelte Liste, in der das Submenü in dem jeweiligem Listenpunkt integriert ist. Wenn das Submenü aber stets oben angezeigt werden soll, wäre absolute Positionierung erforderlich, was aber wegen der evtl. vorhandenen Umbrüche beim Submenü keine Festlegung des oben erforderlichen Abstandes für die Überschrift ermöglicht. Somit sehe ich leider (wie Du auch) keine andere Möglichkeit, als z.B. zwei Listen zu verwenden.

Die einfachste Lösung für das Problem mit clear, nämlich die Subnavigationspunkte display:inline zu formatieren, schließt Du wegen der nötigen Breitenangaben aus. Die zweiteinfachste Möglichkeit, sie mit float:right zu formatieren auch - wegen der dann nötigen umgekehrten Reihenfolge im Quelltxt und rechtsbündigen Anzeige - verständlich. Dann fallen mir noch zwei Alternativen und ein unsauberer Hack ein.

1. position:absolute für das Hauptmenü. Der Code wäe z.B.:

#links { position:absolute; top:0; left:0; width:10em; margin:1em; }
#rechts { margin-left:11em; }
#rechts ul li { float:left; width:10em; }
#rechts h1 { clear:left; }

<ul id="links">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>
<div id="rechts">
  <ul>
    <li>ItemA</li> <li>ItemB</li> <li>ItemC</li> <li>ItemD</li> <li>ItemE</li>
    <li>ItemF</li> <li>ItemG</li> <li>ItemH</li> <li>ItemI</li> <li>ItemJ</li>
    <li>ItemK</li> <li>ItemL</li>
  </ul>
  <h1>Irgendeine &Uuml;berschrift</h1>
  <p>Es war einmal ein Mann, ...</p>
</div>

Da das Hauptmenü ohnehin links-oben angezeigt werden soll, dürfte die absolute Positionierung hier nicht von Nachteil sein. Falls doch, ginge evtl. auch:

2. float:right für das Submenü und den Inhaltsbereich.

Hierzu müßte dieses DIV im Quelltext vorangesetzt werden und das CSS könnte z.B. so aussehen:

#links { /* Angaben zur Weite nicht unbedingt sinnvoll */ }
#rechts { float:right; width:80%; }
#rechts ul li { float:left; width:10em; }
#rechts h1 { clear:left; }

Oder halt ein Hack, der (warum auch immer;-) zumindest im IE6, Mozilla und Opera funktioniert:

Du formatierst #links mit float:left wie in Deinem ersten Ansatz, verzichtetst aber auf clear und fügst stattdessen vor der Überschrift ein:

<div style="width:10em;">&nbsp;</div>

Tja, ich hoffe Dich nun richtig verstanden zu haben.. ;-)
Freundliche Grüße
Ingo

[Robert]

Hallöle,

ich glaube Du hast recht und ich habe Dein Eingangsposting falsch verstanden und wohl auch nicht ganz rübergebracht, wie ich es genau interpretiert habe. Das lag daran, daß ich meist erst die logische Struktur sehe und dann das Layout. Gehe ich nun Recht in der Annahme, daß Dein Beispiel ein Hauptmenü mit den Items 1-9 und ein Submenü mit den Items A-L darstellt?

Richtig!

Hierfür wäre die logische Umsetzung mMn _eine_ verschachtelte Liste, in der das Submenü in dem jeweiligem Listenpunkt integriert ist.

Ja, aber ...

Wenn das Submenü aber stets oben angezeigt werden soll, wäre absolute Positionierung erforderlich, was aber wegen der evtl. vorhandenen Umbrüche beim Submenü keine Festlegung des oben erforderlichen Abstandes für die Überschrift ermöglicht. Somit sehe ich leider (wie Du auch) keine andere Möglichkeit, als z.B. zwei Listen zu verwenden.

Genau.

Die einfachste Lösung für das Problem mit clear, nämlich die Subnavigationspunkte display:inline zu formatieren, schließt Du wegen der nötigen Breitenangaben aus. Die zweiteinfachste Möglichkeit, sie mit float:right zu formatieren auch - wegen der dann nötigen umgekehrten Reihenfolge im Quelltxt und rechtsbündigen Anzeige - verständlich. Dann fallen mir noch zwei Alternativen und ein unsauberer Hack ein.

Eine weitere Alternative (display:inline-block aus CSS 2.1) scheidet mangels Unterstützung im IE/Mozilla aus.

1. position:absolute für das Hauptmenü. Der Code wäe z.B.:
   Da das Hauptmenü ohnehin links-oben angezeigt werden soll, dürfte die absolute Positionierung hier nicht von Nachteil sein.

Damit ginge es zur Not, das hat aber den Nachteil, das die Breitenbeschränkung des body (max-width) mit Zentrierung (margin:0 auto;) nicht mehr bzw. nur mit erheblichem Zusatzaufwand funktioniert.

2. float:right für das Submenü und den Inhaltsbereich.
   #links { /* Angaben zur Weite nicht unbedingt sinnvoll */ }
   #rechts { float:right; width:80%; }
   #rechts ul li { float:left; width:10em; }
   #rechts h1 { clear:left; }

Damit ist wieder das gesamte float:left (also auch das des Hauptmenüs) aufgehoben. Leider gibt es kein float:left(<number>); mit dem nur eine bestimmte Anzahl floats aufgehoben wird. Oder eine Schachtelung von dann unabhängigen floats...

Oder halt ein Hack, der (warum auch immer;-) zumindest im IE6, Mozilla und Opera funktioniert:
Du formatierst #links mit float:left wie in Deinem ersten Ansatz, verzichtetst aber auf clear und fügst stattdessen vor der Überschrift ein:
<div style="width:10em;">&nbsp;</div>

Das scheint die einfachste Lösung zu sein. Ist zwar ein sinnloses Element in der Seite, aber ohne scheint es ohnehin nicht zu gehen.
Muß ich mal drüber nachdenken, warum das funktioniert.

Tja, ich hoffe Dich nun richtig verstanden zu haben.. ;-)

Sieht so aus. Sorry, falls ich unfreundlich geklungen haben sollte - das Problem hat mich tierisch genervt.

Vielen Dank für Deine Geduld mit mir.

Robert

[Ingo Turski]

Hi,

1. position:absolute für das Hauptmenü. Der Code wäe z.B.:

Damit ginge es zur Not, das hat aber den Nachteil, das die Breitenbeschränkung des body (max-width) mit Zentrierung (margin:0 auto;) nicht mehr bzw. nur mit erheblichem Zusatzaufwand funktioniert.

... was Du bisher verschwiegen hattest ;-)

2. float:right für das Submenü und den Inhaltsbereich.
   Damit ist wieder das gesamte float:left (also auch das des Hauptmenüs) aufgehoben. Leider gibt es kein float:left(<number>); mit dem nur eine bestimmte Anzahl floats aufgehoben wird. Oder eine Schachtelung von dann unabhängigen floats...

interpretiere

#links { /* Angaben zur Weite nicht unbedingt sinnvoll */ }

bitte genauso wie ich es angegeben habe: ohne float und nur im Notfall mit einer Weitenangabe. Der Inhaltsbereich floated doch ohnehin rechts, da muß die Hauptnavigation nicht auch noch floaten.

Sieht so aus. Sorry, falls ich unfreundlich geklungen haben sollte - das Problem hat mich tierisch genervt.

Nö, fand ich nicht - und ich kann Deinen Frust ja auch nachvollziehen...

freundliche Grüße
Ingo

[MudGuard]

Hi,

2. float:right für das Submenü und den Inhaltsbereich.
   Damit ist wieder das gesamte float:left (also auch das des Hauptmenüs) aufgehoben. Leider gibt es kein float:left(<number>); mit dem nur eine bestimmte Anzahl floats aufgehoben wird. Oder eine Schachtelung von dann unabhängigen floats...

Das wäre in der Tat manchmal hilfreich ;-)

interpretiere

#links { /* Angaben zur Weite nicht unbedingt sinnvoll */ }
bitte genauso wie ich es angegeben habe: ohne float und nur im Notfall mit einer Weitenangabe. Der Inhaltsbereich floated doch ohnehin rechts, da muß die Hauptnavigation nicht auch noch floaten.

Das würde dann aber voraussetzen, daß das Hauptmenü im Quelltext am Ende steht, denn sonst würde der Hauptbereich (bestehend aus Submenü und eigentlichem Inhalt) erst unterhalb des Hauptmenüs beginnen ...

cu,
Andreas

[Ingo Turski]

Hi,

Der Inhaltsbereich floated doch ohnehin rechts, da muß die Hauptnavigation nicht auch noch floaten.

Das würde dann aber voraussetzen, daß das Hauptmenü im Quelltext am Ende steht, denn sonst würde der Hauptbereich (bestehend aus Submenü und eigentlichem Inhalt) erst unterhalb des Hauptmenüs beginnen ...

natürlich, hatte ich doch auch geschrieben:

Hierzu müßte dieses DIV im Quelltext vorangesetzt werden

siehst Du hierin ein Problem? Ich nicht. Ob ich unter dem Aspekt der Barrierefreiheit nun einen Anker zum Hauptmenü oder zum Inhalt setzen würde, ist doch ziemlich egal. Und selbst ohne Anker hat MmN diese Anordnung eher Vorteile: Ein Besucher, der über das Hauptmenü kommt, sieht zunächst das Submenü und den Seiteninhalt (auf den wiederum auch ein Anker gesetzt werden könnte) und kann wird zunächst über die Rubrikinhalte infomiert.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Oder halt ein Hack, der (warum auch immer;-) zumindest im IE6, Mozilla und Opera funktioniert:
Du formatierst #links mit float:left wie in Deinem ersten Ansatz, verzichtetst aber auf clear und fügst stattdessen vor der Überschrift ein:
<div style="width:10em;">&nbsp;</div>

Der funktioniert genauso wie die Tatsache, daß der Absatz nach der Überschrift nicht neben die Überschrift gezogen wurde.

Ohne das div:
Das letzt li ist links gefloatet, also wird die h1 rechts daneben dargestellt.
h1 selber ist nicht gefloatet, erzeugt also einen Absatz.
Da h1 so hoch (oder noch höher) ist als das li, ist der folgende p unterhalb der li.

Mit dem div:
Das letzt li ist links gefloatet, also wird das div rechts daneben dargestellt.
Das div selber ist nicht gefloatet, erzeugt also einen Absatz.
Da es ausreichend Höhe hat (notfalls nachhelfen per height-Property), wird die folgende H1 unterhalb der li dargestellt.

Interessant ist, wo der IE das div anordnet im Gegensatz zu Opera/Mozilla (background-color setzen) - demzufolge müßte ggf. der margin-top der h1 unterschiedlich gesetzt werden...

cu,
Andreas

[Ingo Turski]

Hi,

Mit dem div:
Das letzt li ist links gefloatet, also wird das div rechts daneben dargestellt.
Das div selber ist nicht gefloatet, erzeugt also einen Absatz.
Da es ausreichend Höhe hat (notfalls nachhelfen per height-Property), wird die folgende H1 unterhalb der li dargestellt.

hatte ich auch schon in Erwägung gezogen, nur verhält sich der Mozilla hier sehr merkwürdig.
Während <div style="width:10em;">&nbsp;</div> problemlos funktioniert,
klappt <div style="width:10em;height:2.5em;"></div> nur ab einer Höhe von 2.5em und auch dann nur, solange die darüber floatenden Elemente nicht mehr als drei Zeilen einnehmen.
Ich dachte eigentlich, daß ein whitespace das DIV nur auf die aktuelle line-height ausdehnt...

freundliche Grüße
Ingo

[MudGuard]

Hi,

hatte ich auch schon in Erwägung gezogen, nur verhält sich der Mozilla hier sehr merkwürdig.
Während <div style="width:10em;">&nbsp;</div> problemlos funktioniert,
klappt <div style="width:10em;height:2.5em;"></div> nur ab einer Höhe von 2.5em und auch dann nur, solange die darüber floatenden Elemente nicht mehr als drei Zeilen einnehmen.
Ich dachte eigentlich, daß ein whitespace das DIV nur auf die aktuelle line-height ausdehnt...

Wie gesagt, einfärben. Dann siehst Du, daß das div links oben beginnt (auf derselben Höhe wie das oberste li).
Da dort kein Platz ist wegen der floatenden li, wird das div nach unten verlängert, bis unterhalb der li endlich Platz für die 10em ist.

Andreas