4. [CSS] Zeilenumbruch verhindern

[CSS] Zeilenumbruch verhindern

  • 0

    Hallo,

    ich möchte eine Bildergalerie erstellen, in der die Bilder alle in einer Zeile angeordnet sind. Falls der Platz in der Breite nicht ausreicht, soll einfach ein horizontaler Scrollbalken erscheinen.
    Also habe ich die Bilder innerhalb eines <iframe> platziert, um den Scrollbalken zu bekommen.

    Das Problem ist nun, dass ich seit neuestem Geschmack an CSS gefunden habe und die Bilder damit anordnen will.

    #picture {
padding:5px;
padding-right:15px;
margin: 0px;
float: left;
}

    <div id="picture"><img src="1.jpg"></div>
<div id="picture"><img src="2.jpg"></div>
<div id="picture"><img src="3.jpg"></div>
...
...

    Leider lässt der Browser die Bilder aber nicht nebeneinander stehen wenn der Platz nicht ausreicht, sondern fügt zwischen den <div> containern Zeilenumbrüche ein.
    Gibt es da eine einfache Methode das zu verhindern oder wäre eine Tabelle hier doch besser?

    Danke im Voraus.

    0
  • F

    In CSS hab' ich gerade nur white-space gefunden, aber das kann der IE laut Angabe nicht.
    Du kannst aber z.B. auch einfach über <nobr> die Bilder nebeneinander reihen - oder einfach nur über ein geschütztes Leerzeichen   voneinander trennen 🙂

    0
  • 0

    Danke für die schnelle Antwort 🙂

    white-space und <nobr> scheinen nur für Text zu funktionieren, <div> oder <img> elemente beeinflussen sie nicht im Umbruchverhalten.
    Wie Du das mit den   meinst versteh ich nicht ganz. Habe mal jeweils eins zwischen die <div>'s einfefügt, aber einen Umbruch verhindert das nicht.

    Ich mach es jetzt doch mal mit Tabellen weiter, denn ich steh unter Zeitruck und es sind sowieso nur 5 kleine Galerien.

    Falls es aber noch Vorschläge gibt nur her damit, Interesse besteht noch.

    0
  • R

    <div> entspricht int seiner Funktionsweise in etwa <p />, hat also immer(!!) einen Zeilenumbruch zur Folge.

    Nimm statt <div> einfach <span>, dass hat das nicht (ist auch der einzige Unterschied zwischen den beiden).

    Oder aber gleich so:

    .picture { 
padding: 5px; 
padding-right: 15px; 
margin: 0px; 
float: left; 
}

    <img class="picture" src="1.jpg" />
<img class="picture" src="2.jpg" />
<img class="picture" src="3.jpg" />
    0
  • 0

    @Reyx: Danke. Ich habe Deine beiden Vorschläge ausprobiert, aber leider hilft das alles nichts.

    Das ganze scheint ja ein recht fieses Problem zu sein.
    Ich könnte mir vorstellen dass es mit absoluten positionierungen gehen könnte, das möchte ich aber nicht machen. Da ist ja selbst eine Tabelle noch hübscher.

    0
  • F

    Bei mir funktioniert das ohne Probleme:

    <nobr>
 <img src="" width=400 height=100>
 <img src="" width=400 height=100>
 <img src="" width=400 height=100>
 <img src="" width=400 height=100>
 <img src="" width=400 height=100>
</nobr>
    0
  • 0

    Du hast recht, das geht tatsächlich.
    Wenn man statt <img> aber <div> oder <span> elemente benutzt werden die wieder umgebrochen.
    Aber so kann ich wenigstens auf die Tabellen verzichten (hab zum Glück noch nicht viel dran gemacht)

    Danke 🕶

    0
  • F

    Was heißt wenigstens? Das padding kannst du ja nach der Methode von Reyx über class im img-Tag machen - was fehlt dir noch?!

    0
  • 0

    Schön wärs. Die "class" Eigenschaft des <img> hebt irgendwie die Wirkung des <nobr> auf. Und zwar in allen Browsern die ich so da habe.

    0
  • F

    Auch wenn du float: left; weglässt?

    0
  • 0

    flenders schrieb:

    Auch wenn du float: left; weglässt?

    Nein, dann gehts :p 👍

    Bitte mich nicht für bescheuert halten, ich mach CSS erst seit 2 Tagen und das mit dem float ist mir noch nicht wirklich ins Hirn reingegangen.

    0
Anmelden zum Antworten