Bilder und Text bündig
Ich hab das Problem, dass Bilder nicht vom Text umlaufen werden, sondern der Text jeweils am unteren Bildrand beginnt. Wie kann ich das beheben.
Komischerweise ist es mir vor längerem mal gelungen, Fotos von Text umflossen darzustellen, ich weiß aber nicht mehr, wie das geschafft habe.
Vielleicht hat einer eine Idee.
Damit klar wird, was ich meine, häng' ich mal ein Beispiel an.
Komischerweise ist es mir vor längerem mal gelungen, Fotos von Text umflossen darzustellen, ich weiß aber nicht mehr, wie das geschafft habe.
Vielleicht hat einer eine Idee.
Damit klar wird, was ich meine, häng' ich mal ein Beispiel an.
- Attachments
-
- bludit.png (197.27 KiB) Viewed 528 times
- Edi
- Site Admin
- Posts: 3121
- Joined: Sun Aug 09, 2015 5:01 pm
- Location: Zurich
- Has thanked: 54 times
- Been thanked: 77 times
- Contact:
Du hast zwei Möglichkeiten, das zu machen, direkt im Code oder mit CSS-Klassen.
1. Direkt im Code
Wenn Du den Editor TinyMCE verwendest, klickst Du den Button mit dem Icon <> an und öffnest so das Fenster, dass den Code anzeigt.
Beim Bild ergänzst Du den Tag image beispielsweise so:
Wenn das Bild rechts angezeigt werden soll, verwendest Du float: right. margin definiert den Abstand zum Text.
2. CSS-Klassen
Damit Du den CSS-Stil nicht überall manuell eingeben musst, kannst Du Klassen zum Editor TinyMCE hinzufügen.
Dazu erweiterst Du tinymce.init in der Datei plugin.php im Verzeichnis /bl-plugins/tinymce mit vordefinierten Klassen. Beispielsweise:
Bei diesem Beispiel würde tinymce.init dann so aussehen (Zeile 95):
Weiter musst Du die CSS-Klassen definieren. Dafür kannst Du im Plugin HTML-Code im Feld "Header" Folgendes eingeben:
Wenn Du nun das Bild markierst und das Bild-Icon des Editors TinyMCE anklickst (oder die rechte Maustaste verwendest), kannst Du eine der definierten Klassen wählen.
1. Direkt im Code
Wenn Du den Editor TinyMCE verwendest, klickst Du den Button mit dem Icon <> an und öffnest so das Fenster, dass den Code anzeigt.
Beim Bild ergänzst Du den Tag image beispielsweise so:
Code: Select all
<img style="float: left; margin: 0 20px 20px 0;" src="https://...>
2. CSS-Klassen
Damit Du den CSS-Stil nicht überall manuell eingeben musst, kannst Du Klassen zum Editor TinyMCE hinzufügen.
Dazu erweiterst Du tinymce.init in der Datei plugin.php im Verzeichnis /bl-plugins/tinymce mit vordefinierten Klassen. Beispielsweise:
Code: Select all
image_class_list: [
{title: 'keine', value: ''},
{title: 'Links', value: 'links'}
]
Code: Select all
tinymce.init({
selector: "#jseditor",
auto_focus: "jseditor",
element_format : "html",
entity_encoding : "raw",
skin: "oxide",
schema: "html5",
statusbar: false,
menubar:false,
branding: false,
browser_spellcheck: true,
pagebreak_separator: PAGE_BREAK,
paste_as_text: true,
remove_script_host: false,
convert_urls: true,
relative_urls: false,
valid_elements: "*[*]",
cache_suffix: "?version=$version",
$document_base_url
plugins: ["$plugins"],
toolbar1: "$toolbar1",
toolbar2: "$toolbar2",
language: "$lang",
content_css: "$content_css"
image_class_list: [
{title: 'Keine', value: ''},
{title: 'Links', value: 'links'}
]
});
Code: Select all
<style>
.links {
float: left;
margin: 0 20px 20px 0;
}
</style>
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets