Bilder nebeneinander mit gleichem Abstand, variable Bilderanzahl

[pbauer]

Gibt es eine Möglichkeit, folgendes zu realisieren?

Bilder (nicht zu groß, vielleicht 200 px breit) sollen nebeneinander dargestellt werden, und zwar mit gleichem Abstand dazwischen. Gleichzeitig soll das linke Bild ganz links ausgerichtet sein, das rechte ganz rechts.
In HTML würde ich eine Tabelle machen und die Zellen entsprechend ausrichten (die mittleren Zellen jeweils zentriert, links und rechts jeweils links/rechts ausgerichtet).
Wie kriege ich das in CSS hin? Und zwar ohne feste Breiten (die Größe der Bilder könnte sich ändern), und möglichst auch bei flexibler Anzahl der Bilder, also mal drei, mal vier, mal fünf? Geht das überhaupt mit CSS, oder muss ich doch wieder ganz altmodisch zu einer HTML-Tabelle greifen?
DANKE!

[T-Rex]

folgende Struktur

<div class='wrapper'>
   <img class='bild' />
   <img class='bild' />
   etc...
</div>

.wrapper
{
   width: 100%;
}

.wrapper .bild
{
   width: 20%;
   float: left;
}

.wrapper .bild + .bild
{
   margin-left: 5%;
}

So ungefähr mein Ansatz. Müsste man noch anhand deiner Beispiele konkretisieren.

Gruß
100%
T-Rex

[pbauer]

Auch dies habe ich probiert, danke auch an dich. Aber bei diesem Ansatz muss ich wissen, wie breit die Bilder sind, richtig? Es würde also nicht funktionieren, wenn die Bilder unterschiedlich groß sind, oder? Oder wenn ich das CSS auf mehreren HTML_Seiten verwenden will, aber dort jeweils die Bilder unterschiedlich groß sind? Ich muss die Werte, z.B. die Breite, and die Bilder anpassen, richtig?
Oder habe ich etwas missverstanden?

[Vinzenz Mai]

Hallo,

Wie kriege ich das in CSS hin? Und zwar ohne feste Breiten (die Größe der Bilder könnte sich ändern), und möglichst auch bei flexibler Anzahl der Bilder, also mal drei, mal vier, mal fünf? Geht das überhaupt mit CSS, oder muss ich doch wieder ganz altmodisch zu einer HTML-Tabelle greifen?

wenn Du weißt, wieviele Spalten Deine Tabelle benötigt, dann solltest Du dies auch ohne Hilfe einer Tabelle hinbekommen.

Freundliche Grüße

Vinzenz

[Gunnar Bittersmann]

@@pbauer:

nuqneH

Bilder (nicht zu groß, vielleicht 200 px breit) sollen nebeneinander dargestellt werden, und zwar mit gleichem Abstand dazwischen. Gleichzeitig soll das linke Bild ganz links ausgerichtet sein, das rechte ganz rechts.
[…] Geht das überhaupt mit CSS […]?

Ja. 'text-align-last' für IE und Workaround für alle anderen, unfähigen Browser. Siehe Thread horizontale Liste (Menü) als Blocksatz.

Qapla'

[pbauer]

Ja. 'text-align-last' für IE und Workaround für alle anderen, unfähigen Browser. Siehe Thread horizontale Liste (Menü) als Blocksatz.

Ich habe es so probiert:

.Wrapper ul{
        margin:0;
        padding:0;
        width:700px;
        display:block;
text-align-last:justify;
        text-align:justify;
}

.Wrapper li{
        list-style-type:none;
        display:inline-block;
border:thick;
}

.Wrapper ul::after
{
        content: "\A0";
        display: inline-block;
        height: 0;
        width: 100%;
}

Zumindest im Firefox kleben alle Bilder aneinander, von Blocksatz keine Spur. Also so klappt es bei mir leider nicht. :-( Was habe ich übersehen?

[Gunnar Bittersmann]

@@pbauer:

Was habe ich übersehen?

Das Mark-up zu posten, auf das sich das Stylesheet beziehen soll.

Qapla'

[pbauer]

Sorry.

<ul id="Wrapper">
  <li><img src="_images/testpic1.jpg" width="135" height="135" class='colourborder' /></li>
  <li><img src="_images/testpic2.jpg" width="135" height="135" class='colourborder' /></li>
  <li><img src="_images/testpic3.jpg" width="135" height="135" class='colourborder' /></li>
</ul>

<h1>Überschrift<h1>

"colourborder" dient dazu, um die Bilder einen bunten Rahmen zu legen - das soll später bei einigen aber nicht bei allen Bildern der Fall sein, darum behandele ich das getrennt von anderen Formatierungen und habe es hier nur der Vollständigkeit dringelassen, falls sich da gegenseitig was stört.

Der Code dafür sieht so aus:

.colourborder {
border-top-style:solid;
border-top-width:30px;
border-top-color:#F9970E;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
height:111px;
}

Danke!

[Gunnar Bittersmann]

@@pbauer:

nuqneH

<ul id="Wrapper">

Der Selektor '.Wrapper ul' matcht nicht auf dieses Element. Aus mehreren Gründen. [CSS20, http://de.selfhtml.org/css/formate/zentrale.htm@title=SELFHTML]

"colourborder" dient dazu, um die Bilder einen bunten Rahmen zu legen

Klassen anhand der gewünschten Darstellung zu bezeichnen, ist nie eine gute Idee.

_Warum_ haben manche Bilder einen bunten Rahmen und andere nicht? _Danach_ wäre die Klasse zu benennen.

Qapla'

[pbauer]

Der Selektor '.Wrapper ul' matcht nicht auf dieses Element. Aus mehreren Gründen. [CSS20, http://de.selfhtml.org/css/formate/zentrale.htm@title=SELFHTML]

Wie peinlich. Muss beim Rumprobieren passiert sein, oder ich habe den falschen Codeschnipsel kopiert. In meiner HTML-Datei steht jedenfalls "class" statt "id", aber es klappt immer noch nicht.
Wenn ich Text statt Bilder einfüge, klappt es ebenfalls nicht. Alle Worte sind direkt nebeneinander.
Wenn ich dann aber für die li-Elemente eine Breite mit width vergebe, klappt es. Aber genau das wollte ich ja vermeiden - also die feste Vergabe einer Breite. (Und was, wenn die Bilder unterschiedlich breit sind?)

Geht das, was ich will, überhaupt?

[Gunnar Bittersmann]

@@pbauer:

nuqneH

Wie peinlich. Muss beim Rumprobieren passiert sein

Ja ja, das passiert beim Kopieren öfter, dass der Text auf einmal ein anderer ist.

Ein Mönch kann sich ja mal verschreiben.

aber es klappt immer noch nicht.

Sagte ich nicht „aus mehreren Gründen“? Doch sagte ich.

Klasse vs. ID ist mehrere Gründe? Nein, nur einer.

Du findest den zweiten? Was selektiert '.Wrapper ul' denn für Elemente? Und was für Elemente willst du eigentlich selktieren?

Geht das, was ich will, überhaupt?

Ja. Wie oft denn noch?

Qapla'

[pbauer]

Weißt du, ich bin Anfänger. Ich mach die Seite für jemand anders (darum auch der Klassenname mit "colour", weil ich eben nicht mal weiß, warum manche Bilder einen bunten Rahmen haben sollen, andere aber nicht!). Ich habe mich an dieses Forum gewandt, weil ich nicht mehr weiter wusste. Ich habe hier nicht nachgefragt, weil ich mit der Nase drauf gestoßen werden wollte, dass ich blutiger Anfänger bin, und dass mir der Mut und die Lust genommen wird, Fragen zu stellen. Mir muss auch niemand beweisen, dass er CSS viel besser beherrscht als ich, das weiß ich selbst. Ich habe stundenlang an einem Problem geknackt und bin daran verzweifelt, und habe dazu eine Lösung gesucht. Keine Belehrungen zu Klassennamen. Und kein oberlehrerhaftes

Sagte ich nicht „aus mehreren Gründen“? Doch sagte ich.

Klasse vs. ID ist mehrere Gründe? Nein, nur einer.

Warum nennst du mir die Gründe nicht einfach? Warum lässt du mich zappeln und weiter rumraten, wenn ich mich doch klar mit der Bitte um Hilfe an dieses Forum gewandt habe?

Ein

Wie oft denn noch?

ist auch wirklich sehr "hilfreich". Und macht wirklich Mut! Danke!

Ich fühle mich nach dem Besuch hier in diesem Forum wirklich sehr klein und dumm. Spaß hat es mir nicht gemacht. Und statt dass ich jetzt Lust habe, weiter mit CSS zu probieren und weiter zu lernen, möchte ich am liebsten alles hinwerfen und schlicht und einfach HTML-Tabellen für diese Bilder erstellen.
Ich finde es schade, wenn jemand, der ein Experte auf einem Gebiet ist, einem blutigen Anfänger nicht generös hilft, sondern diesem Anfänger so richtig zeigt, dass er ein Anfänger ist. Ich finde, ein wahrer Könner hat das nicht nötig, sich so beweisen zu müssen.

Ich habe den Fehler übrigens selbst gefunden. Es fehlt ein "display: inline-block". Damit funktioniert es jetzt. Wäre es so schwer gewesen, mir genau das zu sagen statt mich rumzappeln und rumraten zu lassen, bis ich verzweifle, und mir zu zeigen, dass ein richtiger Experte sich nicht so dumm anstellen würde wie ich?

Und darum würde ich gern folgende Frage anschließen: Kennt jemand ein gutes (deutsches) CSS-Forum, wo auch Anfänger willkommen sind und Fragen stellen dürfen und wo die Fragen dann auch beantwortet werden? Danke!

[Gunnar Bittersmann]

@@pbauer:

nuqneH

Keine Belehrungen zu Klassennamen. Und kein oberlehrerhaftes

Dass du hier zusätzliche Hinweise bekommst, solltest du als Plus dieses Forums sehen, nicht als Minus. Oberlehrer?? >;-)

Warum nennst du mir die Gründe nicht einfach?

Weil du durch Nachdenkenken selbst drauf kommst und dabei mehr lernst.

Warum lässt du mich zappeln und weiter rumraten

Du sollst nicht rumraten, sondern nachdenken. Über die verlinkten Beschreibungen.

(*) '.foo bar' (gleichbedeutend mit '*.foo bar') selektiert bar-Elemente, die Nachfahren von beliebigen Elementen der Klasse "foo" sind. Es selektiert nicht 'bar'-Elemente der Klasse "foo". Wie müsste de Selektor dafür aussehen?

Ein

Wie oft denn noch?
ist auch wirklich sehr "hilfreich". Und macht wirklich Mut! Danke!

Es ist auch nicht wirklich sehr hilfreich, wenn du dieselbe Frage noch einmal stellst, obwohl ich sie schon beantwortet hatte. Das macht wirklich Lust, deine Fragen zu beantworten! Bitte!

Ich habe den Fehler übrigens selbst gefunden. Es fehlt ein "display: inline-block". Damit funktioniert es jetzt.

Das kann ich nicht glauben. Siehe (*).

Es sei denn, da hat sich beim Kopieren dein Quelltext wieder auf magische Weise verändert.

Und darum würde ich gern folgende Frage anschließen: Kennt jemand ein gutes (deutsches) CSS-Forum, wo auch Anfänger willkommen sind und Fragen stellen dürfen und wo die Fragen dann auch beantwortet werden?

Ja, dieses hier. Sofern du bereit bist mitzudenken.

Qapla'