Thema: Lässt sich so ein Beitrag realisieren?

Zitat von BennoG

Hallo Hans,

(nicht schlagen, wenn's nicht geht) Ich benutze keine Software aus Redmond, aber man kann IMHO Word-Dateien in HTML abspeichern / konvertieren. Keine Ahnung, wie so etwas dann in einem Browser aussieht. Einen Versuch wäre es wert.

Die Idee wäre gut, wenn Word nicht so ein schrecklichen HTML Code liefern würde... :-S
Das macht die Seite sehr langsam bezüglich der Ladezeit.

Also in Indesign ist sowas möglich, jedoch nützt das im Web nicht viel.
Ich werde morgen mal daran arbeiten, wenn ich dazu komme.

Mit Puretext deformatieren..

http://www.stevemiller.net/puretext/

Sorry..ich dachte Seite 2 wäre Seite 1.. ;o/

Wenn ich das richtig verstanden habe, soll ein! Artikel in zwei Spalten aufgeteilt werden und mittig ein Bild platziert?

Dafür denke ich, habe ich eine Lösung gefunden. Hab das mal in einer Datei angehängt, einfach in einen Ordner entpacken und die index.html starten.

Was dabei zu beachten ist: Das Bild wird direkt nach dem <p class="leftp"> und <p class="rightp"> und eingefügt. Also VOR dem Text und dasselbe Bild wird sowohl links als auch rechts eingefügt.
Die Breite des Bildes ist wichtig. Im Beispiel hat es 100 px. Das ist für margin-left, bzw. margin-right wichtig. Hier nimmt man die Hälfte der Breite= 50px. Hinzu kommt noch die margin-right px der linken Spalte, in diesem Fall 5px. (Die rechte Spalte sollte margin-left IMMER genauso breit sein wie das margin-right der linken Spalte, also auch 5px.) Macht für das Bild 50px + 5px = 55px. ->
Linke Spalte -> Bild margin-right: -55px, rechte Spalte -> Bild margin-left: -55px;

Nun muss man beim Verfassen des Artikels darauf achten, dass man in dem ersten Absatz der linken Spalte (p.first) sowie in dem ersten Absatz der rechten Spalte (p.first) dieselbe Zeilenanzahl hat (im Beispiel sind es vier Zeilen).

So, nun der Quellcode der html-Datei:

<div class="articlewrapper">

<div class="leftcolumn">
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum ipsum gravida libero eleifend sagittis! Integer viverra pulvinar libero vestibulum gravida. Duis commodo magna a dolor vulputate congue eu vel sapien? </p>
<p class="leftp"><img src="http://www.joomlaportal.de/images/test.jpg" width="100" height="100" />Etiam hendrerit accumsan egestas. Nulla erat quam, ultricies non consectetur sit amet, pharetra ac tellus. Nullam nec enim sit amet velit facilisis vehicula elementum vel felis! Sed hendrerit risus et nunc consequat iaculis. Duis in scelerisque dui! Suspendisse enim ante, porttitor et scelerisque eget, lacinia nec velit. Vestibulum adipiscing augue nec lectus ultrices consectetur. Pellentesque eget libero nibh. Vivamus scelerisque blandit dolor, non viverra felis mattis ac. Aenean sodales mauris et est laoreet scelerisque? Donec faucibus ullamcorper ligula nec congue? Cras ultricies nisi nec ligula commodo pulvinar? Ut scelerisque consectetur felis a imperdiet. Quisque convallis eros euismod erat faucibus auctor.</p>
</div>

<div class="rightcolumn">
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum ipsum gravida libero eleifend sagittis! Integer viverra pulvinar libero vestibulum gravida. Duis commodo magna a dolor vulputate congue eu vel sapien?</p>
<p class="rightp"><img src="http://www.joomlaportal.de/images/test.jpg" width="100" height="100" /> Etiam hendrerit accumsan egestas. Nulla erat quam, ultricies non consectetur sit amet, pharetra ac tellus. Nullam nec enim sit amet velit facilisis vehicula elementum vel felis! Sed hendrerit risus et nunc consequat iaculis. Duis in scelerisque dui! Suspendisse enim ante, porttitor et scelerisque eget, lacinia nec velit. Vestibulum adipiscing augue nec lectus ultrices consectetur. Pellentesque eget libero nibh. Vivamus scelerisque blandit dolor, non viverra felis mattis ac. Aenean sodales mauris et est laoreet scelerisque? Donec faucibus ullamcorper ligula nec congue? Cras ultricies nisi nec ligula commodo pulvinar? Ut scelerisque consectetur felis a imperdiet. Quisque convallis eros euismod erat faucibus auctor.</p>
</div>
</div>

Und hier die CSS dazu:

div.articlewrapper {
width: 96%;
margin:0 2%;
position:relative;
overflow:hidden;
}
div.leftcolumn {
float:left;
width:48%;
margin: 0 5px 0 auto;
}
div.rightcolumn {
float:left;
width:48%;
margin: 0 auto 0 5px;
}
p.leftp img {
float:right;
margin:10px -55px 10px 10px;
overflow:visible;
position:relative;
padding:0;
}
p.rightp img {
float:left;
margin:10px 10px 10px -55px;
overflow:visible;
position:relative;
padding:0;
}
p.first, p.leftp, p.rightp {
margin:0;
padding:0;
}

und das sieht dann so aus:


.

Halloechen,

CSS3 bietet da was, aber bis das von allen Browsern verstanden wird und auch wirklich funktioniert, koennte Dir dies hier vielleicht weiterhelfen:
http://www.csscripting.com/css-multi.../example2.php?
Dort wird Dein Text durch ein JAVASCRIPT geparst, sodass auch die Schriftartgroessen beim Benutzer greifbar werden.

Bye...

Hi,

ich hab das grad mal selbst ausprobiert und die Textlaengen variiert. Ausserdem habe ich ein groesseres Bild eingefuegt. Das mit dem geblockten Bild funktioniert dann nicht mehr, sobald man die Fenstergroesse des Browsers nicht mehr maximiert hat (zumindest im Chrome) und hier eine unguenstige Spaltenbreite erwischt. Speziell ist hier ein Zeilenumbruch in einer der beiden oberen Container problematisch, wenn er nicht zufaelligerweise auf beiden Seiten gleichzeitig passiert.
Dabei ist mir aber aufgefallen, dass es vielleicht grundsaetzlich recht schlau waere, eines der beiden Bilder transparent zu laden - also ein 1x1px grosses Bild, welches auf der linken Seite anstelle des Originals geladen wird. Aber so perfekt isses noch nicht, denn der Text fliesst dann u.U. hinter das Bild - entweder oben oder unten.

Bye...

Hi,

ja, die p.first (der erste Absatz) ist der Hasenfuß. Man muss hier ca. dieselbe Menge Text stehen haben.

Ansonsten funktioniert das Vergrößern und Verkleinern des Browserfensters aber optimal auch im Chrome, da es fluid gestaltet ist. Auch größere Bilder sind kein Problem, man muss halt die margin anpassen.

Mit CSS3 wird einiges mehr realisierbar sein, jedoch spielen - wenn überhaupt - nur neuere Browser mit. (Leider wird CSS3 noch mehr Arbeit für Web Designer bedeuten, man sieht ja heutzutage schon, wie lange IE 6 noch im Rennen ist und der Web Designer muss künftig noch mehr Cross Browser fixes einbauen . CSS3 ist wirklich super - doch konsequent wäre es, wenn dann alle älteren Browser verschwinden würden *G*.)

Meine Lösung ist nicht perfekt und funktioniert nur mit derselben Menge Text im ersten Absatz der linken und rechten Spalte. Vielleicht fällt jemandem ja noch eine Lösung dafür ein. Höhenvergabe für die Absätze birgt wieder andere Nachteile.

Mit Javascript sollte es ein Möglichkeit geben, das Bild mittig zu setzen, doch hierfür reichen meine Kenntnisse nicht aus.

Keine Sorge HansZ, du hast lediglichen meinen Ehrgeiz geweckt. Mich hat die Lösung selbst interessiert und da ich der Meinung bin, dass mit CSS fast alles lösbar ist (CSS Magic eben), war es ein netter Denkansstoß.

Ich habe nun die Probleme gefixt. Dank dem Input von BitH mit der 1px Grafik, habe ich mich statt des zweiten Bildes für einen span Container entschieden. Außerdem hab ich den elastischen Effekt von Tabellenzellen nachgeahmt, in dem ich die Absätze ein wenig umstellte, und in zusätzliche Container packte. Ein clear an der richtigen Stelle, hat dann sein Übriges getan.

Hier der Code:

<div class="articlewrapper">
<div class="topdiv">
<p class="first">Ich bin der erste Absatz. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum ipsum gravida libero eleifend sagittis! Integer viverra pulvinar libero vestibulum gravida. Duis commodo magna a dolor vulputate congue eu vel sapien? </p>
<p class="first">ich bin der dritte Absatz!!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum ipsum gravida libero eleifend sagittis! Integer viverra pulvinar libero vestibulum gravida. Duis commodo magna a dolor vulputate congue eu vel sapien? Duis commodo magna a dolor vulputate congue eu vel sapien? Duis commodo magna a dolor vulputate congue eu vel sapien? </p>
</div>
<div class="bottomdiv">
<div class="leftcolumn">

<p class="leftp"><img src="http://www.joomlaportal.de/images/test.jpg" width="100" height="100" /> Ich bin der zweite Absatz. Etiam hendrerit accumsan egestas. Nulla erat quam, ultricies non consectetur sit amet, pharetra ac tellus. Nullam nec enim sit amet velit facilisis vehicula elementum vel felis! Sed hendrerit risus et nunc consequat iaculis. Duis in scelerisque dui! Suspendisse enim ante, porttitor et scelerisque eget, lacinia nec velit. Vestibulum adipiscing augue nec lectus ultrices consectetur. Pellentesque eget libero nibh. Vivamus scelerisque blandit dolor, non viverra felis mattis ac. Aenean sodales mauris et est laoreet scelerisque? Donec faucibus ullamcorper ligula nec congue? Cras ultricies nisi nec ligula commodo pulvinar? Ut scelerisque consectetur felis a imperdiet. Quisque convallis eros euismod erat faucibus auctor.</p>
</div>

<div class="rightcolumn">
<p class="rightp"><span class="spacer">&nbsp;</span> Ich bin der vierte Absatz. Etiam hendrerit accumsan egestas. Nulla erat quam, ultricies non consectetur sit amet, pharetra ac tellus. Nullam nec enim sit amet velit facilisis vehicula elementum vel felis! Sed hendrerit risus et nunc consequat iaculis. Duis in scelerisque dui! Suspendisse enim ante, porttitor et scelerisque eget, lacinia nec velit. Vestibulum adipiscing augue nec lectus ultrices consectetur. Pellentesque eget libero nibh. Vivamus scelerisque blandit dolor, non viverra felis mattis ac. Aenean sodales mauris et est laoreet scelerisque? Donec faucibus ullamcorper ligula nec congue? Cras ultricies nisi nec ligula commodo pulvinar? Ut scelerisque consectetur felis a imperdiet. Quisque convallis eros euismod erat faucibus auctor. </p>
</div>
</div>
</div>

CSS Code:

div.articlewrapper {
width: 96%;
margin:0 2%;
position:relative;
overflow:hidden;
}
div.leftcolumn {
float:left;
width:48%;
margin: 0 5px 0 auto;
}
div.rightcolumn {
float:left;
width:48%;
margin: 0 auto 0 5px;
}
p.leftp img {
float:right;
margin:10px -55px 10px 10px;
overflow:visible;
position:relative;
padding:0;
}
span.spacer {
float:left;
margin:10px 10px 10px -55px;
overflow:hidden;
padding:0;
position:relative;
display:block;
width:100px;
height:100px;
}
p.first {
width:48%;
margin: 0 5px 0 auto;
padding:0;
float:left;
}
p.leftp, p.rightp {
margin-top:0;
padding:0;
}
div.topdiv {
position:relative;
height:auto;
overflow:hidden;
}
div.bottomdiv {
position:relative;
height:auto;
overflow:hidden;
clear:both;
}

HansZ, du kannst ja erst den Text in Word schreiben, sodass du ungefähr weißt, wo du den Text in die zweite "p.first" schreiben musst.



Zum Testen -> Anhang:

Hm, ich hab das jetzt mal ausprobiert, bin aber teiwleise unerfahren:
Man muss doch deinen css-Code zusätzlich in meine .css Datei einfügen (ist es bei mehreren egal in welche) und dann einfach den normalen Code in einem Beitrag einfügen doer?

Weil so funktioneirt es leider nicht.
/edit: Die angehängte Datei von dir hingegen funktioniert.