Bild von Text umfließen lassen
Eingetragen von hotzpotz (22)am 16.04.2010 - 19:34 Uhr in
Ich möchte gern ein im CKeditor eingefügtes Bild von Text umfließen lassen. cck, filefield, imgafield und imceimage sind installiert. Kann mir jemand helfen und schreiben, was ich steb-by-step tun muss?
- Anmelden oder Registrieren um Kommentare zu schreiben
CSS + Firebug
am 16.04.2010 - 20:43 Uhr
Das ist reines CSS.
Du musst das Bild floaten. Dazu muss das Bild vor dem umfließenden Text eingefügt werden. Dann suchst Du Dir die Klasse mit dem Firebug und gibst ihr
.myimage {float: left;}und ein bisschen Abstand zum Text
.myimage {margin-right: 10px; margin-bottom: 10px;}Text neben Bild im CKeditor
am 19.04.2010 - 16:59 Uhr
Wenn ich mir im CKeditor nach dem Bildeinfügen den Code ansehe, dann steht der float-Befehl hinter dem Bild
"<p> <img alt="Sonnenblumen" src="/2010/sites/default/files/redaktion/start.jpg" style="width: 200px; height: 135px; float: left;" /></p>... float: left;"Im Vorschaufenster des Editor wird der Text auch neben dem Bild angezeigt, nicht jedoch auch der Seite nach dem "speichern".
Lösung: EIntrag in style.css einfügen
am 20.04.2010 - 11:58 Uhr
So funktioniert es: In die style.css zwei neue Klassen einfügen, unter "a img":
.imgleft {
margin-left: 0px !important;
margin-right: 15px;
margin-top: 10px !important;
margin-bottom: 0px !important;
/*je nach Schriftart und Zeilenhöhe ist hier evtl. ein wenig Abstand nötig! */
float: left;
}
.imgright {
margin-right: 0px !important;
margin-left: 15px;
margin-top: 10px !important;
margin-bottom: 0px !important;
/*je nach Schriftart und Zeilenhöhe ist hier evtl. ein wenig Abstand nötig! */
float: right;
}
Dabei muss im Editor die CSS-Klasse nicht angegeben werden.
Jedenfalls Bild links und Text rechts funktioniert dann, andersherum allerdings nicht.
Unter Umständen einfacher: in
am 29.09.2010 - 12:30 Uhr
Unter Umständen einfacher:
in den Eingabeformaten (/admin/settings/filters) den entsprechenden Filter bearbeiten und den Haken bei "HTML-Filter" weg. Dann werden die "als potenziell gefährlich eingestufte Javascript-Events, Javascript-URLs und CSS-Styles" nicht mehr entfernt. Sollte also mit Bedacht gewählt werden.
--
Webdesign Lübeck
Und noch ein kleines [gelöst]
am 29.09.2010 - 12:42 Uhr
Und noch ein kleines [gelöst] oben einfügen wäre perfekt...
-----------
Luca Curella
Kooperative Netze - Berlin
Noch nicht ganz
am 21.04.2011 - 11:03 Uhr
Hey,
eine Frage stellt sich mir noch:
Wie heißt die css Datei in der ich das für das Theme Zen einfügen muss?
Mfg mateox :)
mateox schrieb Wie heißt die
am 21.04.2011 - 11:49 Uhr
Wie heißt die css Datei in der ich das für das Theme Zen einfügen muss?
Derartige Fragen beantwortet Dir die Firebug Erweiterung für Firefox in Sekundenschnelle für alle Themes ... Dieses Tool ist einfach unverzichtbar beim CSS "schrauben"!
Drupal 7 Screencasts in deutsch!
Generell klingt floaten immer
am 21.04.2011 - 16:34 Uhr
Generell klingt floaten immer trivial. Aber hats dank versch. schon in sich.
http://little-boxes.de/
Ließ dir dass mal durch. Ist mit das Beste, was es für Einsteiger im Bereich Gestaltugn mit div und css gibt. In den Bsp. wird eine kleine Seite mit Menü,etc. gebaut.
So lernt man auch gleich warum was nicht geht. Bzw. wieso dein frisch eingegebener Wert in Firebug durchgestrichen wird. ;)
... um die Frage zu
am 21.04.2011 - 20:36 Uhr
... um die Frage zu beantworten:
Grundsätzlich ist es fast(!) egal, wo und in welche CSS-Datei der Code eingefügt wird; der Ordnung halber würde ich es z.B. ans Ende der layout-fixed.css (bzw. layout-liquid.css) setzen.
Viele Grüße,
Tobias
--
Webdesign Lübeck