Nachrichtenelemente oder Videoplayer automatisch in mehreren Spalten anordnen

[isti]

Hallo,

ich würde gerne 30-40 Bild,Videoplayer oder Nachrichtenelement automatisch in mehreren Spalten anordnen, wenn die Breite der Seite (Main) es zulässt. Also je nach Größe in 2 oder 3 Spalten. Ich könnte es natürlich auch mit Spaltenelement machen, was aber etwas umständlich ist, wenn die Anzahl der Elemente groß ist.

Ich würde gerne, wenn so etwas mit Bild Elementen möglich ist, gleich die Anordnung (Volle Breite spaltenweise ausnützen), die Größe des jeweiligen Bildes und das Mouseover-Layout mit CSS gestalten.

Also jedes Bild sollte bei Mousover andere Farben haben und einen orangefarbigen Rand. Ist es möglich oder soll ich diesen Zustand als Bild immer manuell erstellen? Die Frage ist also, ob ich die Farben eines Bild mit CSS ändern kann?

Wie mache ich es bezüglich Anordnung am besten?

Richte ich eine CSS Klasse mit den entsprechenden Merkmalen und schreibe diesen Klassennamen ins passende Feld beim Element Bild oder Text ein?

also ungefähr so, wo "box" dann bei jedem Element eingetragen wird?

.box {
 float: left;
 width: 32%;
 margin-right: 2%;
 padding: 20px;
 box-sizing: border-box;

.box:last-child {
     margin-right: 0;
}
}

Also das größere Bild sollte rechts vom kleinen angeordnet sein: http://www.hfn-media.net/startseite4.html

Vielen Dank für die Hilfe.

I.

[Andreas]

Für Spaltenanordnung gibt es mehrere Möglichkeiten, aber deine mit float:left; sieht schon gut aus. Wenn du was erstellt hast und noch Probleme vorhanden sind, kannst du mal einen Link zeigen, sodass wir gezielt helfen können.

Ich würde zuerst die CSS-Klasse im BE vergeben. Dann kannst du das Element im Browser mit deinem Developement-Tool, z.B. Firebug (neue Regel hinzufügen) temporär gestalten bis es dir gefällt und den Code dann in deine CSS schreiben.

Bilder kannst du mit width:100%; height:auto; auf die zur Verfügung stehende Breite des Elternelements ausdehnen.

Bilder mit CSS verfremden kannst du dir hier abgucken http://bennettfeely.com/filters/

Dein CSS-Beispiel: ist das SASS, LESS o.ä.? Oder hast du dich nur mit den Klammern vertan?

selector {
  property: value;
  property: value;
}
selector {
  property: value;
} 

[isti]

Vielen Dank, ich habe jetzt den fehlenden Link beigefügt.

"SASS, LESS": ich habe Copy / Paste wohl einfach nur falsch verwendet :-)

Bei den verlinkten CSS Filtern passiert nichts. Sollten sich die Bilder bei MouseOver ändern? Mein FF unterstützt es eventuell nicht?

Ich habe etwas geändert und jetzt scheint es zu klappen.:http://www.hfn-media.net/startseite4.html

[Andreas]

Auf der Demoseite soll sich nichts ändern bei Hover. Dort sind nur die Effekte mit "filter" aufgezeigt. Du sieht doch die Bilder alle unterschiedlich, oder? Bei caniuse.com kannst du nachsehen, welche Browser das unterstützen.

Dein Link funktioniert leider nicht mehr.