Inhalte mit Bildern
Eingetragen von Axel75 (35)am 06.03.2008 - 21:06 Uhr in
Hallo, ich würde gerne wissen wie man Bilder neben dem Text darstellen kann. Wie z.B. auf der folgenden Seite:
Ich habe das Problem, dass wenn ich zuerst ein Bild einfüge, der Text dann unter dem Bild dargestellt wird. Doch wie schafft man es ein Bild mitten in den Text einzubauen so dass es von Text umgeben ist???? Benötigt man dazu spezielle Module? (ich habe den FCKeditor....damit kann ich das allerdings nicht regeln)
- Anmelden oder Registrieren um Kommentare zu schreiben
CSS
am 06.03.2008 - 21:55 Uhr
Das macht man mit CSS. Sieh Dir mal dieses Tutorial an, falls Englisch kein Hindernis für Dich ist, oder auch hier gibt's etwas. Jede Suchmaschine bringt Dir mit den Begriffen "css tutorial float" Brauchbares.
Hallo, vielen Dank für den
am 08.03.2008 - 15:40 Uhr
Hallo, vielen Dank für den Link zu den Codes. Doch wo genau muss ich diese jetzt einbauen? Im Style.CSS des Themes?
Ja
am 08.03.2008 - 21:00 Uhr
Ja. Am besten neue Definitionen (empfehlenswerterweise kommentiert!) an das Ende der Datei anfügen, da diese die vorherigen dann überschreiben.
Also ich habe jetzt einmal
am 09.03.2008 - 02:09 Uhr
Also ich habe jetzt einmal den folgenden Code im CSS.Style definiert....
/*----------image styles----------*/
img
{
padding:3px;
}
img
{
float: right;
margin: 0 0 5px 5px;
border: 1px solid #000;
}
Mit border definiere ich einen Rahmen um das Bild und mit Margin einen Abstand. Nun gibt es noch 2 kleine Probleme....
Einerseits kann man ja auf diese Weise nur entweder float.right oder float.left etc. definieren....was nicht geht ist beim einten Artikel float.right und beim nächsten Artikel float.left....gibt es dafür eine Lösung?
Dann gibt's noch grössere Probleme beim FCKeditor. Wenn ich da etwas erstelle, zeigt der die Abstände zum Bild nicht so an wie sie nachher auf der Webseite angegeben werden. Ich kann beim Editor viel näher an das Bild heranschreiben. Nachher auf der Seite sorgt dies dann unter Umständen (wenn ich im Editor zuwenig Abstand zwischen Text und Bild gelassen habe) für fürcherliche Abstände und riesen Absätze. Woran liegt denn das? Bei einem WYSIWYG-Editor sollte man doch sehen was man anschliessend kriegt......what you see is what you get.
clear
am 09.03.2008 - 13:47 Uhr
Mit der CSS-Anweisung "clear" kannst Du vorausgehende Floats aufheben (und danach natürlich die Richtung wechseln).
Ich würde das DIV, welches Deine verschieden ausgerichteten Images umschliesst (oder wo immer sonst in Deinem Theme dies Sinn macht) in der styles.css um folgende Anweisung erweitern:
div.img_container {clear: both;
}
"img_container" muss mit dem Namen der betreffenden DIV-Klasse oder -ID (in diesem Fall "div#img_container"!) Deines Themes ersetzt werden.