nicht angemeldet
ist %-Berechnung bei body-bg-position anders als bei div?
MudGuardHallo,
ich möchte ein Bild (logo.gif) über einen grauen senkrechten Balken (grey.gif) legen. Beide sollen 8% vom linken Bildschirmrand erscheinen.
Die zwei Bilder werden aber nur deckungsgleich (in der Breite), wenn ich pixel-Angaben mache.
Bei %-Angaben ist logo.gif nach rechts verschoben.
Wie kann man das lösen?
Hier der code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
html, body {
height:101%; /* blendet vert-scrollbalken permanent ein */
width:100%;
}
body {
background-color: #eee;
font-size: 100.01%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000000;
margin: 0; padding: 0;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
background-image:url(../Grafiken/grey.gif); background-repeat:repeat-y;
background-position:8% 0px; background-attachment:fixed;
}
div#logo {
position:absolute;
top:5%; left:8%;
}
</style>
</head>
<body>
<div id="logo">
<img src="../Grafiken/logo.gif" style="width:150px; height:167px; border:1px solid black;" alt="">
</div>
</body>
</html>
Kann mir jemand helfen?
Gruss
-
Hi,
Beide sollen 8% vom linken Bildschirmrand erscheinen.
Der Bildschirmrand ist für CSS nicht greifbar.
Die zwei Bilder werden aber nur deckungsgleich (in der Breite), wenn ich pixel-Angaben mache.
Bei %-Angaben ist logo.gif nach rechts verschoben.Bei Hintergrundbildern bedeutet x%, daß ein Punkt, der im Bild bei x% Breite bzw. Höhe liegt, auf einen Punkt, der im Element bei x% Breite bzw. Höhe liegt, zu liegen kommt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Der Bildschirmrand ist für CSS nicht greifbar.
aber bei pixel-Angabe funktioniert es.
Bei Hintergrundbildern bedeutet x%, daß ein Punkt, der im Bild bei x% Breite bzw. Höhe liegt, auf einen Punkt, der im Element bei x% Breite bzw. Höhe liegt, zu liegen kommt.
ich habe vergessen zu schreiben, dass beide Bilder 150px breit sind. Also sollte doch Hintergrundpunkt x% bei "background-position:8% 0px;" identisch sein mit Positionspunkt für das Bild "position:absolute;... left:8%;". Oder verstehe ich da was nicht?
Gruss
-
Hallo
ich habe vergessen zu schreiben, dass beide Bilder 150px breit sind. Also sollte doch Hintergrundpunkt x% bei "background-position:8% 0px;" identisch sein mit Positionspunkt für das Bild "position:absolute;... left:8%;". Oder verstehe ich da was nicht?
Es ist doh egal wie gross beide bilder sind. Die setzt Du ja nirgends in Bezug zueinander. Wie gross ist den der Container in dem die Bilder sind?
Auch Gruss
-
Hi,
Der Bildschirmrand ist für CSS nicht greifbar.
aber bei pixel-Angabe funktioniert es.Nein, garantiert nicht - der Bildschirmrand ist für CSS unerreichbar.
Bei Hintergrundbildern bedeutet x%, daß ein Punkt, der im Bild bei x% Breite bzw. Höhe liegt, auf einen Punkt, der im Element bei x% Breite bzw. Höhe liegt, zu liegen kommt.
ich habe vergessen zu schreiben, dass beide Bilder 150px breit sind. Also sollte doch Hintergrundpunkt x% bei "background-position:8% 0px;" identisch sein mit Positionspunkt für das Bild "position:absolute;... left:8%;". Oder verstehe ich da was nicht?
Nein, natürlich nicht.
Es muß sich eine Abweichung von 8% von 150Pixeln, also 12 Pixeln, ergeben, weil im einen Fall die linke Kante, im anderen Fall ein Punkt, der sich 8% der Bildbreite innerhalb des Bildes, also bei 150Pixeln Bildbreite 12 Pixel von der linken Kante entfernt, befindet, auf dieselbe horizontale Position ausgerichtet wird.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Nein, garantiert nicht - der Bildschirmrand ist für CSS unerreichbar.
Vielleicht sollte ich besser sagen: body-Rand statt Bildschirmrand. Also wenn ich "8%" mit z.B. "200px" ersetze (s. geposteter code), dann liegen beide - wie ich es gerne hätte - übereinander.
Es muß sich eine Abweichung von 8% von 150Pixeln, also 12 Pixeln, ergeben, weil im einen Fall die linke Kante, im anderen Fall ein Punkt, der sich 8% der Bildbreite innerhalb des Bildes, also bei 150Pixeln Bildbreite 12 Pixel von der linken Kante entfernt, befindet, auf dieselbe horizontale Position ausgerichtet wird.
Ja, das entspricht etwa der unerwünschten Darstellung. Aber ich verstehe nicht, wieso es dann bei pixel-Werten geht.
Wie gross ist den der Container in dem die Bilder sind?
Der Container ist gleich gross wie das Bild. Ich habe jetzt die div-Angaben noch um die Werte Breite/Höhe ergänzt. Ändert aber nichts.
-
Hallo,
Ja, das entspricht etwa der unerwünschten Darstellung. Aber ich verstehe nicht, wieso es dann bei pixel-Werten geht.
Weil bei Pixel-Werten zur Bestimmung der Psition bei beiden Malen der Linke Bildrand berücksichtigt wird. Wenn du aber Prozent-Werte nimmst, dann fängt ist der linke Rand vom Bild bei 8% des Verfügbaren Platzes ausgerichtet, während beim Hintergrundbild nicht vom Linken Bildrand gemessen wird, sondern von 8% des Hintergrundbildes.
Zur Verdeutlichung: Angenommen du hättest 50% definiert. Das Hintergrundbild wäre nun völlig zentriert, während das <img> bzw <div> den linken Rand bei 50% hat und somit weiter rechts liegt.
Jonathan
-
Der Container ist gleich gross wie das Bild. Ich habe jetzt die div-Angaben noch um die Werte Breite/Höhe ergänzt. Ändert aber nichts.
Gut. Der Container mit dem Image is also so gross wie das Bild.
Und wie gross ist der Container in dem sich das Hintergrundbild befindet, dessen Pixel der bei 8% des Bildes liegt auf den Pixel der bei 8% seines Containers liegt, befindet? (boah, ein echt bloeder Satz... Ich gebs zu!)
Wer meinen Satz da oben versteht, sieht auch Dein Problem.
-
Mann, ich hal;t meinen eigenen Senf nicht mehr aus!
Hier mal in leicht:
denk dir 2 Spielkarten.
Die eine (das Div) legst du so auf einen Tisch (den body) dass Ihre Kante genau bei 8% der Tischbreite liegt.
Die zweite legst Du auch bei genau 8% unter die erste. Aber nicht mit Ihrer Kante sondern an einem Punkt der selber 8% von ihrer Kante entfernt ist.
Sie liegt also etwas vor der ersten Karte, weil ihre 8% natuerlich vor dem Punkt sind an dem beide Karten auf dem Tisch fixiert sind.-
Wenn ich das richtig verstehe, kann ich mein Problem also mit CSS nicht lösen (ausser ich nehme einen pixel-Wert)?
Gruss
-
Hallo,
Wenn ich das richtig verstehe, kann ich mein Problem also mit CSS nicht lösen (ausser ich nehme einen pixel-Wert)?
Du kannst z.B. 2x eine Hintergrundgrafik verwenden. Was genau möglich ist, hängt davon ab, was genau du wie erreichen willst.
Jonathan
-
Nun, du hast niemals gesagt, was genau dein Problem ist. Natuerlich kannst du 2 Grafiken uebereinanderlegen.
Wenn es Deine Absicht ist eine Spalte im body zu simulieren und genau ueber dieser Spalte ein Div zu haben und dass bei variabler Breite. Dann geht das nicht so weil du bei % Angeban eben diesen hintergrund bei x% auf Nullwert legen bekommst.
Du kannst da Problem umgehen indem Du auf % Angaben verzichtest. darfst den Spaltenhintergrund gern als solchen benutzen. Mochtest Du aber einen variablen Abstand zum Rand des Bodys muesstest Du einen Container um deine Seite legen. Diesen Container kannst Du zentrieren 15% von irgendeinem Rand plazieren, ... Was Du magst. Dem Container gibst Du dann einfach deine Spaltengrafik als Hintergrund (natuerlich ohne diese zu verschieben) und dann klappts.
Du brauchst also nur einen eigenen Bodycontainer, den du dann im HTML Body plazierst. (8% vom Rand weg)
-
Hallo
ich musste gestern nacht meine Arbeit unterbrechen. Komme erst jetzt dazu, weiter zu lesen.
...Mochtest Du aber einen variablen Abstand zum Rand des Bodys muesstest Du einen Container um deine Seite legen. Diesen Container kannst Du zentrieren 15% von irgendeinem Rand plazieren, ... Was Du magst. Dem Container gibst Du dann einfach deine Spaltengrafik als Hintergrund (natuerlich ohne diese zu verschieben) und dann klappts.
Du brauchst also nur einen eigenen Bodycontainer, den du dann im HTML Body plazierst. (8% vom Rand weg)
Ja genau, jetzt funktioniert es.
Vielen Dank an alle.Gruss
-
-
-
-
-
-
-
-