float:left innerhalb eines anderen <div> (

[Jeena Paradies]

Hallo,

Ich weiß, wie man ein <div> neben ein anderes <div> bringt, und zwar mit float:left. Jetzt habe ich das gemacht, und es funktioniert. Leider ist es so geworden dass ich in das rechte <div> auch noch andere <div>s reinbringen will, die innerhalb des rechten nebeneinander stehen.

Zum besseren Verständniss habe ich es in Gimp nachgebaut:

So sieht es aus:
<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/text1.png" border="0" alt="">

So soll es aussehen:
<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/text2.png" border="0" alt="">

Das Menü ist ein <div> und das Große Rechteck mit dem Inhalt ist ein <div> Jetzt sollen die kleinen Rechtecke im rechten <div> auch <div>s sein, die nebeneinander sind.

Wenn ich jetzt auch bei denen float:left eingebe, dann wird das ganze Desing durcheinander gebracht.

Wie könnte ich das lösen? Ich hab ja noch mehr von den kleinen <div>s, denn das sind Meinungen von verschiedenen Leuten, und ich habe davon über 20. Jetzt habe ich vor, wenn jemand ein großes Fenster hat, sollen auch mehr von den Stimmen nebeneinander sein. Wenn man ein kleines Fenster hat, sollen sie genau so wie Text abbrechen, und unten weitergehen.

Jeena Paradies

[Jeena Paradies]

Vorhin hat irgendwas nicht mit den Bild-Links geklappt, deshalb jetzt noch einmal:

Hallo,

Ich weiß, wie man ein <div> neben ein anderes <div> bringt, und zwar mit float:left. Jetzt habe ich das gemacht, und es funktioniert. Leider ist es so geworden dass ich in das rechte <div> auch noch andere <div>s reinbringen will, die innerhalb des rechten nebeneinander stehen.

Zum besseren Verständniss habe ich es in Gimp nachgebaut:

So sieht es aus:

<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/test1.png" border="0" alt="">

So soll es aussehen:

<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/test2.png" border="0" alt="">

Das Menü ist ein <div> und das Große Rechteck mit dem Inhalt ist ein <div> Jetzt sollen die kleinen Rechtecke im rechten <div> auch <div>s sein, die nebeneinander sind.

Wenn ich jetzt auch bei denen float:left eingebe, dann wird das ganze Desing durcheinander gebracht.

Wie könnte ich das lösen? Ich hab ja noch mehr von den kleinen <div>s, denn das sind Meinungen von verschiedenen Leuten, und ich habe davon über 20. Jetzt habe ich vor, wenn jemand ein großes Fenster hat, sollen auch mehr von den Stimmen nebeneinander sein. Wenn man ein kleines Fenster hat, sollen sie genau so wie Text abbrechen, und unten weitergehen.

Jeena Paradies

[mäggi]

Hi,

Tabellen haben auch etwas :)

Gruß,
mäggi

[Jeena Paradies]

Hi,

Hi mäggi,

Tabellen haben auch etwas :)

Ich weiß, nur dass ich versuche aus HTML alles rauszuquetschen was geht. Gerade gestern habe ich <address> für mich entdeckt, und war begeistert, dass ich da sonst nichts Formatieren muss, sondern es dem Browser überlassen kann. Gibt es für mein Vorhaben, also einen Bereicht mit Überschrift, und anschließendem Fließtext vieleicht schon was vorgefertigtes in HTML?

Ich weiß eine Tabelle mit Kopf Body und Fuß, aber die hätte dann nur eine Spalte, und außerdem müsste ich ja noch einen Fuß machen, den ich nicht brauche. Na ich überlege es mir.

Jeena Paradies

[Jeena Paradies]

Ich weiß, nur dass ich versuche aus HTML alles rauszuquetschen was geht. Gerade gestern habe ich <address> für mich entdeckt, und war begeistert, dass ich da sonst nichts Formatieren muss, sondern es dem Browser überlassen kann. Gibt es für mein Vorhaben, also einen Bereicht mit Überschrift, und anschließendem Fließtext vieleicht schon was vorgefertigtes in HTML?
Ich weiß eine Tabelle mit Kopf Body und Fuß, aber die hätte dann nur eine Spalte, und außerdem müsste ich ja noch einen Fuß machen, den ich nicht brauche. Na ich überlege es mir.

Hm was ich so alles Denke was ich weiß0, natürlich gibt es da ja noch <th> das währe dann genau das was ich suche. Dennoch kriege ich es nicht hin, dass die in diesem <div> nebeneinander stehen. egal ob ich span div oder table verwende.

Irgendwie muss das doch gehen, aber ich komme irgendwie überhaupt nicht auf den Ansatz.

Jeena Paradies

[Ingo]

Hi,

Irgendwie muss das doch gehen, aber ich komme irgendwie überhaupt nicht auf den Ansatz.

nachdem ich mal ein wenig experimentiert habe, bin ich zu dem Schluß gekommen, daß es mit float alleine nicht geht. Der IE zeigt zwar alles wie gewünscht an: http://www.isis.de/members/~iturski/tests/jeena.html, aber "richtige" Browser machen hier Probleme beim verkleinern des Fensters.

Eine funktionierende Lösung habe ich nur mit absoluter Positionierung des Menüs und des rechten Contents erreichen können: http://www.isis.de/members/~iturski/tests/jeena2.html. Vielleicht machst Du's ja so?

freundliche Grüße
Ingo

[Reinhard]

Eine funktionierende Lösung habe ich nur mit absoluter Positionierung des Menüs und des rechten Contents erreichen können: http://www.isis.de/members/~iturski/tests/jeena2.html.

Ich habe auch eine Seite gemacht.
Die CSS ist von ihm noch nicht richtig.

http://web966.essen082.server4free.de/kind.htm
Getestet mit IE 6; Netzcape 6 und 7, Opera 7 und Mozilla 1.4

[Ingo]

Hi Reinhard,

Eine funktionierende Lösung habe ich nur mit absoluter Positionierung des Menüs und des rechten Contents erreichen können: http://www.isis.de/members/~iturski/tests/jeena2.html.

Ich habe auch eine Seite gemacht.
Die CSS ist von ihm noch nicht richtig.

http://web966.essen082.server4free.de/kind.htm
Getestet mit IE 6; Netzcape 6 und 7, Opera 7 und Mozilla 1.4

leider geht zum einen Dein Link nicht und zum anderen würde mich interessieren, was Du damit nun meinst. _Mein_ CSS? Wobei ich in diesem Versuch nur das vorhandene CSS leicht modifiziert hatte, um den gewünschten Effekt ungefähr hinzubekommen. Oder Deine Seite, die nicht aufzurufen geht?

freundliche Grüße
Ingo

[Reinhard]

Hi Reinhard,

Hallo Ingo,

leider geht zum einen Dein Link nicht und zum anderen würde mich interessieren, was Du damit nun meinst.

Der Server ist down. Komme selbst nicht mehr rein. :-(.

_Mein_ CSS?

Selbstverständlich nicht. Seine meinte ich.

Wobei ich in diesem Versuch nur das vorhandene CSS leicht modifiziert hatte, um den gewünschten Effekt ungefähr hinzubekommen.

Mehr hatte ich auch nicht gemacht.
Habe hier noch eine andere Variante mit einer anderen Doctype  hochgeladen:
http:www.pissarra.de/kind.htm

Sorry für das Mißverständnis.

[Ingo]

Hi Reinhard,

Mehr hatte ich auch nicht gemacht.
Habe hier noch eine andere Variante mit einer anderen Doctype  hochgeladen:
http:www.pissarra.de/kind.htm

ein bisschen mehr hast Du schon gebastelt..;-)
Sogar noch ein paar Kinder dazukopiert und dessen Größen relativ angegeben. So passen natürlich mehr untereinander.
Andererseits hat Deine Variante auch Nachteile, wenn man das Fenster sehr stark zusammenschiebt (was natürlich kaum vorkommt). Und merkwürdigerweise funktioniert das hovern im IE6 nur bei den jeweils ersten Links.

freundliche Grüße
Ingo

[Reinhard]

Sogar noch ein paar Kinder dazukopiert und dessen Größen relativ angegeben. So passen natürlich mehr untereinander.

Er wollte wohl ca. 20 Kinder da haben.

Andererseits hat Deine Variante auch Nachteile, wenn man das Fenster sehr stark zusammenschiebt (was natürlich kaum vorkommt).

Das muss er selber wissen. An die Fenstergröße anpassen oder scrollen.

Und merkwürdigerweise funktioniert das hovern im IE6 nur bei den jeweils ersten Links.

Funktioniern tut es, wenn er entweder das "display: block;" in der CSS löscht, oder die Definitionslisten entfernt.

Gruß
Reinhard

[MudGuard]

Hi,

Ich weiß, wie man ein <div> neben ein anderes <div> bringt, und zwar mit float:left. Jetzt habe ich das gemacht, und es funktioniert. Leider ist es so geworden dass ich in das rechte <div> auch noch andere <div>s reinbringen will, die innerhalb des rechten nebeneinander stehen.

Und warum machst Du dann nicht genau das?
float:left; für die divs, die in dem rechten div drin liegen?

cu,
Andreas

[Jeena Paradies]

Und warum machst Du dann nicht genau das?
float:left; für die divs, die in dem rechten div drin liegen?

Ich habe gerade im Archiv so etwas gefunden:

Elemente mit gesetztem float-Attribut fallen aus dem normalen Elementfluss vollständig heraus. Schau dazu mal in den CSS-Standard zur Definition von float unter http://www.w3.org/TR/REC-CSS2/visuren.html#floats, dort sind auch Beispiele, die zeigen, warum das so sein soll.

Das layout ist dann natürlich total zerstört, wenn man das so macht:

<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/test3.png" border="0" alt="">

Wenn ich das richtig verstehe, wird das mit float:left bearbeitete <div> nicht verschachtelt. Es kommt einfach untendrunter.

Jeena Paradies

[Maximilian Baumgart]

Und warum machst Du dann nicht genau das?
float:left; für die divs, die in dem rechten div drin liegen?
Ich habe gerade im Archiv so etwas gefunden:

Elemente mit gesetztem float-Attribut fallen aus dem normalen Elementfluss vollständig heraus. Schau dazu mal in den CSS-Standard zur Definition von float unter http://www.w3.org/TR/REC-CSS2/visuren.html#floats, dort sind auch Beispiele, die zeigen, warum das so sein soll.
Das layout ist dann natürlich total zerstört, wenn man das so macht:

<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/test3.png" border="0" alt="">

Wenn ich das richtig verstehe, wird das mit float:left bearbeitete <div> nicht verschachtelt. Es kommt einfach untendrunter.

Jeena Paradies

Wenn du innerhalb der div, die die zwei meinungsblöcke enthält, unterhalb dieser meinungsblöcke noch was notierst (notfalls mit clear:left nicht um die meinungskästen herumfließen lassen), dann muss das ja noch innerhalb der div sein und demzufolge ist das dann auch bei den Meinungsblöcken darüber so.

MfG,
max.

[Jeena Paradies]

Hallo ,

Wenn du innerhalb der div, die die zwei meinungsblöcke enthält, unterhalb dieser meinungsblöcke noch was notierst (notfalls mit clear:left nicht um die meinungskästen herumfließen lassen), dann muss das ja noch innerhalb der div sein und demzufolge ist das dann auch bei den Meinungsblöcken darüber so.

Du meinst also, dass ich unter das <div> mit der überschrift "Elterninitiative..." zum Beispiel ein <p style="clear:left"> </p> reinschreiben soll? Oder verstehe ich das falsch?

Jeena Paradies

[Maximilian Baumgart]

Du meinst also, dass ich unter das <div> mit der überschrift "Elterninitiative..." zum Beispiel ein <p style="clear:left"> </p> reinschreiben soll? Oder verstehe ich das falsch?

Jeena Paradies

Ja, das müsste gehen, aber wenn es zu den meinungsblöcken noch irgentwelche zusätzliche Infos gäbe, könnte man die auch noch mit reinschreiben, jenachdem...

MfG,
Max.

[Jeena Paradies]

Hallo ,

Ja, das müsste gehen, aber wenn es zu den meinungsblöcken noch irgentwelche zusätzliche Infos gäbe, könnte man die auch noch mit reinschreiben, jenachdem...

Ach so ok, also würde das auch gehen, wenn innerhalb des <div>(Elterninitiative...) was ja alle Meinungen beinhaltet, unter die Meinungen zum Beispiel <p style...>Das waren Meinungen...</p> reinschreibe? Mal gleich ausprobieren.

Eigentlich suche ich nach so etwas wie bei Bildern. Wenn man nämlich mehrere kleine Bilder also

<img style="height:20px; width:15px;" alt="" src="bild.png">
<img style="height:20px; width:15px;" alt="" src="bild.png">
<img style="height:20px; width:15px;" alt="" src="bild.png">

eingibt, dann werden die ja automatisch nebeneinander dargestellt. Gibt es so etwas für textblöcke auch? In denen könnte ich ja dann eine Überschrift reinsetzen.

Jeena Paradies

[Jeena Paradies]

Hallo ,

<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/kindergarten/test4.png" border="0" alt="">
So sieht es aus, wenn ich das clear anwende. Irgendwie verstehe ich das überhaupt nicht mehr.

Nachfolgend die genauen Regeln, die das Verhalten von Floats steuern:

1. Die linke äußere Kante einer Links-Floating-Box darf sich nicht links von der linken Kante ihres umschließenden Blocks befinden. Analog gilt die Regel für Rechts-Floating-Elemente.
2. Ist die aktuelle Box links-floating und es gibt noch weitere Links-Floating-Boxen, die von Elementen an früherer Stelle des Quelldokuments erzeugt wurden, dann muss für jede dieser früheren Boxen entweder die linke äußere Kante der aktuellen Box rechts von der rechten äußeren Kante der früheren Box liegen, oder ihre obere Kante muss tiefer als die untere Kante der früheren Box liegen. Analoge Regeln gelten für Rechts-Floating-Boxen.
3. Die rechte äußere Kante einer Links-Floating-Box darf nicht rechts von der linken äußeren Kante einer Rechts-Floating-Box liegen, die sich rechts von ihr befindet. Analoge Regeln gelten für Rechts-Floating-Elemente.
4. Die äußere obere Kante einer Floating-Box darf nicht höher sein als die oberste Kante des umschließenden Blocks.
5. Die äußere obere Kante einer Floating-Box darf nicht höher als die äußere obere Kante einer Block- oder Floating-Box liegen, die von einem früheren Element im Quelldokument erzeugt wurde.
   6)Die äußere obere Kante der Floating-Box eines Elements darf nicht höher liegen als die obere Kante einer Zeilen-Box, die eine Box enthält, die von einem früheren Element im Quelldokument erzeugt wurde.
6. Eine Links-Floating-Box, zu deren Linken sich eine weitere Links-Floating-Box befindet, darf ihre rechte äußere Kante nicht rechts von der rechten Kante ihres umschließenden Blocks haben. (Locker ausgedrückt: Ein linker Float darf nicht an der rechten Kante herausragen, es sei denn, er befindet sich schon so weit links wie möglich.) Eine analoge Regel gilt für Rechts-Floating-Elemente.
7. Eine Floating-Box muss so hoch wie möglich platziert werden.
8. Eine Links-Floating-Box muss so weit wie möglich links, eine Rechts-Floating-Box so weit wie möglich rechts liegen. Eine höhere Position wird gegenüber einer weiter links/rechts liegenden bevorzugt.

Jeena Paradies

[Jeena Paradies]

Hallo ,

Mit Bilder Einfühen hab ich es heute nicht so
[link:http://home.arcor.de/maedchen.schluckt.net/mp3/test4.png}

Jeena Paradies

[Maximilian Baumgart]

Hallo ,

<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/kindergarten/test4.png" border="0" alt="">
So sieht es aus, wenn ich das clear anwende. Irgendwie verstehe ich das überhaupt nicht mehr.

Mh, versuch's mal mit clear:both, und zu den bildern, die automatisch nebeneinander steheh, um diesen effekt zu erzielen, müsstest du afaik display:run-in eingeben.
MfG,
Max.

[Jeena Paradies]

Hallo ,

Mh, versuch's mal mit clear:both, und zu den bildern, die automatisch nebeneinander steheh, um diesen effekt zu erzielen, müsstest du afaik display:run-in eingeben.

Dann beschäftige ich mich mal mit display

Jeena Paradies

[Jeena Paradies]

Hallo ,

Und warum machst Du dann nicht genau das?
float:left; für die divs, die in dem rechten div drin liegen?
Ich habe gerade im Archiv so etwas gefunden:

Elemente mit gesetztem float-Attribut fallen aus dem normalen Elementfluss vollständig heraus. Schau dazu mal in den CSS-Standard zur Definition von float unter http://www.w3.org/TR/REC-CSS2/visuren.html#floats, dort sind auch Beispiele, die zeigen, warum das so sein soll.
Das layout ist dann natürlich total zerstört, wenn man das so macht:

<img src="http://home.arcor.de/maedchen.schluckt.net/mp3/test3.png" border="0" alt="">

Wenn ich das richtig verstehe, wird das mit float:left bearbeitete <div> nicht verschachtelt. Es kommt einfach untendrunter.

Jeena Paradies
Wenn du innerhalb der div, die die zwei meinungsblöcke enthält, unterhalb dieser meinungsblöcke noch was notierst (notfalls mit clear:left nicht um die meinungskästen herumfließen lassen), dann muss das ja noch innerhalb der div sein und demzufolge ist das dann auch bei den Meinungsblöcken darüber so.

MfG,
max.

Jeena Paradies

[Reinhard]

Wenn ich das richtig verstehe, wird das mit float:left bearbeitete <div> nicht verschachtelt. Es kommt einfach untendrunter.

Wie haste du das denn gelöst?
So
position: absolute;
oder so?
position: relative;

[Jeena Paradies]

Hallo ,

Wie haste du das denn gelöst?
So
position: absolute;
oder so?
position: relative;

eigentlich hab ich da gar nichts eingetragen.

Jeena Paradies

[Reinhard]

eigentlich hab ich da gar nichts eingetragen.

Dann wird wohl Maximilian Recht haben.
Haste das mal online?

[Jeena Paradies]

Hallo ,

Haste das mal online?

Hab es gerade hochgeladen. Alles andere an css ist in format.css und das mit den meinungen ist in der html datei.
http://home.arcor.de/maedchen.schluckt.net/mp3/kindergarten/stimme.htm

Jeena Paradies

[Reinhard]

Hallo ,

Haste das mal online?
Hab es gerade hochgeladen. Alles andere an css ist in format.css und das mit den meinungen ist in der html datei.
http://home.arcor.de/maedchen.schluckt.net/mp3/kindergarten/stimme.htm

Jeena Paradies

Einmal das:
.rechts {
width: 90%;
 border:3px solid #254D22;
 margin-left:23ex;
 margin-right:3ex;
 margin-top:2ex;
 background-color: #EBFFE8 ;
}
.inhalt { padding:2ex;
float:left; }

Ansonsten fehlen weitere Größenangaben.

[Jeena Paradies]

Hallo ,

Einmal das:
.rechts {
width: 90%;

Wozu soll das gut sein?

.inhalt { padding:2ex;
float:left; }

Das verstehe ich noch nicht ganz.

Ansonsten fehlen weitere Größenangaben.

Wieso fehlen da Größenangaben? Das soll sich doch alles automatisch anpassen.

Jeena Paradies

[Reinhard]

Ansonsten fehlen weitere Größenangaben.
Wieso fehlen da Größenangaben? Das soll sich doch alles automatisch anpassen.

Am Wochende werde ich einen unausgefüllten Lottoschein abgeben, weil ich automatisch 6 Richtige will. ;-)

[Jeena Paradies]

Hallo ,

Am Wochende werde ich einen unausgefüllten Lottoschein abgeben, weil ich automatisch 6 Richtige will. ;-)

HaHa :-) Nein im Ernst, der Inhalt bestimmt die Größe. Je mehr Inhalt desto größer ist alles. So stelle ich sicher, dass wenn jemand eine größere Schriftart verwendet, auch die Bereiche größer werden.

Jeena Paradies

[Reinhard]

So stelle ich sicher, dass wenn jemand eine größere Schriftart verwendet, auch die Bereiche größer werden.

Das klappt auch mit den anderen Angaben.
Hast du auch schon nachgesehen?
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm
Da z.B.:
Beachten Sie:
Wenn Sie für ein Element eine Angabe zu float notieren, müssen Sie auch eine Angabe zu  width definieren.

[Tom]

Hallo,

ich habe da ja ein ähnliches Problem mit meinen DIVs.

Habe es Dir mal so umgebauit, dass es im MSIE 5.5 und im Gecko ziemlich ähnlich funktioniert, so wie Du das wolltest.

siehe http://bitworks.de/~selfHTML/float-erkenntnisse.html

Bleibt noch die Frage, warum der Gecko im Menu über den Rand schreibt und nicht umbricht, wenn man width und nicht min-width benutzt oder besser, wie man ihn zum Umbruch bewegen kann.

Und das Gleiche gilt für die Überschrift im Stimmenkasten.

Grüße

Tom