[CSS] DIV-Elemente nicht umbrechen

[moses_78]

Guten Tag.

Folgendes: Für eine Galerie möchte ich 10-20 dynamisch erzeugte kleine DIVs
nebeneinander anordnen, die überstehenden DIV-Container sollen einfach
abgeschnitten werden (später soll dann eine mootools-Klasse dazu dynamisch
einen Scrollbalken erzeugen...).

Also, ich habe einiges alles probiert. Denn
- Tabellen bringen den gewünschten Effekt nicht. Weder CSS- noch HTML-Ta-
bellen, da Tabellen bei nicht genug Platz trotz einem angegebenen width-Attri-
but die Breite einer einzelenen Zelle beschneiden, damit die Tabelle trotzdem
ins Elternelement passt.

- Ein display:inline und float: left erfüllen ihren Zweck auch nicht; die Contai-
ner werden wie ein Text trotzdem umgebrochen.

Hier ein Beispiel.

Vorschläge?

 

[dms]

- Ein display:inline und float: left erfüllen ihren Zweck auch nicht; die Contai-
ner werden wie ein Text trotzdem umgebrochen.

Bringt Dir white-space:nowrap etwas?


Wenn Du aber sowieso mit mootools arbeitest, kannst Du die Breite des elternelements ja auch dynamisch setzen, abhängig vom Inhalt.

 

[moses_78]

Bringt Dir white-space:nowrapetwas?

Nein.

Wenn Du aber sowieso mit mootools arbeitest, kannst Du die Breite des elternelements ja auch dynamisch setzen, abhängig vom Inhalt.

Lässt sich in diesem Fall vermutlich leider nicht machen.

Danke erstmal für deine Hilfe. Ich habe mir mal ein paar andere Webseiten
angesehen...bei Apple ( http://www.apple.com/mac/ ) zB. haben die das glei-
che mit einer Liste gelöst, bei der für jeden Menupunkt "float:left" gesetzt ist.

 

[moses_78]

Verdammt. Bei Apples Productbrowser haben die eine fixe Breite, was bei mir nicht
möglich ist. *arrrg*

 

[dms]

Schau dir mal hier den vorletzten Post an. Sowas willst Du doch, oder? Nur ohne Text.

 

[neuni]

Wenn ich das richtig verstehe:
Großen div um die kleinen divs drumrum und im css: overflow: hidden; width: 500px;

Habe sowas da mal gemacht in der Galerie: http://schaugenauhin.de/index.php?go=gallery

Edith sagt: "Bei den kleinen divs dann natürlich ein float: left;

 

[moses_78]

Ja richtig. Habe ich ja auch gemacht. Funktioniert aber nur wenn man
eine feste Breite angibt.

 

[neuni]

Also bei mir geht es so:

Höhe von dem großen div musste natürlich angeben.

 

[moses_78]

Ja natürlich funktioniert dein Ansatz. Der Punkt ist aber,
dass die DIVs umgebrochen werden, was du nur nicht sie-
hst, da du die Höhe begrenzt hast.

Scrollen kann man das Ding dann nicht, ist das Problem.

 

[neuni]

Und wieso gehts da? http://schaugenauhin.de/index.php?go=gallery

 

[dms]

Hast Du Dir den von mir verlinkten Post ein mal angesehen? Setz overflow auf hidden, statt auf auto und Du hast genau das was ich in Deiner Beschreibung gelesen habe.

 

[moses_78]

Und wieso gehts da? http://schaugenauhin.de/index.php?go=gallery

Weswegen deine Lösung auf deiner Webseite funktioniert, und meine beinahe
identische nicht, verstehe ich nicht ganz

Hast Du Dir den von mir verlinkten Post ein mal angesehen? Setz overflow auf hidden, statt auf auto und Du hast genau das was ich in Deiner Beschreibung gelesen habe.

Ja, funktioniert wunderbar. Aber auch hier wieder nur, weil die Breite des zu
scrollenden DIVs im Stylesheet festgelegt ist (wie bereits in #4 und #7) er-
wähnt, was nicht realisierbar ist, da die Galerien ja dynamisch erzeugt wer-
den.

Whatever. Ich setze jetzt einfach für mein DIV-Element eine Breite von 100000px,
und später wird das Ding dann via Javascript auf die nötige Größe redu-
ziert, nicht gerade eine elegante Lösung, aber wohl die beste.

Trotzdem danke für die Hilfe

 

[dms]

Ja, funktioniert wunderbar. Aber auch hier wieder nur, weil die Breite des zu
scrollenden DIVs im Stylesheet festgelegt ist

Das ist sie in dem Beispiel. Du kannst die Angabe aber auch einfach entfernen.

 

[neuni]

Die breite des div ist ja egal. Auch bei 100% ist sie schließlich genau festgelegt. Also wenn du es genauso wie in meinen Beispielen in den Posts #8 oder #10 machst muss es gehen.
Und zwar ohne komisches JS...
Kannst dir ja einfach mal die entsprechenden Teile bei der Seite rausklauen.
Stylesheet liegt unter http://schaugenauhin.de/style.css

 

[moses_78]

Das ist sie in dem Beispiel. Du kannst die Angabe aber auch einfach entfernen.

Ich habe mich unklar ausgedrückt. Ich meinte, dass in dem zu scrollenden
DIV-Element ein weiterer Container war, welcher eine festgelegte Breite
hatte, und so ein Umbrechen des Inhaltes verhinderte.

Die breite des div ist ja egal. Auch bei 100% ist sie schließlich genau festgelegt. Also wenn du es genauso wie in meinen Beispielen in den Posts #8 oder #10 machst muss es gehen.
Und zwar ohne komisches JS...
Kannst dir ja einfach mal die entsprechenden Teile bei der Seite rausklauen.
Stylesheet liegt unter http://schaugenauhin.de/style.css

Aus irgendeinem Grund funktioniert das ganze auf deiner Seite wunderbar...
möglicherweise weil du Inline-Elemente ("<a>") verwendest...Ich habe mal
deine Seite kopiert (habs zuerst mit curl versucht, und dabei ca. 200-300 mb
Traffic verursacht, sorry, nur dass du dich nicht wunderst wenn du in die
Logs schaust ) und bis auf den Galerieteil reduziert...

Danke!

 

[moses_78]

Neuni, danke erstmal, deine Seite war mir eine riesige Hilfe.

Aber als ich mein Projekt im IE getestet habe, hab ich fast
nen Affen bekommen...hast du irgendwelche Probleme mit
dem Internet-Explorer gehabt?

Das Problem ist: Der äußere Div-Container hält nicht die breite
ein, die ich ihm zugewiesen habe, sondern nimmt sich ca. 9000px
und sprengt so das Layout...hast du irgendeinen Vorschlag?

 

[moses_78]

Ich hab das Problem lösen können.

Das Resultat lässt sich zB hier finden.

 

[bbuch]

Moin!

Immer wieder erlebe ich, dass ganz einfache Fragen, riesige Diskussionen anstossen!

Ergo, hier die Lösung: GANZ EINFACH

<div style="width: <gewuenschte Seitebreite in Pixel> px">

dann hier Deine Float Sachen, die nicht umgebrochen werden sollen

</div>

DAS WAR'S: Einfach in ein DIV mit fester Breite einbetten, dann wird nix mehr umgebrochen

Hinweis: Die gewuenschte Breite muss noch nicht mal so gross sein wie die Gesamtbreite Deines Floats

 

[rm -r *]

Moin!
...

Ob das den TE jetzt noch interssiert ?

Der Thread ist immerhin etwas über zwei Jahre alt.