Colorbox: Bilder nebeneinander

Stichwort ist float, aber ich denke Du wirst nicht drumrum kommen, Dich etwas in CSS einzuarbeiten, denn gerade floats haben Nebenwirkungen.

Korrekt. Such mal nach CSS float bzw. schau Dir mal diese Artikel an: http://de.selfhtml.org/html/grafiken/ausrichten.htm oder auch http://www.ohne-css.gehts-gar.net/0004.php.

Es gibt da wirklich sehr sehr viele Beispiele, Du musst einfach mal ausprobieren, welche CSS-Anweisungen letztendlich am Besten funktionieren. Hilfreich ist dafür auch die Erweiterung Firebug (für Firefox).

Guten Morgen!
Danke erstmal für eure Antworten. Aber wo baue ich das denn ein? Gebe ich diesen CSS Code direkt in den Editor von meiner Basic Page ein?

Gruß,
Boris

Du musst die css-Dateien in Deinem Theme anpassen. Siehe dazu auch http://drupal.org/theme-guide/6-7.

Sooo, ich habe jetzt das .css-File gefunden und folgende Änderung vorgenommen:

vorher:
a img { border:none; outline: none; display:block; overflow:hidden; }

nachher:
a img { border:none; outline: none; display:block; overflow:hidden; float: left; }

Es funktioniert damit auch schon fast ;-)
Leider wird jetzt alles, was den Bildern folgt, ebenfalls mit diesen in einer Reihe dargestellt...
Könnte mir jemand sagen was ich noch zu beachten habe? Danke!

Wie in den Artikeln erwähnt wird, muss das folgende Element die Anweisung clear: both; (in diesem Fall genügt auch clear: left;) bekommen.

Alternativ kannst Du dem umgebenden Element, wahrscheinlich ein div, overflow : hidden geben.

Mensch, ist das alles kompliziert ;-)
Also irgendwie steh ich jetzt total auf dem Schlauch...

Erstes Problem: ich habe gerade festgestellt, dass jetzt ALLE BIlder herum-floaten, z.B. auch das Seiten-Logo. Das soll natürlich nicht sein! Wie kann ich das denn auf die Bilder in einem Field meiner Basic page (welches ich extra für solche Bilder angelegt habe) begrenzen?

Zweites Problem: um das floaten nach den Bildern zu stoppen sollte ich ja den Clear Befehl verwenden. Aber wie kann ich dafür sorgen, dass dieser automatisch nach dem Bilder-Field kommt? Ich will ja nicht auf jeder Seite wo ich Bilder reinsetzte immer von Hand diesen Code einfügen, oder?

Danke für eure Geduld :-)

Hallo

Dann kannst du es in deinem seite--tpl.php fest verankern.

Oder Display Suite ( DS ) vielleicht versuchen.

Ich habe all meine Node's mit Display Suite erstellt, um dieses Modul in seinen Möglichkeiten kennen zu lernen.

Werde ich es noch einmal nicht anwenden, ich denke nicht.

Variante von ( DS ) Display Suite

+++++++
Title
++++++++++++++++++
¦ Bild... ¦ Text
¦ Bild... ¦ Text
¦ Bild... ¦ Text
+++++++++++++++++++
Text
Footer
+++++++

Jetzt ist der Zeitpunkt gekommen, Dir doch mal ganz dringend und nachdrücklich ans Herz zu legen, dass Du Dir mal das ein oder andere CSS-Tutorial zu Gemüte führen solltest. Dort lernst Du dann nämlich unter anderem, wie Du mittels CSS-Selektoren nur ganz bestimmte Elemente ansprichst.

Hast du dir eigentlich mal diesen Screencast angesehen? Da geht es u.a. auch um angeordnete Bilder mit Colorbox.

Ist ja ganz schön, aber wieso sollte man die Bilder als Tabelle ausgeben??? Das ist doch semantisch völlig falsch. Das geht locker per CSS.

Auf welche Mitteillug bezieht sich Ihre Aussage ?
Wenn auf DS ( Display Suite ) dieses erstellt keine Tabellen, sondern DIV's genau so wie wenn Sie ein eigenes seiten--tpl.php erstellen würden. DS kann ausser dem weiteren Inhalt einfach wie zb. eine View einfach im Node platzieren, oder weiter Widgets.

Meine Aussage bezog sich auf den Screencast.
Mit DS hab ich zwar schon gearbeitet, ich glaube aber, daß es für dieses einfache Problem etwas zu viel das guten ist. Es geht ja lediglich darum ein paar Bilder mittels CSS nebeneinander zu bringen. Dazu kann man ja leicht ein Template anpassen oder einen View. Semantisch korrekt wäre das z.B. so:

Und im CSS dann:

Und wie kann ich denn den HTML Code beeinflussen? Den generiert Drupal ja automatisch. Da kann ich ja noch so viel CSS styles definieren ;-)
Also auf irgendwas müssen die ja zugreifen...

Wenn ich das richtig verstanden habe (bin auch eher Anfänger, was das Thema angeht), dann braucht man ja "den HTML Code" nicht zu beeinflussen. Drupal generiert irgendeinen HTML-Code aus den Bildern in dem Node und mit CSS ordnet man die Bilder dann so an, wie man sie haben will.

Ja, entweder nimmt man die HTML-Struktur, die Drupal so ausgibt und biegt sich das CSS zurecht. Das kann u.U. Unübersichtlich werden, denn Drupals Markup ist oft eine Codesuppe. Alternativ beeinflusst man die HTML-Struktur mit Templates und/oder Theme Functions.

Trotz eurer zahlreichen Vorschläge funktioniert das ganze einfach nicht. Die Bilder erscheinen nach wie vor untereinander, und lassen sich von meinem CSS kein bisschen beeinflussen.

Hier ist der HTM Code, den Drupal erzeugt:

Um diesen zu formatieren habe ich folgenden CSS Code in das style.css meines Templates eingebaut:

Eigentlich hätte ich vermutet, dass dadurch der Block so formatiert wird, dass alle Bilder "floaten" (also nebeneinander kommen). ABer dem ist leider nicht so...

Mach einen Punkt vor den Klassennamen und ersetz xy mit einem Zahlenwert, der für Dich paßt.

Ja, der Punkt hat gefehlt. Tausend Dank! :-)

Argh! Leider muss ich schon wieder nachfragen....
Nach einem unfreiwilligen Update wurde meine style.css Datei überschrieben, und nun sind alle Bilder wieder untereinander :-(
Ich habe versucht das ganze wieder durch

nebeneinander anzuordnen, leider funktioniert das nicht. Die Bilder bleiben untereinander, dafür rutscht der folgende Text über die Bilder. AAAHHHHHHH!!!

Beim letzten mal hat es doch auch geklappt!? Kann mir nochmal jemand helfen?
Danke!

Ich kriegs auch nicht hin. Ich benutze Drupal 7 und wenn ich in die style.css unter /themes/meintheme den Code einfüge passiert bei meinen Bildern einfach überhaupt nichts. Es bleibt alles beim Alten.

Du mußt nach solchen Änderungen den Drupal Cache löschen, damit die Theme-Registry neu aufgebaut wird und dadurch die Änderungen wirksam werden.

Beste Grüße
Werner

Hat bei mir nix gebracht. Bei mir ist jetzt was passiert nachdem ich in der style.css unter: /sites/default/files/color/garland-16ccd530 den Eintrag

hinzugefügt hab. Mit den anderen ist gar nichts passiert. Jetzt wurde allerdings verständlicherweise noch viel mehr verschoben :(

Zu sehen z.B. hier. Eigentlich wollte ich nur ganz unten die Bilder nebeneinander machen. Jetzt ist aber auch der Block "Material" rechts neben das obere Bild gerutscht. Was generell ganz gut aussieht. Aber nur wenn die Länge des Textes passt. Ansonsten rutscht der Text halt weiter nach unten oder wenn es zu kurz ist rutscht die "Anleitung" auch mit neben das Bild.

Hat jemand vielleicht noch eine Idee, was ich statt .colorbox nehmen kann? Ich habs selbst mit Firebug irgendwie nicht gefunden :(

Nach nochmaligem Überfliegen des Threads kann ich Dir nur sagen: Hole Dir ein passendes Buch und arbeite Dich in CSS ein. Das brauchst Du immer wieder. Außerdem findest Du dann die Hinweise, wie man die Selektoren so genau setzt, daß nur ein spezielles Element angesprochen wird.

Beste Grüße
Werner

Hallo und Moin,
Also erstmal haben alle Recht, wenn Sie dir raten dich dringend in CSS einzuarbeiten.
Warum? Nun was du momentan tust, ist ein bischen rumwursteln ohne zu wissen was du da tust.

Ich habe mir deine Seite angeschaut und durch das ganze Rumgewurstel entstehen Vererbungen die unkontrolliert zwischendrin zuschlagen.
Beispiel:

Dann lässt du die Klasse .colorbox (Also dein Bild oben rechts) mit float:right nach rechts floaten. Damit entsteht zwischen deinem Text // Kategorie, Material etc// viel zu viel Whitespace.

Das löst du in dem du in der node.tpl.php (als Beispiel) Die Ausgabe nach Felder unstellst. Also den content komplett in die einzelnen Maschinen-Felder aufdröselst. Dann um den Block mit deinem Kategorie Material-Text etc. ein eigenes DIV legst.
Dieses Div lässt sich dann besser floaten um dein Bild.
Und wenn du dann die bekannten Clearfix-Anweisungen für dieses DIV verwendest sieht die Ausgabe wesentlich besser aus.

Weiter Clearfix ...
EIn richtiges Clearfix, welches nicht nur im Firefox sauber funktioniert ist nicht nur mit dem overflow:hidden Befehl abgetan. Dazu kommt noch *zoom: 1.
Und warum das so ist, steht sehr ausführlich unter: http://molily.de/weblog/css-floats-einschliessen.

Schriften
- in deiner body-Anweisung steht:

Es ist besser die Schriftgrössen heute in em anzugeben. Natürlich gibt es auch andere Meinungen. Dennoch benötigst du CSS-Wissen um zu wissen das alle Browser bis auf Einen die Standardgrösse auf 16px setzen. Und warum ausgehend von diesem Wert alle deine Definitionen in em umgerechnet werden sollten. Leider müssen wir uns noch mit CSS2 beschäftigen, weil eben noch sehr viele Besucher mit alten Browsern surfen. Du findest zum Thema CSS-Schriftgrössen für alle Browser unzählige Seiten im Netz.

So du siehst, um eine wirklich saubere, kontrollierte Ausgabe zu erreichen, ist das Einsteigen in CSS unumgänglich. Ansonsten weisst du nie was du da tust. Und wenn du in verschiedenen Browsern testest erhältst du schnell andere Ergebnisse.

Wichtig:
1. CSS einarbeiten, YT, Webseiten, Bücher etc.
2. Drupal Theming Guide

Und ein Blick zu den Profis wie Alistapart, Thierry Koblentz, Eric Meier etc. ist ebenfalls anzuraten.

Und zum Schluss:
Bei alledem habe ich nicht mal über den Vertical Rhythm gesprochen. Das ist eine spezielle Art Schriftgrössen zu berechnen, damit die Seite einfach besser lesbar wird.

Hab ich noch etwas vergessen?
Achja ... Da immer mehr mobile Endgeräte auf den Markt kommen, ist das grosse Thema beim Webdesign nun: Responsive Layout und Media Queries. Alles mittels CSS.

Eine Einarbeitung lohnt sich in jedem Fall.

Schönes WE
T.