nicht angemeldet
Image-Positions-Problem
Gunnar BittersmannHi zusammen,
leider habe ich noch immer ein Problem mit CSS - diesmal ist es nicht der IE sondern der Firefox :(
Das Bild richtet sich einfach nicht am Text aus (gedacht ist das Bild ist im ersten Absatz links ausgerichtet und jeglicher anderer Text, auch Absätze, werden als Fliesstext drumherum ausgerichtet.)
Tipps?
Vielen Dank!
Grüße
Alex
-
Hi,
Wozu das:
<p><img src="pictures/fs_flag.jpg" class="left" /> Was bedeutet Freundschaft für Sie?</p>
<p>Was zeichnet eine Freundschaft aus?</p>und nicht:
<img src="..." style="float:left" />
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>Gruesse, Joachim
--
Am Ende wird alles gut.-
und nicht:
<img src="..." style="float:left" />
<p>Absatz</p>Hi Joachim,
leider funktioniert das auch nicht :(
-
Hi,
leider funktioniert das auch nicht :(
Kein Wunder, denn Deine Struktur ist verkorks wie ich grade sehe. Links sind zwei divs, die jeweils gefloatet sind, aber den float auch wieder aufheben. Wie soll sich content daneben legen?
Du solltest den linken Bereich _gemeinsam_ in in gefloatetes Div stecken, so dass der ebenfall links gefloatete content sich wirklich rechts daneben legen kann. Ich konnte das jedenfall mit wenigen Umstellungen erreichen:
<div id="menutree" style="border: 1px solid red;">
<ul>
<li>
<a href="#">The Friendship</a>
<ul>
<li><a href="#">The Friendship</a></li>
</ul>
</li><li>
<a href="#">News</a>
</li><li>
<a href="#">Services</a>
</li></ul>
<div id="sitebar">
<p>
<img src="The%20Friendship-Dateien/btn_friendshipweb.jpg">
<br><br>
<a href="#"><img src="The%20Friendship-Dateien/btn_germanyone.jpg"></a>
<a href="#"><img src="The%20Friendship-Dateien/btn_germanytoo.jpg"></a>
<a href="#"><img src="The%20Friendship-Dateien/btn_russiaone.jpg"></a>
</p>
</div></div>
<div id="content">
<p class="nav_indicator">» <a href="http://www.the-friendship.de/">The Friendship Web</a> / <a href="http://nogga.net/test/index.html">The Friendship</a></p><h2>The Friendship - die Freundschaft!</h2>
<img src="The%20Friendship-Dateien/fs_flag.jpg" style="float:left;"> <p>Was bedeutet Freundschaft für Sie?</p>
<p>Was zeichnet eine Freundschaft aus?</p>Ich habe allerdings am Mac keinen IE.
Anmerkung: Dieser Quelltext ist auf die Schnelle rauskopiert, voller anderer Fehler (wie fehlende alt-Texte) und die Pfade stimmen wegen der Abspeicherung nicht. Er dient ausschliesslich der Veranschaulichung und bedarf einer gruendlichen Ueberarbeitung.
ich sage das vorsichtshalber, damit ich nicht von Gunnar wieder eins auf die Rübe bekomme.Gruesse, Joachim
--
Am Ende wird alles gut.-
Hello out there!
Du solltest den linken Bereich _gemeinsam_ in in gefloatetes Div stecken
Sag ich doch. ;-)
ich sage das vorsichtshalber, damit ich nicht von Gunnar wieder eins auf die Rübe bekomme.
*G*
Dafür bekommt Nogga noch eins mit für seine Falschaussage:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">Der Dokumentinhalt ist nicht in Englisch (außer der Phrase "The Friendship").
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
Du solltest den linken Bereich _gemeinsam_ in in gefloatetes Div stecken, so dass der ebenfall links gefloatete content sich wirklich rechts daneben legen kann. Ich konnte das jedenfall mit wenigen Umstellungen erreichen:
Hi,
das macht natürlich Sinn! Ich bitte um Nachsicht - das ist mein erstes nicht-Table-Design, also nur mit CSS(-divs).
Aber ich hab mich an deinen Tipp gehalten und einen linken "Container-Div" mit float erzeugt und dort dann die zwei weiteren Blöcke eingefügt.
Funktioniert 1a!
Vielen Dank nochmals - auch an die anderen (Joachim und Gunnar) für die Tipps :)
Grüße
Alex
-
-
-
Hello out there!
und nicht:
<img src="..." style="float:left" />
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>Weil das doppelter Unsinn ist (das fehlende alt-Attribut nicht mitgezählt):
(1) Ein großer Vorteil von CSS ist die Trennung von Dokumentstruktur und Layoutangaben. style-Attribute führen dies ad absurdum, deren Verwendung ist also absurd.
(2) img-Elemente dürfen in den Strict-Varianten nicht an beliebiger Stelle auftreten:
<body> <img src="foo" alt="bar" /> <p>baz</p> </body>ist kein valides XHTML 1.0 Strict.
<body> <div> <img src="foo" alt="bar" /> <p>baz</p> </div> </body>ist valid, aber es ist IMHO kein guter Stil, sich auf die gegenwärtige Gruppierung mit div zu verlassen.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hi,»» Hello out there!
und nicht:
<img src="..." style="float:left" />
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>Weil das doppelter Unsinn ist (das fehlende alt-Attribut nicht mitgezählt):
ich glaube Du schiesst hier etwas übers Ziel hinaus. Hier sollte lediglich gezeigt werden, dass die Verschachtelung des Images ins p unnötig ist. Der Inline-Style diente ebenso der Verdeutlichung.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hello out there!
Hier sollte lediglich gezeigt werden, dass die Verschachtelung des Images ins p unnötig ist.
Sie ist aber dennoch anzuraten.
Und das Problem wird durch die Herausnahme des img aus dem p nicht gelöst.
Der Inline-Style diente ebenso der Verdeutlichung.
Inline-Styles verdeutlichen nie etwas, sie verdunkeln.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hi,
Sie ist aber dennoch anzuraten.
Wenn mehrere Absätze ein Bild umfliessen sollen, warum sollte dann das Bild Bestandteil eines dieser Absätze sein? Da sehe ich keine Logik.
Und das Problem wird durch die Herausnahme des img aus dem p nicht gelöst.
Nein, eben gesehen, seine Struktur ist vermurkst.
Inline-Styles verdeutlichen nie etwas, sie verdunkeln.
Im Quellcode, aber nicht in einem Schnipsel Beispielcode.
See ya up the road,
heute nicht, alles verschneit...
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo Joachim
Wenn mehrere Absätze ein Bild umfliessen sollen, warum sollte dann das Bild Bestandteil eines dieser Absätze sein? Da sehe ich keine Logik.
Ob das Bild Bestandteil dieses einen Absatzes sein soll oder nicht, hängt
nicht davon ab, ob überhaupt oder wie viele Absätze das Bild umfließen.
Die Frage, die sich bezüglich der Anordnung des Bildes im Quelltext stellt,
ist eher, ob das Bild zum Seiteninhalt allgemein oder genau zu diesem einen
Absatz gehört.Bei der Beispielseite gehört dieses Bild eher zum Seiteninhalt, als zum
ersten Absatz, wobei durchaus die Frage gestellt werden könnte, ob es
überhaupt Seiteninhalt oder ob es eher nur Dekoration ist.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hello out there!
Wenn mehrere Absätze ein Bild umfliessen sollen, warum sollte dann das Bild Bestandteil eines dieser Absätze sein? Da sehe ich keine Logik.
Ein Bild soll bezogen auf den Text an einer bestimmten Stelle stehen, also im Text ⇒ in einem Textabsatz.
Ob das Bild evtl. höher ist als der Textabsatz, hängt von Bildgröße, Schriftgröße und Breite der Textabsatzbox ab. Die Darstellung, ob die nachfolgenden Absätze in solchem Falle ebenfalls das Bild umfließen, regelt CSS: die clear-Eigenschaft.
Mit der Dokumentstruktur (HTML) hat das gar nichts zu tun.
Inline-Styles verdeutlichen nie etwas, sie verdunkeln.
Im Quellcode, aber nicht in einem Schnipsel Beispielcode.Beispielcode ist Quellcode. Und gerade bei Beispielen sollte man mit gutem Beispiel vorangehen.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hi,
Ein Bild soll bezogen auf den Text an einer bestimmten Stelle stehen, also im Text ⇒ in einem Textabsatz.
Das Bild bezieht sich aber nun mal auf _mehrere_ Absätze. Was hat es also in _einem_ davon verloren.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hello out there!
Das Bild bezieht sich aber nun mal auf _mehrere_ Absätze.
Ansichtssache.
Da fällt mir ein, dass ich Bilder gelegentlich auch nicht in den Textabsatz packe, obwohl es genau zu dem Textabsatz gehört. Grund ist, dass sich das Bild noch in einem div befindet, in dem auch noch die Angabe zum Photographen ist, und div nicht in p vorkommen darf. (Beispiel)
Gibt es dafür eine bessere Auszeichnung als
<div> <img src="foo" alt="bar"> Foto: Quz </div> <p>Lorem ipsum</p>See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hi Gunnar,
schaut folkig aus, muss ich mich gleich solidarisieren (siehe img).
Gibt es dafür eine bessere Auszeichnung als
bin einverstanden ;-)
Gruesse, Joachim
--
Am Ende wird alles gut. -
Hallo Gunnar
... Grund ist, dass sich das Bild noch in einem div befindet, in dem auch noch die Angabe zum Photographen ist, und div nicht in p vorkommen darf.
Dieser könnte auch zusammen mit einem Bildtitel im title stehen.
(Beispiel)
Warum sind die alt-Attribute leer?
Wenn das Bild Inhalt sein soll, dann sollte der Bildinhalt dort kurz
beschrieben sein, wenn nicht (also nur Dekoration) dann haben die Bilder
nichts im HTML verloren.Gibt es dafür eine bessere Auszeichnung als
<div>
<img src="foo" alt="bar">
Foto: Quz
</div>
<p>Lorem ipsum</p>Ist möglich, wobei mir nicht gefällt, dass die Bilder ohne CSS dann ohne Zuordnung jeweils zwischen den Absätzen rumhängen. Ich würde es wohl so machen: ~~~html <p><span><img src="foo" alt="bar">Foto: Quz<br /></span> Lorem ipsum </p>Dazu dann noch ein display:block fürs img.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hello out there!
[Der Photograph] könnte auch zusammen mit einem Bildtitel im title stehen.
Und dann
img:after {content: attr(title)}und Nutzern verbieten, mit dem IE zu surfen?Warum sind die alt-Attribute leer?
Wenn das Bild Inhalt sein soll, dann sollte der Bildinhalt dort kurz
beschrieben sein, wenn nicht (also nur Dekoration) dann haben die Bilder
nichts im HTML verloren.Naja, die Bilder sind schon Inhalt, aber nicht so entscheidender, dass man Blinden (und Mit-ohne-Bilder-Surfern) lang und breit erklären müsste, was sie nicht sehen.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-
-
-
-
-
-
-
-
-
Hello out there!
Das Bild richtet sich einfach nicht am Text aus
Ist mir auch ein Rätsel. Aber beseitige doch mal die Fehler, mal sehen, was der Firefox zu einem validen Dokument sagt.
See ya up the road,
GunnarPS: Du meinst “si_d_ebar”?
--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Ist mir auch ein Rätsel. Aber beseitige doch mal die Fehler, mal sehen, was der Firefox zu einem validen Dokument sagt.
See ya up the road,
GunnarPS: Du meinst “si_d_ebar”?
Hi,
hab die Fehler beseitigt (waren ja nur die alt-tags, die hätt ich später eh entfernt). Leider keine Besserung.
doch si_T_ebar ist beabsichtigt :) sind links zu anderen seiten in nem groesseren komplex - deswegen site ;)
-
Hello out there!
hab die Fehler beseitigt (waren ja nur die alt-tags, die hätt ich später eh entfernt).
Nein, es war auch noch ein unpassendes width-Attribut, wo ich mir nicht sicher bin, ob sowas eine Darstellung durcheinanderbringen kann.
Und was hättest du „später eh entfernt“? Die alt-Attribute?
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-
-
Hello out there!
Du gehst geradezu verschwenderisch mit der float-Eigenschaft um. Ich denke, darin liegt das Problem, dass Firefox das Bild nicht so floatet, wie du es gern hättest, sondern sich gemäß der Spec auf ein anderes Element bezieht und das Bild danach ausrichtet.
Irgendwo ein klärendes Wort (clear) könnte vielleicht helfen; oder Gruppierung von Boxen und der umschließenden Box die float-Eigenschaft verpassen, nicht den Einzelteilen.
See ya up the road,
GunnarPS: Warum machst du den Quelltext mit Enitities wie 'ü' schwerer lesbar, anstatt 'ü' zu schreiben?
“It is almost always preferable to use an encoding that allows you to represent the characters in their normal form, rather than using character entities or NCRs.” [QA-ESCAPES]
--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)