• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Es regnet, ist neblig und kalt, alle sind krank und der Chef wird zunehmend cholerisch. Das Thema des Monats ist also folgerichtig --> Das Grau(en)
    Wir sind gespannt, war Euch dazu einfällt! Zum Wettbewerb --> Klick

firefox positioniert hintergrundbild falsch

ma.buso

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
hallo,

firefox und opera stellen bei mir ein hintergundbild falsch (bzw. nicht) dar. dieses soll nur unten und dort über die ganze breite erscheinen, was auch im safari und msie klappt. hier der gekürzte code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
	<style type="text/css">
		body{
			background: #ffffff url(img/mainbg.gif) repeat-x bottom;	
		}	
	
		[....]
	
	</style>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		[....]				
	</body>
</html>

komischerweise klappt es, wenn ich den doctype weglasse. o_O
 
atomfried

atomfried

Leipziger Reinette
Registriert
02.04.05
Beiträge
1.804
ma.buso schrieb:
komischerweise klappt es, wenn ich den doctype weglasse. o_O
Zum Vergrößern anklicken....

wieso "komischerweise"? ohne doctype schaltest du in den quirks modus. wenn du unbedingt xhtml strict verwenden willst dann müsstet du dich da ein wenig informieren was das bedeutet.
 
ma.buso

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
das weiß ich.
komischerweise, weil ich es komisch finde. ich habe zumindest noch nie was davon gehört, dass diese css-auszeichnung im body von xhtml (strict) und html-dokumenten nicht erlaubt ist.
komisch ist auch, dass sowohl top als auch center funktionieren, nur nicht bottom.
weiterhin komisch ist, dass in einem div im selben dokument ein hintergrundbild mit repeat-x bottom richtig dargestellt wird.
 
atomfried

atomfried

Leipziger Reinette
Registriert
02.04.05
Beiträge
1.804
ma.buso schrieb:
ich habe zumindest noch nie was davon gehört, dass diese css-auszeichnung im body von xhtml (strict) und html-dokumenten nicht erlaubt ist.
Zum Vergrößern anklicken....

das habe ich auch noch nicht gehört. es ist wahrscheinlich auch gar nicht so, das es nicht erlaubt ist. es geht doch hier um die darstellung in den verschiedenen browsern, welche wir ja wissen nicht alles darstellen obwohl es "erlaubt" ist.
Ist XHTML strict vorgabe? ansonsten halt mal mit HTML 4 versuchen oder mal die domain im doctype weglassen.
 
  • Like
Reaktionen: ma.buso
ma.buso

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
xhtml transitional ginge auch noch. aber da funktionierts ja auch nicht. auch nicht ohne die domain. werde ich wohl bei den betroffenen browsern den doctype weglassen müssen.
wenn ich statt repeat-x repeat mache zeigt er das hintergrundbild zwar an, aber hier auch nicht wie es bei bottom sein sollte sondern wie bei top.
 
mschoening

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
geht doch wenn mans richtig macht:

Code: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Hello World!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*<![CDATA[*/
        body{
            background: url(img/mainbg.gif) repeat-x bottom left #fff;   
        }   
    /*]]>*/
    </style>    
</head>

<body>
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
 

drok

Klarapfel
Registriert
02.06.07
Beiträge
278
Styles bitte immer in ein externes Stylesheet schreiben und dieses dann einbinden ;)

Probiers mal so:

Code: 
 body {
    background-image:url(...);
    background-repeat:repeat-x;
    background-position:bottom;
    ...
    ...   };
 
ma.buso

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
das style liegt in einem externen stylesheet.
einzeln für background hab ich auch schon versucht, läuft auch nicht.
es ist ja nicht so dass garnix funktioniert. es funktioniert nur bottom repeat-x nicht. :mad:
 

drok

Klarapfel
Registriert
02.06.07
Beiträge
278
Hm wenn dus auch scho so probiert hast wie ich es geschrieben habe, dann muss es aber an irgendwas anderem liegen.
So wie ich es geschrieben habe funzt es beim Firefox eigentlich...

edit: ich glaube IE und manch andere zeigen das besagte Hintergrundbild an den Fuß des Browserfenster bzw des Viewports, obwohl sich "background-position" eigentlich am body orientiert.
Da der body nicht mit dem gesamten browserfenster gleichzusetzen ist kann es da wohl zu schwierigkeiten kommen.

Kannst es ja mal ausprobieren und dem body eine mindestgröße geben.

oder hau das hier noch mit in den Style:

Code: 
background-attachment:fixed;

Dabei sei folgendes zu beachten:

Bemerkung:
Der Internet Explorer bis zur Version 6 kennt background-attachment nur im <body>-Tag. Opera 6, Mozilla 1 und Netscape 7 akzeptieren es auch in anderen Elementen wie Absätzen (<p>) und <div>-Containern. Der Opera 6 fixiert Hintergrundbilder sogar in Tabellenzellen.

Quelle: http://www.css4you.de/background-attachment.html
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
msx3000

msx3000

Martini
Registriert
19.05.05
Beiträge
646
Setz mal den Pfad fürs Bild in Anführungsstriche:

background url("image.gif")
 
  • Like
Reaktionen: ma.buso
mschoening

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
drok schrieb:
Styles bitte immer in ein externes Stylesheet schreiben und dieses dann einbinden ;)

Probiers mal so:

Code: 
 body {
    background-image:url(...);
    background-repeat:repeat-x;
    background-position:bottom;
    ...
    ...   };
Zum Vergrößern anklicken....

Wieso dass denn? Wenn es nur zwei Zeilen hat (wie in diesem Fall ist das wohl egal!). Ich habe es ausporbiert bei mir und es funktioniert nur wenn du
Code: 
background: url(img/mainbg.gif) bottom left repeat-x;

nimmst.
 
mschoening

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
also ich habe da mal darüber nachgedacht! Wie soll das denn gehen wenn der Body immer nur so gross ist wie der Inhalt? Damit ich etwas auf "bottom" bringen kann muss der Browser wissen wie gross der Kasten ist!
Entweder du nimmst einen Footer mit position: absolute und bottom: 0 oder du machst den body so, dass er grösser ist als das Browserfenster.

Mein Vorschlag:
http://stuff.digitalpazzo.com/max/test2.zip
 

drok

Klarapfel
Registriert
02.06.07
Beiträge
278
m.schoening schrieb:
Hi,
also ich habe da mal darüber nachgedacht! Wie soll das denn gehen wenn der Body immer nur so gross ist wie der Inhalt? Damit ich etwas auf "bottom" bringen kann muss der Browser wissen wie gross der Kasten ist!
Zum Vergrößern anklicken....

Eben hier kommt background-attachment:fixed ins Spiel.
Bei der Verwendung orientiert sich das Image, bzw die Position des Images, dann am Viewport (Browserfenster) und nicht am body.
 
ma.buso

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
m.schoening schrieb:
Hi,
also ich habe da mal darüber nachgedacht! Wie soll das denn gehen wenn der Body immer nur so gross ist wie der Inhalt? Damit ich etwas auf "bottom" bringen kann muss der Browser wissen wie gross der Kasten ist!
Entweder du nimmst einen Footer mit position: absolute und bottom: 0 oder du machst den body so, dass er grösser ist als das Browserfenster.

Mein Vorschlag:
http://stuff.digitalpazzo.com/max/test2.zip
Zum Vergrößern anklicken....

habe es jetz auch mit so einer box gemacht, in der das hintergrundbild liegt.
 
mschoening

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
@drok: Deine Lösung ist die beste. Wichtig: man sollte background-attachment nur für das "body"-tag benutzen!

Hier ist das Markup und CSS: LINK
 
  • Like
Reaktionen: ma.buso
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten