Wie kann ich den Textfluss um Bilder herum einstellen?
Wie kann ich den Textfluss um Bilder herum einstellen?
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.
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.
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
Ist ja auch ein Forum für CMSms. Deine Frage ist eher ein Problem der CSS .toram wrote: Nachdem ich nun einige Zeit (bestimmt ein paar Stunden) hier im Forum auf Deutsch und Englisch gesucht habe und nichts fand
Die Frage ist, wo der Text lang fliessen soll.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.
Etwas in der Art müsste in den Source
Code: Select all
<div id='Bild1'><img ... /></div>
Code: Select all
div#Bild1
{
float: left;
margin: 1em;
}
Last edited by cyberman on Wed Jun 27, 2007 1:00 pm, edited 1 time in total.
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
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.
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.
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
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:
Simples HTML, siehe auch dort -> http://de.selfhtml.org/navigation/html.htm#grafiken
Code: Select all
<img vspace="10" hspace="10" align="left" src="/uploads/images/deinbild.jpg" alt="deinbild" />
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
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
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
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
CSS macht mich eben tierisch an ...Drake wrote: Warum denn so kompliziert cyberman ?
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
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.
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
Weil man mit der CSS-Lösung bei einem ReDesign schneller zum Ziel kommt?Drake wrote: 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.
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;}
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
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
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
Gibt's da auch ne Lösung von euch Cracks ? Hab auch auf englicsh nichts passendes gefunden.
Gruß an alle!
Toram
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
Meine Lösung hatte ich dir oben bereits präsentiert
http://forum.cmsmadesimple.org/index.ph ... l#msg64595
Was besseres hab ich grad nicht ...
http://forum.cmsmadesimple.org/index.ph ... l#msg64595
Was besseres hab ich grad nicht ...
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
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
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
Re: Wie kann ich den Textfluss um Bilder herum einstellen?
Mit einem Punkt "kennzeichnest" du einen html tag mit einer CSS-Klasse, mit einer Raute eine ID.toram wrote: Was ist der Unterschied zwischen einem Punkt und der Raute?
Wenn du z.Bsp. folgenden Code verwendest
Code: Select all
<div id="bildlinks">bla</div>
Code: Select all
div#bildlinks {}
Würdest du statt dessen
Code: Select all
<div class="bildlinks">bla</div>
Code: Select all
div.bildlinks {}
Müssen musst du gar nichts - wenn du im StylesheetWarum musste ich jetzt nicht mehr "div" davorstellen???
.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 {}
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;
}
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.