nicht angemeldet
Position von Rahmen
Hallo!
Ich möchte um ein Bild ein Rahmen legen. Dem Bild möchte ich den Rahmen nicht geben. Um das Bild packe ich ein div, dem ich den Rahmen gebe. Je nach dem wie breit ich das div mache, fällt der Rahmen nach innen oder außen, naja nicht immer eben...
Hier mal ein Beispiel:
http://www.pb82.de/_extern/selfforum/2003_11_22/border/border.html
Oder wenn ich einem div einen Rahmen gebe, und nur Text in das div schreibe, fallen die Rahmen nach innen.
Gibt es da ein Modell/Konzept, so wie das Boxmodell?
MfG, André Laugks
--
L-Andre @ gmx.de
L-Andre @ gmx.de
-
hi,
Ich möchte um ein Bild ein Rahmen legen. Dem Bild möchte ich den Rahmen nicht geben. Um das Bild packe ich ein div, dem ich den Rahmen gebe.
warum? was spricht konkret dagegen, dem bild den rahmen zu geben?
Je nach dem wie breit ich das div mache, fällt der Rahmen nach innen oder außen, naja nicht immer eben...
eventueller workaround: du benutzt kein border, sondern eine entsprechende hintergrundfarbe für den div, und erzeugst die "rahmenbreite" über padding.
gruss,
wahsaga-
Hallo!
warum? was spricht konkret dagegen, dem bild den rahmen zu geben?
Das ist eigentlich eine gute Frage! Ich werde jetzt wohl doch die Ränder im img-Tag definieren.
MfG, André Laugks
--
L-Andre @ gmx.de
-
-
Hallo,
Ich möchte um ein Bild ein Rahmen legen. Dem Bild möchte ich den Rahmen nicht geben.
Warum? Das waere doch das einfachste.
Um das Bild packe ich ein div, dem ich den Rahmen gebe. Je nach dem wie breit ich das div mache, fällt der Rahmen nach innen oder außen, naja nicht immer eben...
Hier mal ein Beispiel:
http://www.pb82.de/_extern/selfforum/2003_11_22/border/border.htmlDu willst also einen "soliden" Rahmen von 8px um ein Bild von 128 x 128px.
width bezieht sich ja auf den Inhalt, also sollte es bei Dir 128px sein (Beispiel 2)
und nicht 144px (Beispiel 1).Im zweiten Beispiel macht ja nur der Netscape 7 (d.h. Gecko und somit auch Mozilla) "Macken".
Versuch's mal mit
div img { display:block; }
Siehe:
http://devedge.netscape.com/viewsource/2002/img-table/
http://www.dodabo.de/html+css/img-table/Oder wenn ich einem div einen Rahmen gebe, und nur Text in das div schreibe, fallen die Rahmen nach innen.
Ich verstehe nicht, was Du damit ("nach innen/aussen fallen") meinst.
Gruesse,
Thomas
-
Hallo!
width bezieht sich ja auf den Inhalt, also sollte es bei Dir 128px sein (Beispiel 2)
und nicht 144px (Beispiel 1).rrrhhhhhh! :-( Ich habe einen Dreher in meinem Beispiel.
Das erste Beispiel sollte 128px bekommen und das zweite 144px.
http://www.pb82.de/_extern/selfforum/2003_11_22/border/border.htmlIm ersten Beispiel macht Opera und im zweiten Netscape Macken.
Ich verstehe nicht, was Du damit ("nach innen/aussen fallen") meinst.
Wenn ich das div 128px breit machen, ist der Rahmen außerhalb des div's. Mache ich das div 144px breit, ist der Rahmen innerhalb des div's.
MfG, André Laugks
--
L-Andre @ gmx.de-
Hallo Andre,
Im ersten Beispiel macht Opera und im zweiten Netscape Macken.
Wie erwaehnt, wuerde ich bei validem Code einen Opera-Bug ignorieren.
Es sei denn,
a) Opera ist Dein Lieblingsbrowser
b) Du schaust die Seite taeglich 10 mal an...Wenn ich das div 128px breit machen, ist der Rahmen außerhalb des div's. Mache ich das div 144px breit, ist der Rahmen innerhalb des div's.
Ich verstehe Dich immer noch nicht.
Die Box hat (von innen nach aussen): Inhalt (Content), Padding, Border, Margin:
http://www.w3.org/TR/REC-CSS2/box.html#box-dimensionsDer Rahmen (border) ist immer ausserhalb des Contents.
Und er ist immer Bestandteil der Box, die durch den DIV erzeugt wird.
Aber es gibt kein "innerhalb/ausserhalb des DIVs".
Wie moechtest Du das ueberhaupt unterscheiden?Gemaess der Spezifikation ist mit width die Breite des Contents gemeint.
Der doofe MS IE (bis 5.5, bzw. im 6.0 im Quirks Modus) versteht unter
width die Breite der ganzen Box. Das ist das kaputte Box Modell des MS IE.
Und dafuer gibt es z.B. den Hack von Tantek:
http://tantek.com/CSS/Examples/boxmodelhack.htmlWenn schon wuerde ich erwarten, dass sich in Deinem Beispiel
ein kaputter MS IE etwa so verhaelt, wie Opera es tut.
Fuer den MS IE bliebe bei width:128px und border:8px ja
nur noch 128-16=112px Platz fuer den Content.
Der Content (das Bild) ist aber 128px breit.
Also sollte wenn schon der MS IE Probleme machen.Ach, was soll's.
Mach lieber eine einfache Loesung mit moeglichst kurzem
und uebersichtlichem HTML im bisherigen DOCTYPE.
Und vergiss Opera, das hier offenbar einen seinen zahlreichen
Bugs hat.Wenn ein Opera-Benutzer _echte_ Probleme mit der Anzeige hat, kann
er ja immer noch mit einem Mausklick (oder Ctrl-G) das CSS
ausschalten oder sein Benutzerstylesheet einschalten.
Und fuer optische Details wie einen Zier-Rahmen waere
mir die Zeit zu schade.Gruesse + schoenen Abend,
Thomas
-
Hallo!
Ich verstehe Dich immer noch nicht.
Wenn ich das DIV auf 128 Pixel setze, scheint ja wohl der Border außerhalb des DIV zu sein.
gelb: Rand-DIV und Rand-Bild
<img src="http://www.pb82.de/_extern/selfforum/2003_11_23/bild_aussen.jpg" border="0" alt="">Wenn ich das DIV auf 144 Pixel setze, scheint ja wohl der Border innerhalb des DIV zu sein.
grün: Rand-Bild
rot: Rand-DIV
<img src="http://www.pb82.de/_extern/selfforum/2003_11_23/bild_innen.jpg" border="0" alt="">Die Box hat (von innen nach aussen): Inhalt (Content), Padding, Border, Margin:
http://www.w3.org/TR/REC-CSS2/box.html#box-dimensionsLaut dem Boxmodell sollte nun das DIV auf 144 Pixel verbreitet werden, wenn ich 128 Pixel angeben...
Wenn ein Opera-Benutzer _echte_ Probleme mit der Anzeige hat, [...]
Mir ist so, daß Opera was CSS angeht, daß Maß ist.
MfG, André Laugks
--
L-Andre @ gmx.de-
So, die Bild-URL war falsch.
Wenn ich das DIV auf 128 Pixel setze, scheint ja wohl der Border außerhalb des DIV zu sein.
gelb: Rand-DIV und Rand-Bild
<img src="http://www.pb82.de/_extern/selfforum/2003_11_23/border_aussen.jpg" border="0" alt="">Wenn ich das DIV auf 144 Pixel setze, scheint ja wohl der Border innerhalb des DIV zu sein.
grün: Rand-Bild
rot: Rand-DIV
<img src="http://www.pb82.de/_extern/selfforum/2003_11_23/border_innen.jpg" border="0" alt="">MfG, André Laugks
--
L-Andre @ gmx.de-
Hallo,
Wenn ich das DIV auf 128 Pixel setze, scheint ja wohl der Border außerhalb des DIV zu sein.
gelb: Rand-DIV und Rand-BildWenn ich das DIV auf 144 Pixel setze, scheint ja wohl der Border innerhalb des DIV zu sein.
grün: Rand-Bild
rot: Rand-DIVIch verstehe Deine Begriffe nicht.
Ich vermute, dass Du sowohl dem Bild als auch dem DIV
eine Border-Eigenschaft zuweist. Aber ich kapier nicht,
was Du meinst.Unter Rand-DIV kann ich mir nichts vorstellen.
Und Rand-Bilder wird es erst mit CSS3 geben:
http://www.w3.org/TR/css3-border/#the-border-imageBitte mach doch nochmal eine Testseite, mit dem CSS im <STYLE> im HEAD,
mit den DIVs/Bildern an sich und mit den Screenshots.Oder poste wenigstens hier jeweils den CSS-Code bei den entsprechenden Bildern.
Gruesse,
Thomas
-
-
-
-
-
-
Hallo André,
Ich möchte um ein Bild ein Rahmen legen.
Hier mal ein Beispiel:
http://www.pb82.de/_extern/selfforum/2003_11_22/border/border.htmlWenn ich das so mache:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="border:#990000 8px solid;width:128px;height:128px;"><img src="egon.jpg" width="128" height="128" alt="" border="0" /></div>
</body>
</html>machen es alle Browser richtig (auch der NS 4.x).
Wenn du kein XHTML verwenden kannst/willst kannst du es so machen:
<html>
<head>
<title></title>
<style type="text/css">
img { border:#990000 8px solid; }
</style>
</head>
<body>
<img src="egon.jpg" width="128" height="128" alt="" border="0" />
</body>
</html>da spielen bis auf NS 4.x auch alle Browser mit.
Grüße
Thomas-
Hallo (auch) Thomas,
Wenn ich das so mache:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- SNIP -->
<div style="border:#990000 8px solid;width:128px;height:128px;"><img src="egon.jpg" width="128" height="128" alt="" border="0" /></div>
machen es alle Browser richtig (auch der NS 4.x).Auch der MS IE 5 (kaupttes Box-Modell)?
Vermutlich ja schon, weil der Inhalt hier eine "physische" Groesse hat.Wenn du kein XHTML verwenden kannst/willst kannst du es so machen:
img { border:#990000 8px solid; }
<img src="egon.jpg" width="128" height="128" alt="" border="0" />
da spielen bis auf NS 4.x auch alle Browser mit.So wuerde ich es auch machen. Der DIV ist IMHO ueberfluessig.
Was mich aber wunder nimmt:
Warum "funktioniert" (gemaess Deiner Aussage, und ich vermute, Du hast es getestet)
<div style="border:#990000 8px solid;width:128px;height:128px;"><img src="egon.jpg" width="128" height="128" alt="" border="0"></div>
nicht browseruebergreifend in HTML 4?
Warum nur in XHTML?Gruesse,
Thomas
-
Hallo Thomas ;-)
Warum "funktioniert" (gemaess Deiner Aussage, und ich vermute, Du hast es getestet)
<div style="border:#990000 8px solid;width:128px;height:128px;"><img src="egon.jpg" width="128" height="128" alt="" border="0"></div>
nicht browseruebergreifend in HTML 4?
Warum nur in XHTML?Weil Opera (7) zu dumm ist?
Der war der Einzige der das in HTML nicht darstellen konnte/wollte.Grüße
Thomas-
Hallo,
Warum nur in XHTML?
Weil Opera (7) zu dumm ist?
Der war der Einzige der das in HTML nicht darstellen konnte/wollte.Ach so. Danke fuer die Aufklaerung.
Ich wuerde in so einem Fall (optisches Detail) den Opera ignorieren.
Und die einfachste Loesung mit validem HTML+CSS verwenden,
die in den relevanten Browsern funktioniert, d.h. in den Browsern, welche
1. den groessten Teil des Kuchens ausmachen (MS IE 5 - 6)
2. die Seite gemaess den Standards anzeigen (Mozilla)Bloss wegen einem Opera-7-Bug wuerde ich weder auf XHTML umstellen
noch mit irgendwelchen ueberfluessigen DIVs meinen Quellcode aufblaehen.Gruesse,
Thomas
-
Hallo.
Bloss wegen einem Opera-7-Bug wuerde ich weder auf XHTML umstellen
noch mit irgendwelchen ueberfluessigen DIVs meinen Quellcode aufblaehen.Nachdem zum x-ten mal deine Präferenzen bezüglich der Browser geklärt wären, stellt sich nur noch die Frage, welche nachvollziehbaren Nachteile XHTML-Seiten haben.
MfG, at-
Hallo,
Bloss wegen einem Opera-7-Bug wuerde ich weder auf XHTML umstellen [...]
[...] stellt sich nur noch die Frage, welche nachvollziehbaren Nachteile XHTML-Seiten haben.XHTML-Seiten an sich haben wohl keine/kaum Nachteile,
solange man rueckwaerts-kompatibel schreibt.Aber der Prozess des Umwandelns kann - je nach Anzahl Dokumente
und Umwandlungs-Methode - sehr, sehr zeitaufwendig sein.Ein unbedeutender "aesthetischer" Browser-Bug waere fuer
mich kein Grund, x bis zig Stunden fuer die Konvertierung
HTML -> XHTML aufzuwenden, zumal ich keinen wirklichen
und praktischen Vorteil von XHTML 1.0 Strict gegenueber
HTML 4.01 Strict sehe, solange man nicht MathML, SVG
oder aehnliche Dinge benutzt.http://www.netandmore.de/faq/fom-serve/cache/1255.html
http://www.netandmore.de/faq/fom-serve/cache/1256.html
http://www.netandmore.de/faq/fom-serve/cache/1257.html
u.s.w. vermoegen mich nicht zu ueberzeugen, bestehende alte
HTML-4-Seiten im XHTML umzuwandeln...Gruesse,
Thomas
-
Hallo.
XHTML-Seiten an sich haben wohl keine/kaum Nachteile,
solange man rueckwaerts-kompatibel schreibt.Davon war ich ausgegangen.
Aber der Prozess des Umwandelns kann - je nach Anzahl Dokumente
und Umwandlungs-Methode - sehr, sehr zeitaufwendig sein.Okay, darin gebe ich dir natürlich Recht. Dir ging es also nur um die Umwandlung, nicht um den Standard selbst. -- Und ich hatte schon gegrübelt ;-)
MfG, at-
Hallo,
Okay, darin gebe ich dir natürlich Recht. Dir ging es also nur um die Umwandlung, nicht um den Standard selbst. -- Und ich hatte schon gegrübelt ;-)
nachdem in HTML strict und XHTML kaum Unterschiede bestehen, in XHTML also denn auch eigentlich nur "HTML" drinnensteckt, und grundsätzlich HTML abwärtskompatibler ist, wo soll eigentlich der Vorteil von XHTML sein?
HTML dürfte selbst in fernerer Zukunft von den Browsern unterstützt werden. Also nur unauffällige Manipulation des Rendermodus und etwas XML-Hype?
Grüsse
Cyx23
-
Hallo.
nachdem in HTML strict und XHTML kaum Unterschiede bestehen, in XHTML also denn auch eigentlich nur "HTML" drinnensteckt, und grundsätzlich HTML abwärtskompatibler ist, wo soll eigentlich der Vorteil von XHTML sein?
Nachdem zwischen HTML und XHTML kaum Unterschiede bestehen, XHTML also auch eigentlich "nur" HTML beinhaltet und damit per se abwärtskompatibel ist, wo soll eigentlich der Nachteil von XHTML sein?
HTML dürfte selbst in fernerer Zukunft von den Browsern unterstützt werden. Also nur unauffällige Manipulation des Rendermodus und etwas XML-Hype?
Je strikter der Dokumententyp, desto leichter fällt mir persönlich die rein semantische Auszeichnung. Und wenn eines meiner Dokumente validiert und dank CSS dennoch so aussieht wie ich es mir vorstelle, kann ich mir einigermaßen sicher sein, ein sauberes, logisch strukturiertes und für mich auch in einigen Jahren noch problemlos nachvollziehbares Produkt erzeugt zu haben.
Ich möchte diese Ansicht nicht verallgemeinern, aber auf mich trifft sie eben zu.
MfG, at-
Hallo,
Je strikter der Dokumententyp, desto leichter fällt mir persönlich die rein semantische Auszeichnung. Und wenn eines meiner Dokumente validiert und dank CSS dennoch so aussieht wie ich es mir vorstelle, kann ich mir einigermaßen sicher sein, ein sauberes, logisch strukturiertes und für mich auch in einigen Jahren noch problemlos nachvollziehbares Produkt erzeugt zu haben.
da sehe ich erstmal gar keinen Unterschied zwischen HTML 401 strict und XHTML, und gegenüber anderen HTML-Versionen wird eben CSS bedeutsamer.
Und da es genug Webseiten ohne strenge eindimensionale Hirarchie im "Dokument" gibt (oder gar Positionierungen auf dem Bildschirm selbst Bedeutung haben), verschiebt sich Bedeutung (oder auch mal potenzielle Fehlinterpretation) entweder in die Stylesheets oder auf nötige aber als inhaltliche Struktur unklare Containerdivs; das dürfte aber eben bei HTML und XHTML ähnlich passieren.
Nachdem zwischen HTML und XHTML kaum Unterschiede bestehen, XHTML also auch eigentlich "nur" HTML beinhaltet und damit per se abwärtskompatibel ist, wo soll eigentlich der Nachteil von XHTML sein?
Ich kann da nur Vermutungen anstellen, z.B. Fehler bei einigen Browsern wie als harmloseres Beispiel beim IE 3, der <?xml version="1.0"?> als Text anzeigt. Vielleicht sind ja Parsingerror durch nicht abgeschlossene Tags möglich.
Grüsse
Cyx23
-
Hallo.
da sehe ich erstmal gar keinen Unterschied zwischen HTML 401 strict und XHTML, und gegenüber anderen HTML-Versionen wird eben CSS bedeutsamer.
Ein Unterschied ist zum Beispiel der, dass der Validator ein bei mir versehentlich übrig gebliebenes "target"-Attribut anmeckert, dass ich ansonsten wohl übersehen hätte.
Und da es genug Webseiten ohne strenge eindimensionale Hirarchie im "Dokument" gibt [...]
Stop! Ich hatte vom _meinen_ Dokumenten gesprochen. Was in den Weiten des Netzes geschieht, entzieht sich meines Einflusses und zum überwiegenden Teil auch meines Interesses -- was in Anbetracht der Menge von Seiten sicher nicht nur mir so geht.
Ich kann da nur Vermutungen anstellen, z.B. Fehler bei einigen Browsern wie als harmloseres Beispiel beim IE 3, der <?xml version="1.0"?> als Text anzeigt. Vielleicht sind ja Parsingerror durch nicht abgeschlossene Tags möglich.
Und ausgerechnet dies Angabe ist nirgends verpflichtend, oder? ;-)
MfG, at-
Hallo,
da sehe ich erstmal gar keinen Unterschied zwischen HTML 401 strict und XHTML, und gegenüber anderen HTML-Versionen wird eben CSS bedeutsamer.
Ein Unterschied ist zum Beispiel der, dass der Validator ein bei mir versehentlich übrig gebliebenes "target"-Attribut anmeckert, dass ich ansonsten wohl übersehen hätte.
HTML 401 strict sollte doch auch kein "target"-Attribut aufweisen?
Und da es genug Webseiten ohne strenge eindimensionale Hirarchie im "Dokument" gibt [...]
Stop! Ich hatte vom _meinen_ Dokumenten gesprochen. Was in den Weiten des Netzes geschieht, entzieht sich meines Einflusses und zum überwiegenden Teil auch meines Interesses -- was in Anbetracht der Menge von Seiten sicher nicht nur mir so geht.
Potenziell würde ich eine gewisse Mehrdimensionalität erstmal allen Dokumenten zutrauen.
Ich kann da nur Vermutungen anstellen, z.B. Fehler bei einigen Browsern wie als harmloseres Beispiel beim IE 3, der <?xml version="1.0"?> als Text anzeigt. Vielleicht sind ja Parsingerror durch nicht abgeschlossene Tags möglich.
Und ausgerechnet dies Angabe ist nirgends verpflichtend, oder? ;-)
..aber ein Beispiel für unterschiedliches Browserverhalten bei Unterschieden im "HTML", aber wenn natürlich der IE 3 sonst damit klarkommt sollte es hoffentlich bei anderen Clients auch laufen. Allerdings sind solche xml-Deklarationen vermutlich auch ein Grund XHTML einzusetzen und dabei unauffällig den IE 6 auf einen bestimmten Rendermodus zu stellen, auch wenn das auf deine Dokumente nicht zutreffen mag.
Grüsse
Cyx23
-
Hallo.
Ein Unterschied ist zum Beispiel der, dass der Validator ein bei mir versehentlich übrig gebliebenes "target"-Attribut anmeckert, dass ich ansonsten wohl übersehen hätte.
HTML 401 strict sollte doch auch kein "target"-Attribut aufweisen?
Das mag sogar stimmen, aber es war tatsächlich nur ein Beispiel.
Potenziell würde ich eine gewisse Mehrdimensionalität erstmal allen Dokumenten zutrauen.
Das ist sicher eine Definitionsfrage, aber ich wollte auch nicht über andere herziehen, sondern nur betonen, wie egal mir diesbezüglich die Vorgehensweisen anderer sind, sofern sie mich nicht einschränken.
Ich kann da nur Vermutungen anstellen, z.B. Fehler bei einigen Browsern wie als harmloseres Beispiel beim IE 3, der <?xml version="1.0"?> als Text anzeigt. Vielleicht sind ja Parsingerror durch nicht abgeschlossene Tags möglich.
Und ausgerechnet dies Angabe ist nirgends verpflichtend, oder? ;-)
..aber ein Beispiel für unterschiedliches Browserverhalten bei Unterschieden im "HTML", aber wenn natürlich der IE 3 sonst damit klarkommt sollte es hoffentlich bei anderen Clients auch laufen. Allerdings sind solche xml-Deklarationen vermutlich auch ein Grund XHTML einzusetzen und dabei unauffällig den IE 6 auf einen bestimmten Rendermodus zu stellen, auch wenn das auf deine Dokumente nicht zutreffen mag.
Eben. Ich kann damit leben, bezwecke es aber nicht. Mir ist auch ziemlich egal, in welchem Modus sich ein IE neuerer Generation befindet oder wie man ihn in diesen versetzt, da ich mich auch um ältere Versionen kümmern muss -- jedenfalls in einem gewissen Maße, das ich im Regelfall gemeinsam mit meinem Auftraggeber bestimme.
MfG, at
-
-
-
-
-
-
-
-
-
-
-
-