background-position bei CLASS anders als bei ID
Benjamin Keil
- css
Hallo Leute,
erstmal danke für die Hilfe bei meinem letzten Problem.
Ich hab wieder ein neues Problem...
Ich habe einem DIV-Bereich, der horizontal-mittig auf meiner
Seite (s.o.) zentriert ist, eine ´class´ und eine ´id´
zugewiesen. (css ist extern)
(Die class-Eigenschaften sollen auf mehreren Unterseiten
wiederholt werden, die id soll aber nur einmal vorkommen sollen,
da ich mit dieser das individuelle Hintergrundbild für
die einzelne Seite festlegen will)
Wenn ich mit der ID das Hintergrundbild und Position 0,0
für den div-Bereich festlege
startet es mit Mozilla RC 1 links oben im Browserfenster,
so als ob ich es dem Body zugeornet hätte. IE 6 macht´s richtig.
Wenn ich es per class einbinde fängt es oben links bei
Position 0,0 des DIV-Bereiches an, so wie es auch vorgesehen ist.
Ich habe dafür nirgendwo auch nur annähernd eine Erklärung
gefunden und es auch zig mal auf Richtigkeit überprüft.
Versteht von Euch jemand warum das so ist?
Ich könnte natürlich das Bild mit in die class-Eigenschaften
packen, aber dann müsste ich alle anderen Eigenschaften
für jede weitere Seite unnötig wiederholen,
außerdem kann da irgendwas nicht stimmen...
Schöne Grüße,
Benjamin
P.S.(off-topic) Habe zufällig festgestellt das Mozilla schon
last-child (Gegenteil von first-child) unterstützt,
echt praktisch!!
hi
Wenn ich mit der ID das Hintergrundbild und Position 0,0
für den div-Bereich festlege
startet es mit Mozilla RC 1 links oben im Browserfenster,
so als ob ich es dem Body zugeornet hätte. IE 6 macht´s richtig.
also hier wird background-position: immer von der oberen Linken Ecke des Elementes, für das das Bild definiert ist berechnet (in Mozilla, Opera und konqueror) - kannst du mal deinen Quellcode sehen lassen...?
P.S.(off-topic) Habe zufällig festgestellt das Mozilla schon
last-child (Gegenteil von first-child) unterstützt,
jo, vohin gesehen :)
hi
Wenn ich mit der ID das Hintergrundbild und Position 0,0
für den div-Bereich festlege
startet es mit Mozilla RC 1 links oben im Browserfenster,
so als ob ich es dem Body zugeornet hätte. IE 6 macht´s richtig.
also hier wird background-position: immer von der oberen Linken Ecke des Elementes, für das das Bild definiert ist berechnet (in Mozilla, Opera und konqueror) - kannst du mal deinen Quellcode sehen lassen...?
P.S.(off-topic) Habe zufällig festgestellt das Mozilla schon
last-child (Gegenteil von first-child) unterstützt,
jo, vohin gesehen :)
toller Selfbrowser hat nur die Hälfte verschickt,
also nochmal:
Hi :-)
hier ist der Quelltext:
HTML:
<body>
<div class="aussen">
<div class="naviblock">
<a href="index.html" class="nav" id="nav1">Design</a>
<a href="index.html" class="nav" id="nav2">Literatur-Tips</a>
<a href="index.html" class="nav" id="nav3">Ben</a>
<a href="index.html" class="nav" id="nav4">Gästebuch</a>
<a href="index.html" class="nav" id="nav5">Impressum</a>
</div>
</div>
<div class="mitte">
<div class="inhaltsblock" id="ben">
Inhalt
</div>
</div>
<div class="aussen">
<div class="subnaviblock">
Subnavi
</div>
</div>
</body>
CSS-AUSSCHNITTE:
body {
margin-left: 0;
margin-right: 0;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
color: #FFFFFF;
background-color: #000000;
font-size:10pt;
font-family:Verdana,Helvetica,Arial,sans-serif;
}
div.inhaltsblock {
margin-left: auto;
margin-right: auto;
text-align: left;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
height: 324px;
width: 578px; /* Box Model Problem */
} html>body div.inhaltsblock { width: 576px; overflow: auto; }
#ben {
background-image: url(../images/bg_roentgen.jpg);
background-attachment: fixed;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#######
Problem-Beispiel: www.bkeil.com/preview/
Grüße,
Ben
Irgendwie spinnt der Selfbrowser,
gibts da einen Link, wo man Fehler melden soll?
Die letzte Nachricht fängt leider in der Mitte an und hört
oben auf ;-)
Ben
Hallo Ben,
Irgendwie spinnt der Selfbrowser,
gibts da einen Link, wo man Fehler melden soll?
http://selffan.teamone.de/selfbrowser/ sollte Dir weiterhelfen.
Viele Grüße,
Stefan
hi
#ben {
background-image: url(../images/bg_roentgen.jpg);
background-attachment: fixed;
background-position: 0px 0px;
background-repeat: no-repeat;
}
durch das background-attachment:fixed wird die position von der oberen linken Ecke aus berechnet nach CSS-Spec (und so auch in Mozilla und konqueror zu sehen). Opera macht's falsch - wofür ich gleich was an deren Newsgroup schreibe (gerade eben schonmal drüber gestolpert) und MSIE kA, aber wenn da etwas richtig ist, isses ne Rarität.
Grüße aus Bleckede
Kai
Hi, jetzt wieder ohne Selfbrowser,
#ben {
background-image: url(../images/bg_roentgen.jpg);
background-attachment: fixed;
background-position: 0px 0px;
background-repeat: no-repeat;
}
durch das background-attachment:fixed wird die position von der oberen linken Ecke aus berechnet nach CSS-Spec (und so auch in Mozilla und konqueror zu sehen). Opera macht's falsch - wofür ich gleich was an deren Newsgroup schreibe (gerade eben schonmal drüber gestolpert) und MSIE kA, aber wenn da etwas richtig ist, isses ne Rarität.
Dann haben die vom w3c sich wohl etwas missverständlich ausgedrückt,
oder mein englisch ist zu schlecht. :-)
http://www.w3.org/TR/CSS2/colors.html#background-properties
Es ergibt meiner Meinung nach keinen Sinn, denn nur
weil ich den Hinergrund eines Divs fixieren will, will
ich ihn ja noch lange nicht anhand des bodys ausrichten,
das ist ja unmöglich, wenn das Div rechtsbündig oder zentriert
steht. Und vorallem, warum macht Mozilla es dann mittels
class Anweisung so, dass das Bild am Div ausgerichtet ist,
und mittels ID am body???
Grüße,
Benjamin
hi
Es ergibt meiner Meinung nach keinen Sinn, denn nur
weil ich den Hinergrund eines Divs fixieren will, will
ich ihn ja noch lange nicht anhand des bodys ausrichten,
das ist ja unmöglich, wenn das Div rechtsbündig oder zentriert
steht. Und vorallem, warum macht Mozilla es dann mittels
class Anweisung so, dass das Bild am Div ausgerichtet ist,
und mittels ID am body???
..ich hab' da gestern den Leuten von Opera einen Satz zitiert, der das recht deutlich sagt, die genaue Stelle find' ich auch nicht.
Das mit dem unterschied versteh' ich aber auch nicht, evtl. ist da irgendwo ein tippo oder so..? Sonst welche Version?
Grüße aus Bleckede
Kai
Hi,
..ich hab' da gestern den Leuten von Opera einen Satz zitiert, der das recht deutlich sagt, die genaue Stelle find' ich auch nicht.
Das mit dem unterschied versteh' ich aber auch nicht, evtl. ist da irgendwo ein tippo oder so..? Sonst welche Version?
ja irgendwie muss der Fehler bei mir gewesen sein,
vielleicht bin ich versehentlich zwischen Mozilla
und IE hergesprungen, denn jetzt wird der Hintergrund
immer so ausgerichtet wie ich ihn nicht haben will,
egal ob class oder id. ;-)
Sorry das ich da nicht so ganz aufgepasst habe.
Ohne fixed hab ich da leider schön verloren...
Gibts dafür noch keine Lösung, bzw. einen Trick?
Grüße aus Bötzingen,
Benjamin
hi
Sorry das ich da nicht so ganz aufgepasst habe.
Ohne fixed hab ich da leider schön verloren...
Gibts dafür noch keine Lösung, bzw. einen Trick?
den Betonköpfen bei Microsoft und dem Ausredomaten bei Opera sagen sie sollen die Scheiße endlich in Ordnung bringen. - oder du versuchst, ob man das Bild an den <body> hängen kann und dann eben fixed setzt.
Grüße aus Bleckede
Kai
Hallo Kai,
durch das background-attachment:fixed wird die position von der oberen linken Ecke aus berechnet nach CSS-Spec (und so auch in Mozilla und konqueror zu sehen).
tatsächlich, auch wenn ich den Sinn der Sache nicht so ganz verstehe.
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-attachment:
"If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll')."
"Even if the image is fixed, it is still only visible when it is in the background or padding area of the element."
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position:
"If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding area."
Wie gesagt, den Sinn der ganzen Aktion verstehe ich nicht, da es so
unmöglich ist, einem Element (ausser body) ein feststehendes Hinter-
grundbild zu verpassen, welches sich dann auch wirklich hinter dem
Element befindet.
Viele Grüße,
Stefan
hi
tatsächlich, auch wenn ich den Sinn der Sache nicht so ganz verstehe.
Eric Meyer hat das mal gut genutzt, wo eben ein Bild nur dann zu sehen ist, wenn es hinter dem Element ist - somit haben dann mehrere von ein ander getrennte Blöcke ein gemeinsames Hintergrundbild, dass sich verschiebt, wenn man scrollt.
http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html.
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-attachment:
"If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll')."
"Even if the image is fixed, it is still only visible when it is in the background or padding area of the element."
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position:
"If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding area."
dankeeeeee! Die Stelle hab' ich dauernd gesucht!!
Grüße aus Bleckede
Kai