Bilder nebeneinander anordnen

[Meila]

Hallo
Ich möchte Bilder nebeneinander innerhalb eines divs anordnen. Das div hat eine feste Breite, wenn die Breite aller Bilder mehr ist als die des divs, soll eine Scrollbar erscheinen und zwar eine in Richtung X!!!!

Ich habe jetzt schon ewig probiert und es tut einfach nicht.
Ich habe mal ein Versuch dem post hinzugefügt.

Kann mir da jemand helfen?
Die eigentliche Frage ist: Geht die Anordnung der Bilder unendlich nach rechts mit eventuellem Scrollbalken, auch ohne, dass ich die Bilder absolut positionieren muss?

Danke!

css:
#container {width:300px; height:100px; position:relative; border:1px ridge gray; overflow:scroll;}
.box {width:100px;border:1px solid;float:left; top:20px;margin-right:20px;display:inline;}
.box0 {width:100px;float:left;border:1px solid; position:absolute; top:20px;left:20px;}
.box1 {width:100px;float:left;border:1px solid; position:absolute; top:20px;left:140px;}
.box2 {width:100px;float:left;border:1px solid; position:absolute; top:20px;left:260px;}
.box3 {width:100px;float:left;border:1px solid; position:absolute; top:20px;left: 380px;}

htmlteile:

<div id="container">

dies funktioniert:
  <div class="box0">This is box 1.</div>
  <div class="box1">This is box 2.</div>
  <div class="box2">This is box 3.</div>
  <div class="box3">This is box 4.</div>

dies aber nicht:
  <div class="box">This is box 1.</div>
  <div class="box">This is box 2.</div>
  <div class="box">This is box 4.</div>

</div>

[ChrisB]

Hi,

Ich möchte Bilder nebeneinander innerhalb eines divs anordnen. Das div hat eine feste Breite, wenn die Breite aller Bilder mehr ist als die des divs, soll eine Scrollbar erscheinen und zwar eine in Richtung X!!!!

Dann musst du also vor allem dafür sorgen, dass die Bilder nebeneinander dargestellt und *nicht* auf die nächste "Zeile" verschoben werden, wenn der Platz für die Darstellung nebeneinander nicht mehr ausreicht.

Die eigentliche Frage ist: Geht die Anordnung der Bilder unendlich nach rechts mit eventuellem Scrollbalken, auch ohne, dass ich die Bilder absolut positionieren muss?

Ja - wenn du dafür sorgst, dass sie nicht nach den normal gültigen Regeln umgebrochen werden.

.box {width:100px;border:1px solid;float:left; top:20px;margin-right:20px;display:inline;}
.box0 {width:100px;float:left;border:1px solid; position:absolute; top:20px;left:20px;}

float und inline sowie float und absolute sind in dieser Kombination Quatsch.
CSS 2.1 9.7 Relationships between 'display', 'position', and 'float'

MfG ChrisB

[Meila]

Hallo!

Vielen Dank für die schnelle Antwort. Den Link habe ich mir gerade mal angeschaut. Ich habe auch schon vermutet, dass es mit position:absolute überhaupt nicht funktioniert, da diese Elemente dann ja aus dem Fluss genommen werden.
Ich wollte da dann sehen, ob es überhaupt gehen könnte.
Dann dachte ich es geht mit float:left; , aber das tut es auch nicht, da, sobald der Platz nicht ausreicht, auf die nächste Zeile umgebrochen wird; egal was ich bei overflow oder display hinschreibe.

Achja ich habe mittlerweile auch versucht, die divs durch spans zu ersetzen, da ja spans ohne Zeilenumbrüche arbeiten, also:
.box{...}
<div id="container">
<span class="box">...</span>
<span class="box">...</span>
...
</div>

So, das tut aber auch nicht, da wird dann die Box schon in der Mitte umgebrochen.

hingegen, wenn dort steht:
.box{float:left, ...}
wird die ganze Box umgebrochen.
und bei overflow:auto eine y-scrollleiste eingefügt.

Ja - wenn du dafür sorgst, dass sie nicht nach den normal gültigen Regeln umgebrochen werden.

eben, aber wie?
Ich bin echt mit meinem Latein am Ende:(.
Könntest du mir einen Tip geben wie ich es machen könnte?

Oder zumindest, was ich verwenden muss ( dann kann ich weiterversuchen).

Danke, Meila

[ChrisB]

Hi,

Ja - wenn du dafür sorgst, dass sie nicht nach den normal gültigen Regeln umgebrochen werden.

eben, aber wie?
Ich bin echt mit meinem Latein am Ende:(.
Könntest du mir einen Tip geben wie ich es machen könnte?

Z.B. in dem du über die Eigenschaft white-space festlegst, ob umgebrochen werden darf.

MfG ChrisB

[Meila]

Hi,

danke für deine schnelle Antwort!
Ich hätte schon viel früher fragen sollen;).

Meila

PS: aber warum geht es mit span nicht und dem overflow:scroll?

[Meila]

Hallo!

Also wenn ich nur die Bilder innerhalb eines <a><img...></a> anordne und das ganze mit einem <div class="bilder"> umgebe, wobei das nowrap in der bilder-Klasse ist, dann geht es schon ganz gut. Jetzt möchte ich aber eine Box machen, die das Bild enthält und dazu benötige ich ja wieder ein div oder ähnliches. Wenn ich diese nebeneinander, durch die Verwendung von nowrap, anordnen möchte, geht dies jedoch wieder nicht.

Kann das sein?

[Harlequin]

Yerf!

Kann das sein?

Kommt drauf an...

und zwar darauf, welchen Zweck die Box haben soll, wie das ganze aussehen soll und welche Display-Eigenschaft diese Box hat.

Gruß,

Harlequin

[Meila]

Hallo

und zwar darauf, welchen Zweck die Box haben soll, wie das ganze aussehen soll und welche Display-Eigenschaft diese Box hat.

Innerhalb der Box sollten
ein bild
eine Zeile Text
also so in etwa:
<div class="klbilder"> ---> box
  <a id="id" href="#"><img src=".."/></a>
</div>

klbild{
...
display:inline;
margin-left:5px;
}

so oder so in etwa, denn um das ganze sind nochmal zwei divs.

[Harlequin]

Yerf!

Innerhalb der Box sollten
ein bild
eine Zeile Text

[...]

klbild{
...
display:inline;
margin-left:5px;
}

Evtl. hilft dir an der Stelle ein display:inline-block weiter (zu den Problemen und Tricks für manche Browser gibts hier im Archiv noch einiges)

so oder so in etwa, denn um das ganze sind nochmal zwei divs.

Hm... Divitis? Schau mal, ob sich davon nicht welche einsparen lassen, das vereinfacht meist auch den Umgang mit CSS.

Gruß,

Harlequin

[Meila]

Siehe URL

So, ich habe jetzt nochmal mit dem display, inline und float, viele Optionen durchprobiert. Wobei ich versucht habe, mir den Link, der mir (danke Chris) gesagt wurde zu beherzigen. Bei einigen Sachen bin ich mir schon bewusst, dass die doppelt sind (inline bei span und so), aber der vollständigkeit halber wollte ich die noch mit testen.
Ich vermute ich bin auf dem totalen Holzweg gelandet.

Bitte um Hilfe.

Ich gebe hier mal die url an, auf der ich alle Möglichkeiten mal getestet habe (alle=die ich wollte...) und habe auch Kommentare hinzugefügt.

Achja, das Browserfenster müsst ihr auf 440px stellen, sonst ist ja klar, dass die Boxen nebeneinander sind.