position:absolute

[deumling]

Hallo,
ich habe folgendes Problem:
ich will ein zweites Hintergrundbild einbringen dazu habe einem Img in CSS die Eigenschaften height:100%; weight:20%; position:absolute; left:0%; bottom:0%; z-index:-1; gegeben.

Opera zeigt alles korekt an, Morzilla zeigt es gar nicht an, der Internet Explorer gibt dem Bild die Höhe des Fensters und setzt unten links ans Fenster, wenn man dann runterscrollt wird das Bild mit gescrollt(was am schlimmstenist, die anderen Fehler sind mir erstmal egal).
Was Netscap macht weiß ich nicht.

Ich bastele schon eine ganze Weile daran rum, ich denke es ist eine echte Kopfnuss.

Im voraus vielen Dank für alle Tipps.

[parkbanksitzer]

Hi Deumling! <img src="http://parkbanksitzer.milten.lima-city.de/smilies/smile.gif" border="0" alt="">

Wenn es Dich schockiert, daß das Bild mitscrollt, dann verwechselst Du offenbar die Angabe position:absolute mit der Angabe position:fixed !

Allerdings bringt Dich das auch nicht weiter, weil der IE und Netscape das soweieso nicht interpretieren.

Siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position <img src="http://parkbanksitzer.milten.lima-city.de/smilies/guckstdu.gif" border="0" alt="">

Außerdem - bei Angaben mit Höhe und Breite mit 100% muß man etwas vorsichtig sein. Du darfst nicht vergessen, diese 100% beziehen sich immer auf das Elternelement des entsprechenden Elements. Ist dies der gesamte Body, denn empfiehlt es sich, in den css-Angaben ein

body,html
{
width:100%;
height:100%;
}

zu setzen. Und zum Schluß : War Deine Seite Teilnehmer bei Weight-Watchers, weil sie nur mehr 20% wiegt? ( " weight:20% " ) <img src="http://parkbanksitzer.milten.lima-city.de/smilies/lachen.gif" border="0" alt="">

Du meinst sicher width, hm?

Liebe Grüße

parkbanksitzer <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs02.gif" border="0" alt="">

[duemling]

Vielen Dank für die Hilfe, aber die Angabe 100% erzielt keine Wirkung.

Trotz dem danke.

[parkbanksitzer]

Hi Deumling! <img src="http://parkbanksitzer.milten.lima-city.de/smilies/smile.gif" border="0" alt="">

Hast Du vielleicht einen Link für uns, wo man sich diese Seite mal anserhen kann? Hier so theoretisch drüber zu plaudern, ist etwas mühsam.

Liebe Grüße

parkbanksitzer <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs02.gif" border="0" alt="">

[Maximilian Baumgart]

Hallo,

Hi.

ich habe folgendes Problem:
ich will ein zweites Hintergrundbild einbringen dazu habe einem Img in CSS die Eigenschaften height:100%; weight:20%; position:absolute; left:0%; bottom:0%; z-index:-1; gegeben.

Ersteinmal gibt's in CSS keine Eigenschaft "weight", du meintest wohl "height" für die Höhe ...

Opera zeigt alles korekt an, Morzilla zeigt es gar nicht an, der Internet Explorer gibt dem Bild die Höhe des Fensters und setzt unten links ans Fenster, wenn man dann runterscrollt wird das Bild mit gescrollt(was am schlimmstenist, die anderen Fehler sind mir erstmal egal).

Definiere mal "alles korrekt"... Dass der IE das Bild links unten platziert, ist doch völlig ok, so hast du's doch per CSS festgelegt ("left:0%; bottom:0%;"). Und es könnte durchaus korrekt sein, dass der IE das Bild auf Fensterhöhe ausdehnt, wenn deine Seite selbige Ausdehnung hat, da du mit "height:100%;" die Bildhöhe auf die der gesamten Seite festgelegt hast. Das Mitscrollen des Bildes ist aber tatsächlich inkorrekt, aber evtl. durch die anderen Fehler bedingt. Ebenso das Nichtanzeigen im Mozilla, das könnte z.B. am z-index oder an der falsch deklarierten height-Eigenschaft liegen. Poste doch mal die URI deiner Seite, das wäre hilfreich ...

Ich bastele schon eine ganze Weile daran rum, ich denke es ist eine echte Kopfnuss.

Ich hoffe, dir schon mal teilweise geholfen zu haben :).

Im voraus vielen Dank für alle Tipps.

Bitte :).

MfG,
Max.

[Maximilian Baumgart]

Hi,

Ersteinmal gibt's in CSS keine Eigenschaft "weight", du meintest wohl "height" für die Höhe ...

Uups, ich meinte, das du wohl eher "width", also die Breite, angeben wolltest ...
MfG,
Max.

[Duemling]

hier der Inhalt der HTML-Datei:

<html>
<head>
<link rel="stylesheet" type="text/css" href="haupt.css">
</head>
<body>
<h1>Viel Text</h1>
Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>
Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>Ganz viel Text, damit man den unerwunschten Effekt beim scrolen sieht.<br>
<img src="streifen.gif" class="back">
</body>
</html>

Ende der Datei

Die CSS-Datei:

body {margin-left:30px;
 margin-right:5px;
 color:#00;
 font-family:arial;
 font-size:100%;
 font-weight:bold;
 background-color:#FBFAF1;
 background-image:url(../etc/verlaufl.gif);
 background-repeat:repeat-y;
 background-position:right;}
img {border:0;}
h1,h2 {margin:0%;
 margin-left:-10px;
 display:block;}
h1 {font-size:200%;
 margin-bottom:20px;}
h2 {font-size:130%;
 text-decoration:underline;
 margin-top:10px;
 margin-bottom:3px;}
.back {position:absolute;
 left:0%;
 bottom:0%;
 z-index:-1;}

Ich habe auch schon probiert die z-index Eigenschaft zu änder,aber das Bild wird dann über den Text gesetzt auch bein ander Browsern.

Nachtrag: Netscap zeigt das Bild auch nicht an.

[duemling]

Vielmahls Entschuldigung der deumling ist nur durch einen Buchstabenverdreher entstanden, es heißt eigentlich duemling.

[ichen]

Moin!
anderer Lösungsansatz:
definiere ein div mit höhe und breite und positioniere des absolut. setzte nun in diesen div dein 2. hintergrundbild. warum di die nicht gleich in einer grafik vereinst...?
tschüss ichen

[Fritz]

Hallo,

Hallo,
ich habe folgendes Problem:
ich will ein zweites Hintergrundbild einbringen dazu habe einem Img in CSS die Eigenschaften height:100%; weight:20%; position:absolute; left:0%; bottom:0%; z-index:-1; gegeben.

es gibt kein weight
es gibt keinen negativen z-index
(wenn verschiedene Browser doch irgend was anzeigen, dann wird das dadurch nicht richtiger)
die Prozent bei left und bottom kannst Du weglassen. 0 ist genauso viel wie 0%

Gruß Fritz

[MudGuard]

Hi,

es gibt keinen negativen z-index

Also das sehe ich anders.
z-index ist definiert als (siehe http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-z-index)

'z-index'
    Value:   auto | <integer> | inherit
    Initial:   auto
    Applies to:   positioned elements
    Inherited:   no
    Percentages:   N/A
    Media:   visual

For a positioned box, the 'z-index' property specifies:

1. The stack level of the box in the current stacking context.
   2. Whether the box establishes a local stacking context.

Values have the following meanings:

<integer>
    This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is '0'.
auto
    The stack level of the generated box in the current stacking context is the same as its parent's box. The box does not establish a new local stacking context.

Hier gibt es also keine Einschränkung für integer-Werte.

Also muß noch bei <integer> (http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-integer) nachgeguckt werden. Da steht:

4.3.1 Integers and real numbers

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign.

Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value.

Hier wird also grundsätzlich erlaubt, auch negative Werte anzugeben - Abweichungen davon wären bei der jeweiligen Eigenschaft definiert.
Gibt es aber nicht, s.o. ==> negative z-index Werte sind erlaubt.

cu,
Andreas

[Fritz]

Hallo Andreas,

es gibt keinen negativen z-index
Also das sehe ich anders.

"Praxis ist, wenn's funktioniert, und keiner weiß, warum."

Da bin ich wohl einem bug meines "Entwicklungs-browsers" aufgesessen.
_Mein_ Firefox 0.9.2/win98 zeigt folgendes mit z-index:-1 positionierte div nicht an (oder ist da doch ein Fehler drin?):

<!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>Test</title>

<style type="text/css">
#mitte {position:absolute; z-index:-1;}
</style>

</head>

<body>

<div id="mitte">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</body>
</html>

Gruß Fritz

[MudGuard]

Hi,

es gibt keinen negativen z-index
Also das sehe ich anders.

"Praxis ist, wenn's funktioniert, und keiner weiß, warum."
Da bin ich wohl einem bug meines "Entwicklungs-browsers" aufgesessen.
_Mein_ Firefox 0.9.2/win98 zeigt folgendes mit z-index:-1 positionierte div nicht an (oder ist da doch ein Fehler drin?):
<style type="text/css">
#mitte {position:absolute; z-index:-1;}
</style>

Das zeigt doch aber gerade, daß der negative z-index funktioniert.
Das div wird  hinter den (undurchsichtigen) body gelegt.

Würde der negative z-index nicht funktionieren (also ignoriert werden), wäre der initial value auto, also derselbe wie beim Elternelement body und das div sichtbar.

cu,
Andreas

[Fritz]

Hallo,

es gibt keinen negativen z-index
Also das sehe ich anders.

"Praxis ist, wenn's funktioniert, und keiner weiß, warum."
Da bin ich wohl einem bug meines "Entwicklungs-browsers" aufgesessen.
_Mein_ Firefox 0.9.2/win98 zeigt folgendes mit z-index:-1 positionierte div nicht an (oder ist da doch ein Fehler drin?):
<style type="text/css">
#mitte {position:absolute; z-index:-1;}
</style>

Das zeigt doch aber gerade, daß der negative z-index funktioniert.
Das div wird  hinter den (undurchsichtigen) body gelegt.

also darauf muß man erst mal kommen!
Zumindest aber haben wir damit die Lösung für deumlings ursprüngliche Frage:

Opera zeigt alles korekt an, Morzilla zeigt es gar nicht an, der Internet Explorer ...

(der Op weiß wohl nicht, daß der body undurchsichtig ist, und über den IE schweig ich mich besser aus)
PS: wie krieg ich denn den body im Moz durchsichtig? Ich weiß, die Frage ist pervers. Wahrscheinlich würden dann die Innereien meines Monitors sichtbar ;-)
Jetzt im Ernst:
Dann ist also ein negativer z-index zwar erlaubt, aber recht sinnlos. Oder sehe ich das falsch.

Gruß Fritz