nicht angemeldet
background-position: Das sind keine 10 %!
MudGuard
Gunnar BittersmannHi,
Seite: http://e7o.de/tmp-dev/
C S S: http://e7o.de/tmp-dev/gfx/style-default.css
ich bastel gerade an meiner Seite, und hab vor da im Hintergrund einen Streifen anzuzeigen... Den Streifen hab ich mittels background-position auf 10 % vom linken Rand entfernt gelegt (body), darüber liegt ein <ul> ebenfalls 10 % vom linken Rand weg... Nur leider sind sich jetzt 3 Browser (IE, Gecko, Opera) einig, dass die 10 % im Hintergrund ein bisschen kleiner sind als die 10 %, mit denen das Element positioniert wird...
Warum ist das so? Was habe ich übersehen? Schon mal danke im Voraus.
E7
PS: Das Design ist noch nicht fertig, und die Umsetzung auch nicht, es wirkt im Moment auch wie eine Baustelle...
-
Hi,
ich bastel gerade an meiner Seite, und hab vor da im Hintergrund einen Streifen anzuzeigen... Den Streifen hab ich mittels background-position auf 10 % vom linken Rand entfernt gelegt (body), darüber liegt ein <ul> ebenfalls 10 % vom linken Rand weg... Nur leider sind sich jetzt 3 Browser (IE, Gecko, Opera) einig, dass die 10 % im Hintergrund ein bisschen kleiner sind als die 10 %, mit denen das Element positioniert wird...
Weil das anders definiert ist.
Bei der Hintergrund-Position bedeuten xx Prozent, daß der Bildpunkt, der xx Prozent der Bildbreite/-höhe entspricht, auf xx Prozent der Elementbreite/-höhe positioniert wird.
Beispiele (horizontale Position):
bei 0% wird die linke Kante des Bildes an die linke Kante des Elements gelegt.
bei 50% wird die Bildmitte in die Elementmitte gelegt.
bei 100% wird die rechte Kante des Bildes an die rechte Kante des Elements gelegt.Bei 10% sind demnach 10% des Bildes links von der Linie, die 10% der Elementbreite entspricht.
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.
-
Hi,
Bei 10% sind demnach 10% des Bildes links von der Linie, die 10% der Elementbreite entspricht.
also 10 % von 10 % sind 1 %, also ist das Bild 9 % vom linken Rand weg oder wie muss ich das verstehen? Bzw., wie krieg ich dann das Bild auf 10 %?
E7
-
Hi,
Bei 10% sind demnach 10% des Bildes links von der Linie, die 10% der Elementbreite entspricht.
also 10 % von 10 % sind 1 %, also ist das Bild 9 % vom linken Rand wegNö.
Beispiel:
das Bild ist 200px breit.
Das Element sei 500px breit (Breite sei hier der Bereich, für den Hintergrundfarbe/-bild gelten, also NICHT das, was width angibt, sondern border + padding + width).Bei horizontaler Position von 10% gilt dann:
10% von der Bildbreite = 20px
10% von der Elementbreite = 50pxEs liegt also der 20. Pixel des Bildes 50 Pixel vom linken Rand entfernt (+/- 1 Pixel oder so).
Damit liegt die linke Bildkante 20 Pixel weiter links, also 50px - 20px = 30px.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.
-
border + padding + width
Hi Andreas,
border zählt nicht mit. Im Firefox jedenfalls nicht.Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hi,
border + padding + width
border zählt nicht mit. Im Firefox jedenfalls nicht.
Hm - Nachguck. Tatsache.
CSS 2.1 widerspricht sich da m.E. ein bißchen selbst:http://www.w3.org/TR/CSS21/colors.html#q2
In terms of the box model, "background" refers to the background of the content, padding and border areas.http://www.w3.org/TR/CSS21/box.html#border-style-properties
All borders are drawn on top of the box's background.http://www.w3.org/TR/CSS21/colors.html#q2
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge.Demnach erstreckt sich der Hintergrund bis an die border-edge, wird aber relativ zur padding-edge positioniert - find ich doof.
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.
-
-
-
Heißa, e7,
also 10 % von 10 % sind 1 %, also ist das Bild 9 % vom linken Rand weg oder wie muss ich das verstehen?
So wie ich das verstanden habe, ist der linke Rand des Bildes 10 % der Elementbreite minus 10 % der Bildbreite vom linken Rande entfernt.
Bzw., wie krieg ich dann das Bild auf 10 %?
Hm, du musst es wohl einem anderen Element zuordnen. Jedenfalls kriegt man das so direkt nicht hin. Du könntest natürlich ein margin-left mit 10% des Bildes einrichten, aber ob dann das herauskommt, was du willst…
Gautera!
Grüße aus Biberach Riss,
Candid Dauth--
Ein Fußball-Fan? Noch auf der Suche eine Schlafmöglichkeit im Großraum Stuttgart für die WM 2006? Wie wäre es mit Herrenberg, einer gemütlichen Kleinstadt am Rande des Schönbuchs? – Von der Lage her ideal, auch für andere Vorhaben im Urlaub. Ferienwohnungen-Herrenberg.com.
http://cdauth.de/-
Hi,
So wie ich das verstanden habe, ist der linke Rand des Bildes 10 % der Elementbreite minus 10 % der Bildbreite vom linken Rande entfernt.
ja, soweit versteh ich das auch noch, auch wenn mir das gerade nicht gefällt :-(
Hm, du musst es wohl einem anderen Element zuordnen.
genau das wollte ich irgendwie vermeiden, noch ein zusätzliches div oder so was reinzusetzen - je mehr div's, desto lustiger wird's im IE *g*
Ich hab eigentlich bewusst das ganze im Body reingesetzt, da ich mir dann sicher sein kann, dass da die Streifen immer komplett von oben bis unten durchgehen... Wenn ich das in ein div packe, und das div bzw. dessen Inhalt kleiner als der Monitor (bzw. Browserfenster) ist, geht der Hintergrund eben nicht ganz nach unten...
Jedenfalls kriegt man das so direkt nicht hin. Du könntest natürlich ein margin-left mit 10% des Bildes einrichten, aber ob dann das herauskommt, was du willst…
muss ich mal probieren, evtl. klappt's...
E7
-
-
-