Ansicht:   

#306410

copperAngel

10.03.2012, 13:13:17
(editiert von copperAngel, 10.03.2012, 13:13:55)

whitespace:nowrap & float? [CSS] (ed) (web.coding)

Hallo

Folgendes: Ich möchte eine Bildergalerie erstellen, die horizontal scrollt (whitespace:nowrap funktioniert hier für mich); dann möchte ich aber einen kurzen Text am Ende jeder Galerie einfügen, der normalen Zeilenumbruch hat (was soweit auch klappt). Nur positioniert es das div mit dem Text nicht sauber in einer Linie. Hier wie es sein sollte: www.toybox.ch/files/floatw.jpg

Hier etwas Code:

.photos {height:540px; top:160px; position:absolute; margin-left:350px; white-space:nowrap;} <- Über-div, in dem alles liegt
.phs {height:540px; position:relative; float:left;} <- div für die einzelnen Galerien; Bilder werden direkt eingefügt, s.u.
.texts {width:300px; position:relative; float:right; white-space:normal; } <- Text

<div class=\"phs\">
<div id=\"texts\">TEXT</div>
<img ... />
</div>
</div>



Was leider passiert ist, dass das Text-div übers letzte Bild geschoben wird. (Ander Varianten waren: Text-div wird über/unter die Zeile mit den Bildern geschoben, je nach Platzierung des div-Tags.)
Jemand eine Idee?
Gracias,
CA

#306416

Johann [Gast]

10.03.2012, 14:01:33

@ copperAngel

whitespace:nowrap & float? [CSS]

Du willst n Bilder nebeneinander haben und dann am Ende noch ein div mit Text?
Lass doch alles \"float:left;\" und nach dem Text-div ein br mit \"clear:left;\".

<img style=\"float:left;\" .../>
<img style=\"float:left;\" .../>
<img style=\"float:left;\" .../>
<div style=\"float:left;\">Text</div>
<br style=\"clear:left;\"/>

Gruß,
Johann

#306431

copperAngel

10.03.2012, 16:27:32

@ Johann

whitespace:nowrap & float? [CSS]

> Du willst n Bilder nebeneinander haben und dann am Ende noch ein div mit
> Text?
> Lass doch alles \"float:left;\" und nach dem Text-div ein br mit
> \"clear:left;\".
>

Danke, funktioniert an und für sich, nur gibts einen Umbruch, dh. die Bilder sind nicht alle in einer Reihe.

#306432

Johann [Gast]

10.03.2012, 16:29:02

@ copperAngel

whitespace:nowrap & float? [CSS]

> Danke, funktioniert an und für sich, nur gibts einen Umbruch, dh. die
> Bilder sind nicht alle in einer Reihe.

Dann fass es zusätzlich in einen div-container mit fester Breite und ggf. overflow:auto; wenn Du den Bereich dann scrollen willst.

Gruß,
Johann

#306434

copperAngel

10.03.2012, 16:45:32

@ Johann

whitespace:nowrap & float? [CSS]

> Dann fass es zusätzlich in einen div-container mit fester Breite und ggf.
> overflow:auto; wenn Du den Bereich dann scrollen willst.
>
Also es klappt nur mit einer hässlichen 5000-Pixel-Breite? Was ich eigentlich vermeiden wollte... Vorallem da es zT 10 Bilder sind, zT nur 2.

#306436

Johann [Gast]

10.03.2012, 16:53:48

@ copperAngel

whitespace:nowrap & float? [CSS]

> Also es klappt nur mit einer hässlichen 5000-Pixel-Breite?


Das weiss ich nicht, was Du da bauen möchtest und wie Dein Layout aussieht.

> Was ich
> eigentlich vermeiden wollte... Vorallem da es zT 10 Bilder sind, zT nur 2.

Wie stellst Du Dir sonst vor die zehn Bilder nebeneinander zu bekommen?
Entweder baust Du halt einen kompletten div auf voller Breite oder halt weniger und gibst ihm overflow mit. Dann ist der Inhalt des Containers scrollbar.

#306438

MudGuard zur Homepage von MudGuard

München,
10.03.2012, 16:55:31

@ copperAngel

whitespace:nowrap & float? [CSS]

> Hallo
>
> Folgendes: Ich möchte eine Bildergalerie erstellen, die horizontal scrollt
> (whitespace:nowrap funktioniert hier für mich); dann möchte ich aber einen
> kurzen Text am Ende jeder Galerie einfügen, der normalen Zeilenumbruch hat
> (was soweit auch klappt). Nur positioniert es das div mit dem Text nicht
> sauber in einer Linie. Hier wie es sein sollte:
> www.toybox.ch/files/floatw.jpg
>
> <div id=\"texts\">TEXT</div>

Nach die Bilder stellen und statt div ein span (oder das div auf display:inline-block setzen)

--
[image]
MudGuard
O-o-ostern

#306468

copperAngel

10.03.2012, 20:34:51

@ MudGuard

whitespace:nowrap & float? [CSS]

> das div auf display:inline-block setzen

Das hat das Problem gelöst. Wunderbar, danke!

Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz