Bildunterschrift samt fließenden Text unter IE

[Dionysos]

Hallo zusammen.

Ich möchte in einem Beitrag ein Bild links positionieren und darunter einen Text verfassen (als Bildunterschrift). Das ganze soll von einem Ramen umfasst sein, das einen grauen Hintergrund hat. Drum herum soll der eigentliche Artikeltext das Ganze dann umfließen.

Das habe ich damit realisiert:

<div style="float:left; margin:10px; width:412px; ">  
<p style="border-color:#000000; background: #666666; border-width:2px; border-style:solid; px;padding:5px"><img src="http://www.abload.de/img/beispiel2pou.jpg" width="399" height="269" bordercolor="#800000" alt="Bild von heise.de"><br>  
<span class="untertiel">[align=justify][size=8][color=#ffffff]Krankenwagen wie dieser wurden den "Missionaren der Nächstenliebe" von Kalkuttas Stadtverwaltung spendiert. Nach Aroup Chatterjees Recherchen dienen sie jedoch primär als "Nonnen-Taxis", werden selten für Krankentransporte zwischen den Heimen eingesetzt, und niemals für die Beantwortung von Notrufen.[/color][/size][/align]</span></p>  
</div>

Allerdings wird der Hintergrund unter Internet Explorer nicht korrekt dargestellt und der Ramen umfasst stattdessen nur das Bild, aber nicht mehr die Bildunterschrift. Was mache ich da falsch?

Wäre für jeden  Tipp dankbar.

LG
Dionysos

[ChrisB]

Hi,

Allerdings wird der Hintergrund unter Internet Explorer nicht korrekt dargestellt und der Ramen umfasst stattdessen nur das Bild, aber nicht mehr die Bildunterschrift. Was mache ich da falsch?

Du beschreibst ein Problem, das mit so wenig Code kaum nachvollziehbar ist.

Ein Online-Beispiel wäre hilfreicher - auf's wesentliche reduziert, und mit validem HTML und CSS, bitte.

MfG ChrisB

[Dionysos]

Ein Online-Beispiel wäre hilfreicher - auf's wesentliche reduziert, und mit validem HTML und CSS, bitte.

Du kannst den Text hier einsehen: http://www.gekreuzteklingen.de/index.php?page=Thread&threadID=1266

[ChrisB]

Hi,

Ein Online-Beispiel wäre hilfreicher - auf's wesentliche reduziert, und mit validem HTML und CSS, bitte.

Du kannst den Text hier einsehen: http://www.gekreuzteklingen.de/index.php?page=Thread&threadID=1266

Gut, jetzt kannst du die zahlreichen Fehler im HTML hier einsehen.

Darüber hinaus besteht der Darstellungsfehler, dass der Rahmen ums Bild die Bildunterschrift nicht mit einschließt, auch in aktuellen Versionen von Opera, Safari und Chrome - also machst du da wohl was grundlegend falsch, auch wenn der Firefox zufällig das Ergebnis liefert, das du möchtest.

MfG ChrisB

[Dionysos]

Gut, jetzt kannst du die zahlreichen Fehler im HTML hier einsehen.

Hmkay 11 Fehler zeigt er mir immer noch an. Aber das hier verstehe ich nicht:

…" width="399" height="269" bordercolor="#800000" alt="Bild von heise.de" /><br>

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
...
Hat er jetzt ein Problem mit dem Attribute "Bordercolor"? und wenn ja, durch was soll ich ihn ersetzen?

[ChrisB]

Hi,

Hat er jetzt ein Problem mit dem Attribute "Bordercolor"?

Ja, hat „er“ - weil es das in HTML nicht gibt.

und wenn ja, durch was soll ich ihn ersetzen?

Durch CSS natürlich, schließlich ist ausschließlich das für die Darstellung zuständig.

Und die zahlreichen BR solltest du auch durch per CSS erzeugte Abstände ersetzen.

MfG ChrisB

[Dionysos]

Durch CSS natürlich, schließlich ist ausschließlich das für die Darstellung zuständig.

Und die zahlreichen BR solltest du auch durch per CSS erzeugte Abstände ersetzen.

Ich bin leider noch kein CSS experte und bin noch ziemlich am Anfang. Ein Tipp, wie diese Attribute lauten, wäre sehr hilfreich.

[ChrisB]

Hi,

Ich bin leider noch kein CSS experte und bin noch ziemlich am Anfang. Ein Tipp, wie diese Attribute lauten, wäre sehr hilfreich.

http://de.selfhtml.org/css/eigenschaften/

MfG ChrisB

[Dionysos]

http://de.selfhtml.org/css/eigenschaften/

Ok. Danke für den Link. Ich bin mittlerweile auf 5 Fehler runter. Aber das hier verstehe ich immer noch nicht:

…ef="bildlink" target="_blank">text</a>

sagt er mir "there is no attribute "target"".

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

Ist aber alles korrekt angegeben, wie es sich gehört. Was mache ich da falsch?

[ChrisB]

Hi,

sagt er mir "there is no attribute "target"".

target gibt es in XHTML 1.1 nicht mehr.

In HTML oder XHTML 1.0 müsstest du die Transitional-Variante nehmen, in Strict gibt es das dort auch nicht.

Ist aber alles korrekt angegeben, wie es sich gehört. Was mache ich da falsch?

Sinn dahinter ist, dass es möglichst dem Nutzer überlassen werden sollte, ob er einen Link in einem neuen Fenster/Tab öffnen möchte oder nicht.

Wenn du darauf nicht verzichten willst - nutze wie gesagt HTML/XHTML 1.0 Transitional.

MfG ChrisB

[Dionysos]

Sinn dahinter ist, dass es möglichst dem Nutzer überlassen werden sollte, ob er einen Link in einem neuen Fenster/Tab öffnen möchte oder nicht.

Hast Du eigentlich recht. Ich habe das Attribut rausgenommen. Das Dokument wird nun als Valide erkannt. Das einzige was ich noch machen möchte, ist die <br/> zeichen weg zu kriegen. Welches Attribut erzeugt bei CSS Absätze?

mit <p>text</p> krieg ich zwar nen einfachen Absatz hin, aber ich möchte richtig platz zwischen zwei Textpassagen haben (eine Freie Textzeile quasi). Ich habe das bis jetzt mit 2x <br/> erzeugt. Gibt es da eine andere Möglichkeit?

[ChrisB]

Hi,

Hast Du eigentlich recht. Ich habe das Attribut rausgenommen. Das Dokument wird nun als Valide erkannt. Das einzige was ich noch machen möchte, ist die <br/> zeichen weg zu kriegen. Welches Attribut erzeugt bei CSS Absätze?

https://forum.selfhtml.org/?t=200319&m=1349714

mit <p>text</p> krieg ich zwar nen einfachen Absatz hin, aber ich möchte richtig platz zwischen zwei Textpassagen haben (eine Freie Textzeile quasi).

Dann gebe genau diesen P-Elementen Abstände.

MfG ChrisB

[Dionysos]

Dann gebe genau diesen P-Elementen Abstände.

Hm ich habe das jetzt mit <p style="margin:10px;"> versucht, aber da kommt dann folgendes bei raus:

document type does not allow element "blockquote" here; missing one of "button", "map", "object", "ins", "del", "noscript" start-tag

<p style="margin-bottom:10px;"><blockquote class="quoteBox container-4">

Darf man das Attribut da nicht nutzen oder woran liegts?

[Der Martin]

Hallo,

Dann gebe genau diesen P-Elementen Abstände.
Hm ich habe das jetzt mit <p style="margin:10px;"> versucht, aber da kommt dann folgendes bei raus:
document type does not allow element "blockquote" here; missing one of "button", "map", "object", "ins", "del", "noscript" start-tag

das hat ja nun nichts mit den zugeordneten CSS-Eigenschaften oder den style-Attributen zu tun, sondern nur mit der unzulässigen Verschachtelung von p und blockquote.

<p style="margin-bottom:10px;"><blockquote class="quoteBox container-4">
Darf man das Attribut da nicht nutzen oder woran liegts?

Ein p-Element darf seinerseits keine Blockelemente enthalten.

Ciao,
 Martin

[Dionysos]

Ein p-Element darf seinerseits keine Blockelemente enthalten.

Aaaahh, ok. Jetzt klappt alles. Danke Euch für die ausführliche Hilfe! :)

LG
Dionysos

[Felix Riesterer]

Lieber Dionysos,

Du kannst den Text hier einsehen: http://www.gekreuzteklingen.de/index.php?page=Thread&threadID=1266

OMG - arrrrgh! Wusstest Du schon, dass...
* ein Textabsatz ein Textabsatz ist, und dass Textabsätze in HTML ein passendes Element haben (<p>)?
* Überschriften hierarchisch gegliedert werden können, und dass unsichtbare Hauptüberschriften irgendwie fragwürdig sind?
* Deine Seite ohne Styles nicht mehr in allen Aspekten sinnvoll dargestellt werden kann (Strukturproblem!!)?

Nutze die Macht der Semantik und verleihe den Elementen, die Deine Inhalte tragen sollen, die jeweils passende Bedeutung! Dann fällt es auch leichter, CSS sinnvoll einzusetzen.

Liebe Grüße,

Felix Riesterer.

[apsel]

Om nah hoo pez nyeetz, Dionysos!

Hauptproblem ist wohl diese Konstruktion:

<span class="untertiel"><div style="text-align: justify"><span style="font-size: 8pt"><span style="color: #ffffff"> ... </span></span></div></span>

da span keine Blockelemente enthalten darf.

Matthias

[Felix Riesterer]

Lieber Dionysos,

ich löse solche Probleme so:

<p class="illustration-rechts">  
    <img src="pfad/bild.jpg" alt="Kurzbeschreibung. " />  
    Bildunterschrift mit <em>möglichen</em> Auszeichnungen  
</p>

Das ist semantisch sicherlich die reinste Lösung, die mittels CSS exakt so gestaltbar ist, wie Du es ursprünglich haben wolltest.

.illustration-rechts {  
    float: right;  
    margin: 0 0 0 1.3em;  
    padding: 0.5em;  
    border: 1px solid black;  
    /* Je nach Standardbreite der Bilder ist dieser Wert anzupassen: */  
    width: 230px;  
    /* Hier könnte man auch "justify" verwenden: */  
    text-align: center;  
    /* Kursivschrift ist sicherlich optional... */  
    font-style: italic;  
}  
  
.illustration-rechts img {  
    /* Bild innerhalb der Box mittig und ausreichend Abstand unten/oben */  
    display: block;  
    margin: 0.2em auto 0.3em auto;  
}

Seitenverkehrt geht das natürlich auch...

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

<p class="illustration-rechts">

<img src="pfad/bild.jpg" alt="Kurzbeschreibung. " />
    Bildunterschrift mit <em>möglichen</em> Auszeichnungen
</p>

>   
> Das ist semantisch sicherlich die reinste Lösung, die mittels CSS exakt so gestaltbar ist, wie Du es ursprünglich haben wolltest.  
  
Sicherlich nicht.  
  
~~~html
<figure class="illustration-rechts">  
  <img src="pfad/bild.jpg" alt="Kurzbeschreibung."/>  
  <figcaption>Bildunterschrift mit <em>möglichen</em> Auszeichnungen</figcaption>  
</figure>

Für irgendwas muss HTML5 ja gut sein.

Qapla'

[Felix Riesterer]

Lieber Gunnar,

<figure class="illustration-rechts">[...]
Für irgendwas muss HTML5 ja gut sein.

ich bin noch nicht bei HTML5 angekommen, da diese Spezifikation noch nicht endgültig ist. Bis dahin verbleibe ich bei XHTML1.0 strict.

Liebe Grüße,

Felix Riesterer.