Wie kann ich den Textfluss um Bilder herum einstellen?

[toram]

Hallo alle miteinander!

Nachdem ich nun einige Zeit (bestimmt ein paar Stunden) hier im Forum auf Deutsch und Englisch gesucht habe und nichts fand, stelle ich die Frage jetzt direkt.

Wie kann ich den Textfluss um ein Bild einstellen?
Ich möchte ein Bild vom Text im Contentbereich umfließen lassen und es nicht nur als "Absatzanfangsbild" oder "Bild-mitten-im-Text-und-links-und-rechts-daneben-Leere" stehen haben.

Mit einer Tabelle habe ich es schon versucht, das Ergebnis war aber nicht besonders zufriedenstellend, denn der Abstand vom Text zum Bild blieb sehr gering, auch mit mehreren Zellen Abstand. Außerdem denke ich, dass das nicht die richtige Lösung ist. Auch ein Verändern des horizontalen Abstands im Bild-Editor brachte keine Verbesserungen/Ergebnisse.

Habt ihr noch einen Rat, bzw. eine Idee?

Danke und Gruß
T.

[cyberman]

Nachdem ich nun einige Zeit (bestimmt ein paar Stunden) hier im Forum auf Deutsch und Englisch gesucht habe und nichts fand

Ist ja auch ein Forum für CMSms. Deine Frage ist eher ein Problem der CSS .

Wie kann ich den Textfluss um ein Bild einstellen?
Ich möchte ein Bild vom Text im Contentbereich umfließen lassen und es nicht nur als "Absatzanfangsbild" oder "Bild-mitten-im-Text-und-links-und-rechts-daneben-Leere" stehen haben.

Die Frage ist, wo der Text lang fliessen soll.

Etwas in der Art müsste in den Source

Code: Select all

<div id='Bild1'><img ... /></div>

und das in die CSS

Code: Select all

div#Bild1 
{
   float: left;
   margin: 1em;
}

Damit fliesst der Text im Abstand von 1em rechts vorbei ...

[toram]

Na dann...: Wenn ich DAS gewusst hätte!

Vielen Dank schon mal, werde das heute noch probieren. Kommen bestimmt noch mehr Fragen...

Wenn's hier nicht weiter reinpassen sollte, dann bitte ich um einen Tipp für ein passenderes Forum.

Danke nochmal, Gruß
T.

[Drake]

Warum denn so kompliziert cyberman ? Das macht dir auch fast jeder WYSIWYG-Editor im CMSms, Bild einfügen, bei V und H Abstand jeweils 10, bei Ausrichtung links, rechts oben, mitte, was auch immer und fertig. Sieht im Quelltext dann z.b. so aus:

Code: Select all

<img vspace="10" hspace="10" align="left" src="/uploads/images/deinbild.jpg" alt="deinbild" />

Simples HTML, siehe auch dort -> http://de.selfhtml.org/navigation/html.htm#grafiken

[toram]

Danke, Drake! You made my day!

Nachdem ich es mit dem Hinweis von cyberman versucht habe, hatte ich leider keinen Erfolg, obwohl ich die Angaben für's CSS übernommen habe und den Rest im Quellcode ergänzt hatte). Aber dein Hinweis war gut, nur dass ein Bild z.B. mitten im Text nicht umflossen wird, sondern jeweils nur eine Zeile (nämlich die, in die ich das Bild eingefügt habe) links und rechts neben dem Bild.
Hast du (oder natürlich auch jemand anders) dafür noch einen Tipp? Auch selfhtml hat mir (jetzt gerade auf die Schnelle) keinen weiteren Hinweis geben können.

Bin ich zu anspruchsvoll? *zweifel*

Gruß Toram

[cyberman]

Warum denn so kompliziert cyberman ?

CSS macht mich eben tierisch an ...

[Drake]

Hmm stimmt jetzt wo du es sagst, ich hab das auch mal probiert mit einem Bild mitten im Text und es dann wieder gelassen weil der Text beim fließen nur rechtsrum oder linksrum geht. Mit middle, top oder bottom wird ja nur die Grafik zur aktuellen Zeile ausgerichtet. Da wäre eine Tabelle wohl doch eher die bessere Lösung wenn links und rechts Text stehen soll.

[faglork]

Warum denn so kompliziert cyberman ? Das macht dir auch fast jeder WYSIWYG-Editor im CMSms, Bild einfügen, bei V und H Abstand jeweils 10, bei Ausrichtung links, rechts oben, mitte, was auch immer und fertig.

Weil man mit der CSS-Lösung bei einem ReDesign schneller zum Ziel kommt?
Inline-Code hat IMHO nur Nachteile.

Ich mach das so: Ich füge das Bild mit dem WYSIWYG-Editor ein, verzichte auf jegliche Positionierung und vergebe unter "Erweitert"
die CSS-Klasse "rechts" oder "links".

Im CCS der Seite stehen entsprechende Formatierungs-Anweisungen wie zb.

Code: Select all

img.rechts { float: right; margin: 0 0 10px 20px; border: 1px solid #ccc;}

usw. usf.

Das hat den Vorteil, dass ich das Layout für *sämtliche* Bilder einer Site durch Modifikation eines *einzigen*  CSS ändern kann. Wenn das Layout mit HTML "hardgecoded" ist, geht das nicht.

Viele Grüße,
Alex

[toram]

Wusstet ihr übrigens, dass der Textabstand zum Bild NUR im IE richtig dargestellt wird? Habe mir Firefox (meinen Hauptbrowser), Opera und Safari (ja, den von Apple auf 'nem Win-Rechner) installiert... Nur der IE schafft es den Abstand um die Bilder herum einzuhalten.

Gibt's da auch ne Lösung von euch Cracks ? Hab auch auf englicsh nichts passendes gefunden.

Gruß an alle!

Toram

[cyberman]

Meine Lösung hatte ich dir oben bereits präsentiert

http://forum.cmsmadesimple.org/index.ph ... l#msg64595

Was besseres hab ich grad nicht ...

[toram]

HURRA!!!!!

DANKE!!!

Das war's jetzt!

Aber eine Frage habe ich immer noch, cyberman

Nachdem ich bei selfhtml ein wenig über css gelesen habe, fiel mir auf, dass dort u.a. mal ein Eintrag mit einem Punkt beginnt, also ".bildlinks" z.B. Das habe ich ausprobiert, nachdem mir deine Tipps und Codes leider nicht wirklich weitergeholfen haben.

Und siehe da, es geht... Aber warum? Was ist der Unterschied zwischen einem Punkt und der Raute? Warum musste ich jetzt nicht mehr "div" davorstellen???

Falls es ab jetzt nervt, dann halte ich meinen Mund

Ansonsten VIELEN DANK nochmal AN ALLE!

Gruß
Toram

[cyberman]

Was ist der Unterschied zwischen einem Punkt und der Raute?

Mit einem Punkt "kennzeichnest" du einen html tag mit einer CSS-Klasse, mit einer Raute eine ID.

Wenn du z.Bsp. folgenden Code verwendest

Code: Select all

<div id="bildlinks">bla</div>

kannst du den div Container mit dem Stylesheet

Code: Select all

div#bildlinks {}

ansprechen / steuern.

Würdest du statt dessen

Code: Select all

<div class="bildlinks">bla</div>

verwenden,  wäre das passende #Stylesheet dazu

Code: Select all

div.bildlinks {}

Warum musste ich jetzt nicht mehr "div" davorstellen???

Müssen musst du gar nichts - wenn du im Stylesheet

.bildlinks {}

verwendest, wirkt das Stylesheet auf alle tags, die mit der Klasse bildlinks gekennzeichnet werden. Das können dann eben beliebig container, Absätze oder auch jeder andere html tag sein.

Mit dem o.g. Beispielen

Code: Select all

div#bildlinks {}

Code: Select all

div.bildlinks {}

steuerst du jedoch nur die div Container mit der ID bzw. der Klasse.

Wichtig ist dabei noch, dass du eine Klasse mehrfach einsetzen kannst, also für mehrere Absätze oder div Container. Wenn du jedoch eine ID verwendest, darf es diese nur einmalig geben (logisch, sonst wäre es ja keine ID mehr).

Aber CSS heisst ja nicht umsonst Cascading Style Sheets, also kaskadierend. Diese Technik wird auch bei den mit CMSms mitgelieferten Standard-Templates verwendet. Das sieht dann zum Beispiel so aus

Code: Select all

/* section header */
div#menu_vert li.sectionheader {
   border-right: none;
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0;
   background-color: #fff;
   line-height: 1em;
   margin: 0;
   text-align:center;
} 

Das hieße dann "übersetzt", mit dem Stylesheet gestaltest du die Listeneinträge , die die Klasse sectionheader haben und die sich ihrerseits wiederum in einem div mit der ID menu_vert befinden müssen.

So, genug für heute. Ich hoffe, ich konnte es dir einigermaßen verständlich machen, ohne zu sehr in Fachjargon zu verfallen ... ansonsten einfach noch mal fragen.