Span mit Scrollbar

[cartman]

Hallo an alle,

ich bin neu hier und freue mich in diesem Forum zu sein. Ich würde mich definitiv noch als Anfänger bezeichnen.

Zu meiner Frage: Und zwar habe ich eine Seite mit Bildern. Diese Bilder floaten left und sind in span's platziert.
Platziere ich sie in div's, floaten sie nicht so wie ich es möchte (es müssen also span's bleiben).

Nun möchte ich den spans ein overflow-y, also eine scrollbar, geben und mehrere Bilder in ein span packen.

Falls man mich jetzt nicht versteht ... hier ist was ich möchte:
CSS scroll area with overflow - DoMedia

... nur eben nicht in einem div, sondern einem span.

Hier ist mein kläglicher Versuch:
Edit this Fiddle - jsFiddle

Hier habe ich versucht die 2 Blumenbilder in ein Span zu packen und dem span im css ein overflow-x und y gegeben. Das bewirkt leider nichts.

Kann mir jemand weiter helfen?

Vielen Dank schon mal und liebe Grüße.

 

[threadi]

Der Unterschied zwischen <div> und <span> ist, dass ein <div> ein Blockelement und ein <span> ein Inline-Element ist. Wenn Du floaten willst, dann solltest Du <div> verwenden, kannst aber auch jedes <span> per

display: block;

zu einem Blockelement machen.

Deinen Wunsch mit dem overflow kann man nur bei einem Blockelement mit fester Höhe realisieren. Auf deine Galerie bezogen also (nur ein Beispiel!):

div.galerie {
 height: 100px;
 overflow-y: scroll;
}

 

[cartman]

hallo theadi,

hab jetzt rumprobiert und natürlich war es quatsch was ich gesagt habe. ich benötige keine span's, div's machen das was ich brauche genau so.

eine frage habe ich jetzt noch:

sehe ich das richtig, ich muss jedem bild im css eine neue klasse geben, mit unterschiedlichem height und width wenn diese immer anders sein sollen?
oder gibt es da eine elegantere lösung? zum beispiel im html direkt die img größe angeben?

vielen dank auf jeden fall schon mal für die hilfe!

 

[threadi]

Pauschal gesagt musst Du nicht jedem Bild per CSS eine eigene Höhe und Breite geben. Für deinen Anwendungsfall kann das natürlich anders sein, würde mich aber etwas wundern. Wenn Du einen Link zur betreffenden Seite (und nicht nur den Quellcode dazu) zeigen würdest, könnte man sich das genauer anschauen.

Btw. wäre die Angabe der Bild-Maße in HTML natürlich ebenfalls möglich und sogar hilfreich. Browser müssten dann beim Rendern der Bilder nicht erst prüfen wie groß das Bild ist - spart etwas Zeit beim Anzeigen der Seite. Ob das aber in deinem Fall hilft, kann ich wie gesagt so nicht beurteilen.

 

[Tronjer]

sehe ich das richtig, ich muss jedem bild im css eine neue klasse geben, mit unterschiedlichem height und width wenn diese immer anders sein sollen?
oder gibt es da eine elegantere lösung? zum beispiel im html direkt die img größe angeben?

Du könntest im <img>-Tag direkt die Werte eingeben oder die Bilder mit CSS 3 formatieren (:nth-child), und als dritte Möglichkeit würde sich noch JavaScript anbieten.

 

[cartman]

Also bei der height und width Eingabe über css klappt es einwandfrei (so möchte ich es haben):

Edit this Fiddle - jsFiddle

Da das aber sehr unsauber ist und viel Arbeit macht, habe ich die height/width angaben direkt in die <img> tags gepackt.
So habe ich nur noch eine Klasse namens float (.float) und muss nicht für jedes Bild neue Klassen erstellen wie im oberen Link (.float1, .float2, .float3)
Das Problem: Die Scroll Funktion geht mir hierbei leider verloren. Mache ich was falsch oder geht das nicht?

Edit this Fiddle - jsFiddle

Hoffe man versteht mich ... und natürlich auf eure Hilfe ;Jump Vielen Dank!