Absatz um Bild fließen lassen

[Bennosch]

Hallo,

ich möchte, wie in der angehängten Skizze dargestellt, eine Überschrift und einen Absatz im Blocksatz um ein Bild fließen lassen. Dazu dient der folgende HTML-Code (beziehungsweise soll dienen...):

<div style="width: 680px;">
 <img src="Bild.jpg" border=0 style="float: right;">
 <h1>Überschrift</h1>
 <p style="width: 535px; text-align: justify;">
   Fließtext.
 </p>
</div>

Der Clou an der Sache ist, dass das Bild halb im und halb (rechts) außerhalb des Absatzes sein soll. Im Firefox und Safari funktioniert der o.g. HTML-Code wunderbar, der Internet Explorer macht jedoch Probleme und beginnt den Absatz erst unterhalb des Bildes.

Meiner Meinung sollte es auch im Internet Explorer so funktionieren... oder übersehe ich irgendetwas?

Grüße
Ben

 

[threadi]

Gib für das Bild auch eine Höhe und Breite per CSS an.

 

[Bennosch]

Danke für die schnelle Antwort. Der Code oben ist etwas vereinfacht, die Breite & Höhe des Bildes ist im Original angegeben.

 

[threadi]

Dann verzichte bei dem <p> noch auf die Breite. Ist beim floaten für das umfließende nicht notwendig.

 

[neuroleptika]

Der IE bricht das floaten nach h1 ab, wie man das verhindert weiß ich nicht.
Eine Ansatz mit position:absolut; :
html

<div id="absatz">
 <h1>Überschrift</h1>
 <p>
    <span><img src="bild.jpg" alt="testbild" width="200" height="150"></span>
   dolor sit amet, consectetuer adipiscing elit. Ut tempus leo id odio. Donec aliquam laoreet enim. Aliquam euismod massa non orci accumsan aliquet. Donec vulputate ornare enim. Nam tempus euismod ipsum. Aliquam posuere. Sed hendrerit nisi at nibh. Phasellus rhoncus sodales erat. Aenean rhoncus libero vitae massa. Etiam elementum suscipit diam. Aliquam nisl magna, cursus eget, interdum in, commodo et, eros. Aliquam ut enim a nunc blandit consectetuer. Suspendisse suscipit porta nibh. Donec sed ante a justo tincidunt congue..
 </p>
</div>

css

* {
margin: 0px;
padding: 0px;
}
#absatz {
width: 680px;
border: 1px solid black;
position: relative;  /*das img wird von hier ausgerichtet*/
margin-top: 100px;
}
#absatz h1 {
border: 1px solid black;
height: 50px;
}
p {
width: 535px;
text-align: justify;
border: 1px solid black;
}
#absatz span {
float: right;
display: block;
height: 100px;
width: 100px;
background-color: #6AA3AE;
}
#absatz span img { /* img nach #absatz ausrichten*/
position: absolute;
top: 0px;
}

Das dumme an der Sache ist, daß man so eine feste Höhe in px für h1 braucht.

 

[threadi]

Der IE bricht das floaten nach h1 ab, wie man das verhindert weiß ich nicht.

Versuchs mal mit

h1 { display: inline; }

Absolutes Positionieren wäre an der Stelle keine gute Wahl.

 

[neuroleptika]

Versuchs mal mit

h1 { display: inline; }

Gute Idee.
Da war ich wohl etwas dusselig.


Trotzdem bin ich mir nicht sicher ob das funktioniert.
Das nächste Element ist <p> und dem wirst du wohl kein display: inline geben wollen.

Bin gespannt was dabei rauskommt.
Selber mag ich heute nicht mehr probieren.

 

[koslowski]

Hi,

*räusper*.., ähem...., ich versteh ehrlichgesagt nicht warum ihr solche Klimmzüge macht, um den Text neben das Bild zu bekommen.

Normal funktioniert das doch problemlos mit float.

Anhand des Codeschnipsels kann ich nur sagen, das width und text-align:justify für p kokolores sind.
Ersteres ist unnötig und zweiteres führt i.d.R. zu einer unschönen Darstellung des Textes (wer weiss wie der IE text-align:justify interpretiert??).

Vielleicht hat irgendetwas kein Layout für den IE, vielleicht ist es etwas mit dem double-float-margin bug, vielleicht.........

Anhand des Codeschnipsels kann man letztlich nur die Kristallkugel bemühen.

Vielleicht wäre es eine gute Idee wenn Bennosch mal den kompletten Code und die CSS dazu hier einstellt (hehe, schon wieder vielleicht :mrgreen:),
dann wäre das Problem sicher rappzapp gelöst.

koslowski

 

[Bennosch]

Hallo,

Die Aussage von neuroleptika ("Der IE bricht das floaten nach h1 ab, wie man das verhindert weiß ich nicht.") war schon ganz richtig. display: inline hat in diesem Fall keine Abhilfe gebracht. Ohne Zusätze funktioniert mit position: absolute die Positionierung des Bildes zwar wunderbar, jedoch verläuft der Text dann unter dem Bild lang und bricht nich am Bildrand um.

Der HTML-Code von neuroleptika ist deshalb ansich wunderbar. Letztendlich hab ich das Problem allerdings auf Anraten eines Freundes ungefähr auf diese Weise gelöst. Das bringt in meinem Fall gleich den Vorteil, dass ich einen richtigen Fließtext entlang eines anderen Bildes habe - kompatibel zu allen gängigen Browsern.

Dennoch schönen Dank für die Hilfe und Grüße
Ben

 

[neuroleptika]

.....

Normal funktioniert das doch problemlos mit float.

Anhand des Codeschnipsels kann ich nur sagen, das width und text-align:justify für p kokolores sind.
Ersteres ist unnötig und zweiteres führt i.d.R. zu einer unschönen Darstellung des Textes (wer weiss wie der IE text-align:justify interpretiert??).
......
dann wäre das Problem sicher rappzapp gelöst.

Ich glaube du dir das angehängte jpg nicht angesehen.
Der float wird nach h1 vom IE abgebrochen. (Ich habe es mir im IE6 angesehen.)
Das Bild soll aber auf der gleichen Höhe wie h1 stehen und dann von p umflossen werden.
Hinzu kommt noch, daß das Bild rechts etwas aus p hinausragen soll.
Darum das position-gefriemel.

 

[koslowski]

Hi,

Ich glaube du dir das angehängte jpg nicht angesehen.
Der float wird nach h1 vom IE abgebrochen. (Ich habe es mir im IE6 angesehen.)
Das Bild soll aber auf der gleichen Höhe wie h1 stehen und dann von p umflossen werden.
Hinzu kommt noch, daß das Bild rechts etwas aus p hinausragen soll.
Darum das position-gefriemel.

ja du hast recht, das Bild habe ich mir nicht angeschaut.

Trotzdem wäre das sicher einfacher gegangen:
Warum der float nach h1 abgebrochen hat weiss ich auch nicht, aber normal ist das nicht.
Ich hatte in ähnlichen Konstellationen so etwas noch nie erlebt (deshalb wollte ich auch den kompletten Code sehen).
Versuchsweise hätte ich wohl erst mal eine feste Breite für h1 getestet.

Das das Bild rechts aus p herausragen soll geht eigentlich recht einfach:

das Bild bekommt neben float noch ein margin zum Text.
Für den Text definiert man dann ein größeres padding-right.

Dann ragt das Bild nach rechts aus p heraus.

Der Grund ist, das durch den float das Bild aus dem Fluß genommen wird, aber nicht so komplett wie bei position:absolute,
d.h. der Textblock reagiert auf das margin vom Bild. geht aber trotzdem unter dem Bild her bis zum rechten Rand.

Durch ein entsprechendes padding für den Textblock kann man das Bild deshalb beliebig nach rechts aus dem Textblock herausragen lassen, ohne das sich der Abstand zum Bild dadurch ändert..

Schau dirs mal mit Firebug an, da kann man es sehr schön nachvollziehen.

koslowski

 

[neuroleptika]

....
Trotzdem wäre das sicher einfacher gegangen:
Warum der float nach h1 abgebrochen hat weiss ich auch nicht, aber normal ist das nicht.
.....
Versuchsweise hätte ich wohl erst mal eine feste Breite für h1 getestet.

Da hab ich nach dem Vorschlag mit display:inline für h1 auch kurz dran gedacht. Als ich gelesen habe, das display:inline nichts bewirkt kann ich mir das jetzt nicht mehr vorstellen.

Das das Bild rechts aus p herausragen soll geht eigentlich recht einfach:
das Bild bekommt neben float noch ein margin zum Text.
Für den Text definiert man dann ein größeres padding-right.

Ja,
Aber das Bild sollte ja auch nach oben aus p heraus ragen (wegen diesem komischen IE-bug mit dem h1).

Schau dirs mal mit Firebug an, da kann man es sehr schön nachvollziehen.

Ich sollte vielleicht wirklich mal Firebug ausprobieren. Ich markiere die Boxen bis jetzt meist mit dem firefox-web-developer oder/und nutze meine selbstgemachten Lineale.jpg als Hintergrundgrafiken.
Letzteres klinkt komisch, darf auch jeder drüber lachen wenn er will.
Aber es ist für mich eine browserunabhängige Veranschaulichung. Außerdem kann ich so sehen, wie groß ich die Hintergrundgrafiken (auch bei Schriftvergrößerung) mindestens machen muss.

 

[Efchen]

Moin zusammen,

ich hab das jetzt auch mal ausprobiert und komme zu den Schluss, dass der Internet Exploder hier einen Bug hat, wäre ja nicht der erste.

Sobald ein Element eine feste Breite bekommt, die zu breit ist, um sie neben dem Bild darzustellen, schiebt der IE das Element unter das Bild.

Aber es gibt eine einfache Lösung, wie man - wenn man auf die Breite nicht verzichten will - das trotzdem hinbekommt:
Statt einer Breite gibt man ein margin-right an, also statt z.B. "width:80%;" gibt man "margin-right:20%;" an. Schon klappts auch im IE.

Pixelgenaue Layouts sind im WWW ohnehin tendenziell eher ungeeignet, weil sie bei der Schriftgrößenänderung platzen. Daher ist es eigentlich auch nicht so schlimm, dass das mit festen Größen in Pixeln oftmals nicht funktioniert, dann nämlich nicht, wenn der Abstand in Pixeln nach rechts nicht bekannt ist, weil hier die Fensterinnengröße gebraucht werden würde. Und die in JavaScript abzufragen ist keine Lösung.

Problem gelöst?

Gruß,
-Efchen

 

[koslowski]

Moin,

Moin zusammen,

ich hab das jetzt auch mal ausprobiert und komme zu den Schluss, dass der Internet Exploder hier einen Bug hat, wäre ja nicht der erste.

Sobald ein Element eine feste Breite bekommt, die zu breit ist, um sie neben dem Bild darzustellen, schiebt der IE das Element unter das Bild.

Aber es gibt eine einfache Lösung, wie man - wenn man auf die Breite nicht verzichten will - das trotzdem hinbekommt:
Statt einer Breite gibt man ein margin-right an, also statt z.B. "width:80%;" gibt man "margin-right:20%;" an. Schon klappts auch im IE.

Gruß,
-Efchen

mit dieser Art Layoutkonstellation, die einem ja recht häufig über den Weg läuft gibt es eigentlich auch im IE normal kein Problem.
Persönlich hatte ich noch nie ein Problem damit. Feste Breite für h1 hab ich da auch noch nie angeben müssen.
Übrigens h1 ohne Breitenangabe erstreckt sich auf jeden Fall auch unter dem Bild.
Begründung: siehe mein voriges Posting.
h1 ist nun mal ein Blockelement und das wird so breit wie es Platz hat.


Der Fragesteller hat uns ja nicht den ganzen Code gegeben. Ich bin überzeugt da sind irgendwo noch ein oder mehrere Böcke drin.

Zitat von Efchen:
Pixelgenaue Layouts sind im WWW ohnehin tendenziell eher ungeeignet, weil sie bei der Schriftgrößenänderung platzen. Daher ist es eigentlich auch nicht so schlimm, dass das mit festen Größen in Pixeln oftmals nicht funktioniert, dann nämlich nicht, wenn der Abstand in Pixeln nach rechts nicht bekannt ist, weil hier die Fensterinnengröße gebraucht werden würde. Und die in JavaScript abzufragen ist keine Lösung.
Problem gelöst?

Elastische Layouts sind zwar beliebig skalierbar werfen aber manchmal Probleme beim layouten auf.
Eine gesunde Mischung aus px und em ist imho völlig okay und manchmal einfach nicht vermeidbar.
Pixel ist übrigens eine relative und keine absolute Größe.

Die Ausführungen zu Pixel in Selfhtml finde ich da mißverständlich und auch teilweise falsch.;-)

koslowski

 

[Efchen]

Persönlich hatte ich noch nie ein Problem damit. Feste Breite für h1 hab ich da auch noch nie angeben müssen. Übrigens h1 ohne Breitenangabe erstreckt sich auf jeden Fall auch unter dem Bild.

Ja, da hast Du recht. Aber der Fragesteller hatte im folgenden Textabsatz eine feste Breite. Ich hab ihm ja davon abgeraten, diese zu verwenden, jedoch, weil wir nicht den gesamten Code sehen, wäre es möglich, dass es aus irgendwelchen designerischen Gründen notwendig ist, dass der Textabsatz früher aufhört, als am rechten Rand. Dann will man natürlich eine feste Breite setzen, was ja im Firefox auch ordentlich funktioniert.

Der Fragesteller hat uns ja nicht den ganzen Code gegeben. Ich bin überzeugt da sind irgendwo noch ein oder mehrere Böcke drin.

Da gehe ich davon aus :-) So wenig, wie hier einen Link zu ihren Seiten geben, scheinen sich die meisten für ihre Arbeit zu schämen :-D
Aber für das Problem hier ist mehr Code nicht nötig. Mit dem Code allein kann man das nachvollziehen, nur das hab ich gemacht. Und das Problem liegt beim IE tatsächlich an der festen Breite.

Elastische Layouts sind zwar beliebig skalierbar werfen aber manchmal Probleme beim layouten auf.

Fixe Layouts werfen oft Probleme bei der Benutzung auf. Es ist manchmal gehopst wie gesprungen. Man muss sich nur im Klaren sein, dass das WWW anders funktioniert, als ein Blatt Papier und dass sich klassisches Design auf dem Papier nicht so ohne weiteres auf das WWW übertragen lässt. Layouts müssen hier weitaus flexibler sein.

Eine gesunde Mischung aus px und em ist imho völlig okay und manchmal einfach nicht vermeidbar.

Sehe ich genauso. Aber em überwiegt bei mir in der Regel.

Pixel ist übrigens eine relative und keine absolute Größe.

Relativ aber nur zur Bildschirmauflösung und den Monitoreigenschaften, nicht zu irgendetwas, was im WWW sonst wichtig ist, wie Betriebssystem, Fonts, Fenstergröße, Client, persönliche Einstellungen, Behinderungen, etc.

Gruß,
-Efchen

 

[koslowski]

Moin Efchen,

Fixe Layouts werfen oft Probleme bei der Benutzung auf. Es ist manchmal gehopst wie gesprungen. Man muss sich nur im Klaren sein, dass das WWW anders funktioniert, als ein Blatt Papier und dass sich klassisches Design auf dem Papier nicht so ohne weiteres auf das WWW übertragen lässt. Layouts müssen hier weitaus flexibler sein.

Sehe ich genauso. Aber em überwiegt bei mir in der Regel.


Gruß,
-Efchen

völlig richtig.:-)

Am liebsten sind mir auch elastische Layouts.
Es ist einfach schön zu sehen, wie das Layout intakt bleibt egal wie man skaliert.
Leider ist das dem Kunden ziemlich wurscht.

Deshalb sehe ich zu, das das PX-Layout bei einer Schriftvergrößerung von zwei Stufen (im Ie sehr groß!) noch les,- und benutzbar ist.

Grundanforderung an mich selber:
Beim Qualidator ist für meine Layouts Bedingung an mich selber:
Accessibilty:100%
Usability: über 90%

Nebenbei will ich Menschen mit Farb-Sehschwäche auch so wenig Steine wie möglich in den Weg legen, d.h. der "Color Contrast Analyzer" gehört auch zu meinen Standardtools.

Relativ aber nur zur Bildschirmauflösung und den Monitoreigenschaften, nicht zu irgendetwas, was im WWW sonst wichtig ist, wie Betriebssystem, Fonts, Fenstergröße, Client, persönliche Einstellungen, Behinderungen, etc.
Gruß,
-Efchen

genau das ist der Punkt, relativ zur Bildschirmauflösung und das ist ja das Entscheidende.
Bei jedem kann es dank unterschiedlicher Bildschirmauflösung anders aussehen, deshalb relativ.
Na ja, vielleicht bin ich da auch zu pedantisch.
Wahrscheinlich meinen wir letztlich das Gleiche, drücken es bloß unterschiedlich aus.

koslowski

 

[Efchen]

Am liebsten sind mir auch elastische Layouts.
Leider ist das dem Kunden ziemlich wurscht.

Ich bin zum Glück in der Situation, damit nicht meinen Lebensunterhalt verdienen zu müssen und meine Kunden sind verwandt oder befreundet. Und denen würde ich einen Marsch blasen ;-)

Aber ich bin trotzdem der Meinung, dass man auch seinen Kunden nicht immer alles durchgehen lassen darf, immerhin gibt es gute Argumente. Man braucht ja nur mal den sehschwachen Opa zu einer Vorführung mitzunehmen, der beim Test der Website als erstes mal die Schrift um 300% vergrößert. Dann glotzt der Kunde, der auf pixelgenauem Layout bestanden hat, aber ziemlich doof! :-D

Deshalb sehe ich zu, das das PX-Layout bei einer Schriftvergrößerung von zwei Stufen (im Ie sehr groß!) noch les,- und benutzbar ist.

Selbst die rein "elastischen" Layouts platzen irgendwann und sind nicht mehr ansehnlich. Aber sie halten einfach deutlich länger.

Qualidator

http://www.qualidator.com/wqm/

Hey, den kannte ich noch gar nicht!
Aber warum ist die Zahl bei "Bewertung" eine andere als die auf dem Button?

Naja, meine Werte sag ich jetzt nicht ;-) Auch wenn ich "überdurchscnittlich" sei, bin ich mir noch nicht gut genug :-)

Bei jedem kann es dank unterschiedlicher Bildschirmauflösung anders aussehen, deshalb relativ.
Na ja, vielleicht bin ich da auch zu pedantisch.

Jein :-)

Ich bin genau so. Aber es gibt immer einen Punkt, an dem es aufhört, Sinn zu machen.
Was die Pixel angeht, ich bin aber auch nicht darauf aus, dass es bei jedem "gleich" aussieht. Das habe ich mir schon vor langer Zeit abgeschminkt, das ist quasi unmöglich, auch wenn das die Anfänger immer verlangen. Es muss nur ansprechend aussehen. Würde ich z.B. -moz-border-radius verwenden, wäre mir das egal, dass der IE das nicht kann. Das bricht den IE-Nutzern keinen ab.

-Efchen

 

[koslowski]

Hi Efchen,

Aber ich bin trotzdem der Meinung, dass man auch seinen Kunden nicht immer alles durchgehen lassen darf, immerhin gibt es gute Argumente. Man braucht ja nur mal den sehschwachen Opa zu einer Vorführung mitzunehmen, der beim Test der Website als erstes mal die Schrift um 300% vergrößert. Dann glotzt der Kunde, der auf pixelgenauem Layout bestanden hat, aber ziemlich doof! :-D

tu ich auch nicht.
Ich sag dem Kunden davon auch kaum was, weil nichts ist schlimmer als technische Begriffe beim Kundengespräch, die versteht er i.d.R. nicht.

Sogar der Begriff "Browser" wird oft nicht verstanden:
"Browser?? Das Programm kenn ich nicht. Ich nehm immer den Internet Explorer zum Internetgucken!"

Sowas machbar wird es barrierefrei gemacht.

Hey, den kannte ich noch gar nicht!
Aber warum ist die Zahl bei "Bewertung" eine andere als die auf dem Button?
Naja, meine Werte sag ich jetzt nicht ;-) Auch wenn ich "überdurchscnittlich" sei, bin ich mir noch nicht gut genug :-)
-Efchen

Das wüßte ich auch gerne.

Ich wollte eigentlich unter die Top 10 kommen, leider steh ich zweimal nur unter den Top 20.
Um weiter nach oben zu kommen bräuchte ich bei "Suchmaschinenoptimierung" einen besseren Wert, was aber nicht so klappt, weil die Bewertung stark von der Anzahl der Links abhängt die auf meine Seiten zeigen.

Wenn man SEO-freundlich gecodet und soweit alles beachtet hat, aber die Webseite noch nicht bekannt ist landet man da immer bei 60%-70%.

Falls es dich interessiert:
Qualidator Single Page

Find ich sehr nützlich, weil er den Quellcode und die Fehler darin markiert mitanzeigt.
Da jage ich i.d.R. alle meine Seiten mit Unterseiten durch, sehr effektiv.

koslowski

 

[Efchen]

Falls es dich interessiert:
Qualidator Single Page

Ja, sehr gut! Danke.
Schade allerdings, dass ein Link der Form "mail.php?webmaster" als "komplex" angekreidet wird. Ich kann doch für Seiten, denen ich mal was übergeben will, nicht immer ein Formular mit method post als Link voranstellen oder für jede der möglichen Parameter mod_rewrite nutzen?