nicht angemeldet
Hintergrundbild verdeckt bottom border
MudGuardMoin moin,
sitze hier gerade vor nem blöden Problem:
Ich habe wie immer einen Div-layer definiert:
.historier7c1{
position:absolute;
left:0px;
top:88px;
width:107px;
height:115px;
z-index:8;
border-bottom-color:#cccccc;
border-bottom-style:solid;
border-bottom-width:2px;
background-image:url(images/historie/10001.jpg);
background-position:right;
background-repeat:repeat-y;
visibility:visible}
Wie man sieht hat der Div-layer einen Hintergrund der rechts angeordnet ist und sich in der y-achse wiederholt. Jedoch hat dieser Div-layer auch eine borderline die am unteren Rand des Div-layers entlang läuft. Mein Problem ist, dass das Hintergrundbild diesen Border im Firefox schlichtweg überdeckt. Im IE sieht es dagegen wunderbar aus.
Könnt ihr mir helfen ? Ich hoffe ich habe mein Problem genau genug beschrieben.
-
Hi Melzmann!
Könnt ihr mir helfen?
Wie breit ist den der Rahmen?
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:) -
Hallo,
Wie man sieht hat der Div-layer einen Hintergrund der rechts angeordnet ist und sich in der y-achse wiederholt. Jedoch hat dieser Div-layer auch eine borderline die am unteren Rand des Div-layers entlang läuft. Mein Problem ist, dass das Hintergrundbild diesen Border im Firefox schlichtweg überdeckt.
Welcher FireFox zeigt schon dieses CSS2.1-konforme Verhalten? Meiner (Firefox/1.0.6) noch nicht. Jedenfalls nicht in folgedem Testszenario:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>BGImage und Border</title> <style type="text/css"> <!-- .historier7c1 { position:absolute; left:0px; top:88px; width:107px; height:115px; z-index:8; border-bottom-color:red; border-bottom-style:solid; border-bottom-width:10px; background-image:url(beispiel.jpg); background-position:right; background-repeat:repeat-y; visibility:visible; } --> </style> </head> <body> <div class="historier7c1"> <p>Testtext</p> </div> </body> </html>Allerdings ist genau das Verhalten, welches Du beschreibst, das, was ab CSS2.1 gelten soll:
CSS2:
If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content and padding areas of a box.CSS21:
If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content, padding and border areas of a box.viele Grüße
Axel
-
Schön jetzt weis ich schon mal woran es liegt.
Hast du auch eine Idee, wie ich das unmgehen kann ?-
Hallo,
Schön jetzt weis ich schon mal woran es liegt.
Bist Du sicher? In welchem FireFox ist in _meinem_ Testszenario der Border unten nicht zu sehen?
Hast du auch eine Idee, wie ich das unmgehen kann?
Umgehen kannst Du es bei CSS2.1-konformen Browsern gar nicht. Du kannst Dich nur dran halten, also das Hintergrundbild einem Element zuweisen, dessen Border nicht zu sehen sein muss.
viele Grüße
Axel
-
Hi,
Schön jetzt weis ich schon mal woran es liegt.
Bist Du sicher? In welchem FireFox ist in _meinem_ Testszenario der Border unten nicht zu sehen?
Hast du auch eine Idee, wie ich das unmgehen kann?
Umgehen kannst Du es bei CSS2.1-konformen Browsern gar nicht.Falsch. Siehe https://forum.selfhtml.org/?t=116440&m=744963
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo,
Umgehen kannst Du es bei CSS2.1-konformen Browsern gar nicht.
Falsch. Siehe https://forum.selfhtml.org/?t=116440&m=744963@Melzmann:
Schön jetzt weis ich schon mal woran es liegt.
Also, wie ich schon vermutete: Es liegt nicht an einer Überdeckung des Rahmens durch den Hintergrund. Da muss noch was anderes falsch sein. Hilfreich wäre ein Link zu einer Seite, die dieses Verhalten zeigt.
viele Grüße
Axel
-
@Melzmann:
Schön jetzt weis ich schon mal woran es liegt.
Also, wie ich schon vermutete: Es liegt nicht an einer Überdeckung des Rahmens durch den Hintergrund. Da muss noch was anderes falsch sein. Hilfreich wäre ein Link zu einer Seite, die dieses Verhalten zeigt.Ok hier der Link: [link]http://www.cworx.org/wenger/historie.php[/link]
-
Hallo,
Ok hier der Link: [link]http://www.cworx.org/wenger/historie.php[/link]
<werner>Haua haua ha</werner> ;-))
Der gesuchte Fehler: Die absolut positionierten DIV-Elemente, welche die Ereignisse der Historie enthalten überlappen sich im Firefox. Den Rahmen des darüber stehenden sieht man deswegen nur dort, wo der Hintergrund des darunter stehenden transparent ist.
Die eigentlichen Fehler:
Du baust die gesamte Seite aus DIV-Elementen auf, die Du versuchst mit absoluter Positionierung pixelgenau untereinander zu kleben. Das kann man nur für genau eine Rendering-Engine schaffen. Für die des IE hast Du es fast (Ausnahme:1998 "Michael Wenger...") geschafft. Leider gibt es in der Wildbahn der Rendering-Engines einige. Du wirst dieses "Klebebild" nicht für alle hinbekommen.Bitte ziehe folgende Vorgehensweise in Betracht:
HTML ist eine Text-Markup-Language. Überlege als erstes, welche Textstruktur hinter einer Historie steckt. Bilde dann diese Textstruktur mit HTML-Elementen ab und gestalte dann diese Elemente mit CSS. Um die Gestaltungsmöglichkeiten zu verbessern, suche nach einer sinnvollen Struktur, die möglichst viele semantisch sinnvolle Elemente bietet.Ich traue mich mal, hier einen Vorschlag zu unterbreiten:
Sei eine Historie eine Auflistung von Ereignissen geordnet nach Jahren. Das würde bedeuten, dass OL- und LI-Elemente verwendet werden sollten. Nun sind aber die Möglichkeiten der Gestaltung der Listennummerierung bei OL/LI noch immer sehr begrenzt, weswegen ich eine DL/DT/DD-Liste bevorzuge, auch weil es damit ein Element mehr für die nachfolgende Gestaltung mit CSS gibt.Die Struktur wäre also:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Historie</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <dl> <dt>1990</dt> <dd><p>Was im Jahr 1990 alles passierte, sollte dann hier stehen. Das DD-Element kann auch Textabsätze enthalten, weiterhin können hier Bilder hinein. Im Prinzip kann hier alles stehen, was in [link:http://www.w3.org/TR/html4/struct/lists.html#h-10.3] unter dem Link [link:http://www.w3.org/TR/html4/sgml/dtd.html#flow@title=%flow] angegeben wird.</p> <p>Das DT-Element darf leider nur [link:http://www.w3.org/TR/html4/sgml/dtd.html#inline@title=%inline] enthalten. Aber auch das sollte ausreichend sein.</p> <p class="sonst">Hier kann hin, was 1990 sonst noch passierte.</p></dd> <dt>1991</dt> <dd>Was im Jahr 1991 alles passierte, sollte dann hier stehen....Was im Jahr 1991 alles passierte, sollte dann hier stehen....Was im Jahr 1991 alles passierte, sollte dann hier stehen....</dd> <dt>1992</dt> <dd><p>Was im Jahr 1992 alles passierte, sollte dann hier stehen....Was im Jahr 1992 alles passierte, sollte dann hier stehen....Was im Jahr 1992 alles passierte, sollte dann hier stehen....</p> <p class="sonst">Hier kann hin, was 1992 sonst noch passierte.</p></dd> </dl> </body> </html>Das kann jetzt jeder Browser vernünftig darstellen. Mit CSS kann man es gestalten. Ein erster Vorschlag:
<style type="text/css"> <!-- dl {margin:auto; width:600px;`} dt {float:left; margin:0; padding:0; width:100px; background-color:#FF8080;} dd {float:left; margin:0; padding:0; width:500px; padding-bottom:5px; background-color:#FFC1C1; border-bottom:2px solid gray;} dd p {margin:0; padding:0;} dd p.sonst {margin:0; padding:0; border-top:1px solid gray;} --> </style>Die Kunst besteht nun darin, das CSS so zu formulieren, dass die Seite in allen Browsern gut aussieht.
Natürlich ist die DL/DT/DD-Struktur nicht die einzig richtige. Eine Historie kann man genau so gut als H1/P- oder OL/LI-Struktur oder als Tabelle mit zwei Spalten, links Jahr, rechts Ereignis sehen.
viele Grüße
Axel
-
Auf jedenfall ersteinmal ein riesen Dankeschön für diese ausführliche Antwort! Werde es mir noch einmal ansehen und die Struktur überarbeiten!
Grüße
Melzmann
-
-
-
-
-
-
-
Hi,
CSS21:
If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content, padding and border areas of a box.ebenfalls CSS2.1
All borders are drawn on top of the box's background.Sprich: das bis in den border-Bereich kachelnde Hintergrundbild wird im border-Bereich nur an den Stellen sichtbar, an denen die border transparent ist, weil entweder die border-color auf transparent gesetzt ist oder der border-style für Lücken in der Border sorgt (dotted, dashed). [1]
[1] oder, wie es in CSS 3 dank border-radius möglich ist, sich Teile der border-area außerhalb der border befinden.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo,
ebenfalls CSS2.1
All borders are drawn on top of the box's background.Danke für den Hinweis. Ich wollte mich schon wundern, was diese unsinnige Überdeckung des Rahmens durch den Hintergrund soll. Mein Fehler war die falsche Übersetzung von "it covers the areas" als "es überdeckt die Bereiche". Natürlich heißt es "es umfasst die Bereiche".
viele Grüße
Axel
-
-