html - Noget om css baggrunde... - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #10841 @ 30.03.07 15:16

Hey.
Det her er min css kode:

Kode

.1 {
width:315px;
height:201px;
position:fixed;
left:0px;
top:0px;
background-repeat: no-repeat; 
background-image: url(1.PNG);
z-index:-100;
}
.2 {
width:411px;
height:248px;
right:20px;
top:0px;
background-repeat: no-repeat; 
background-image: url(2.PNG);
z-index:-100;
}
.3 {
width:301px;
height:366px;
bottom:0px;
right:0px;
background-repeat: no-repeat; 
background-image: url(4.PNG);
z-index:-100;
}
.4 {
width:388px;
height:315px;
bottom:0px;
left:0px;
background-repeat: no-repeat; 
background-image: url(3.PNG);
z-index:-100;
}

Det bliver vist således:

Kode

<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>

Meningen med dette er, at det skal skabe en baggrund bestående af 4 billeder (grunden til at jeg ikke bare laver én baggrund, og sætter den i body, er fordi at de forskellige dele skal ligge i hjørnene, lige meget hvor stor ens browser vindue er)

Der er to problemer.
1) Det vil kun du i internet explorer (ikke i firefox?!

)
2) Det er ikke "fixed", eller hvad man nu kalder det. Altså, det skal ikke følge med, når man scroller, og det gør det.

Jeg har virkelig brug for noget hjælp

Andy

6 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #10925 @ 30.03.07 15:54

Du mangler quotes omkring dine url's til background-image
du skal skrive background-image:url("3.png");

Jeg mener at Explorer ikke forstår position:fixed;, den er vist ikke understøttet.

Hvorfor giver du dine classes en z-index på -100? Baggrundsbilledet kommer ikke til at stå foran indholdet i din div.

Hvad mener du med at de ikke skal følge med når man scroller?

Hvorfor giver du kun position til din øverste div? Du kan ikke bruge left,right,top,bottom, medmindre du har angivet en postition i din div.

Det er dårlig programmeringspraksis at starte navne med tal. Kald dem a1,a2,a3. Eller a,b,c,d

Bruger #10113 @ 30.03.07 16:06

147

Hmm, du kan lære hvad du skal bruge her:

Lær om baggrunde

Lær om positionering

Bruger #10216 @ 31.03.07 23:37

4.283

baah... ud med positionering...

Dutter ikke så godt i out-of-the-box stil med FF vs. IE, hehe...

eksempel:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<style>
			.dlg1 { margin: 10px; }
			.dlg1 .tl { background: url('top-left.png') top left no-repeat; }
			.dlg1 .tr { background: url('top-right.png') top right no-repeat; }
			.dlg1 .bl { border-left: 1px solid; border-top: 1px solid; border-right: 1px solid;  background: url('bottom-left.png') bottom left no-repeat; }
			.dlg1 .br { border-bottom: 1px solid; background: url('bottom-right.png') bottom right no-repeat; }
			.dlg1 .container { margin: 5px; }
			.dlg1 .contents { background: #fff; }
		
		
			.dlg2 { margin: 10px; }
			.dlg2 { position: relative; border: 1px solid; }
			.dlg2 .tl { background: red; width: 5px; height: 5px; top: 0px; left: 0px; position: absolute; }
			.dlg2 .tr { background: red; width: 5px; height: 5px; top: 0px; right: 0px; position: absolute; }
			.dlg2 .bl { background: red; width: 5px; height: 5px; bottom: 0px; left: 0px; position: absolute; }
			.dlg2 .br { background: red; width: 5px; height: 5px; bottom: 0px; right: 0px; position: absolute; }
			.dlg2 .container { margin: 5px; }
			.dlg2 .contents { background: #fff; }
		</style>
	</head>
	<body>
		<div class="dlg1">
			<div class="tl"><div class="tr"><div class="bl"><div class="br">
				<div class="container">
					<div class="contents">
						asdasdasdasd
					</div>
				</div>
			</div></div></div></div>
		</div>
		<div class="dlg2">
			<div class="container"><div class="contents">asdasdasdasdad</div></div>
			<div class="tl"></div>
			<div class="tr"></div>
			<div class="bl"></div>
			<div class="br"></div>
		</div>
	</body>
</html>

Bruger #11736 @ 09.08.07 19:54

Den her virker i internet explorer ..

Kode

bg-properties="fixed"

Bruger #10841 @ 30.03.07 16:40

@ Simon
Okay, lad mig starte fra en ende af:

Det med quotesne gjorde ingen forskel (hverken i ie eller firefox)

position: fixed; var mit forsøg på at få baggrunde til at lade være med at scrolle med indholdet.

jeg giver dem z-index på -100, bare så jeg ved at de ligger baggerst. Hvem sagde at indholdet skulle ligge i div'sne?

Jeg mener at baggrunden skal være fast, og ikke scrolle emd indholdet. (du skal se de fire div's som én baggrund)

som sagt: et forsøg på at få den til ikke at scrolle med.

1,2,3,4 var eksempler, vi kan godt kalde dem one, two, three og four, hvis det gør dig mere tryg! hehe

@Simin alias palde pind:

Jeg tror at jeg er blevet undervurderet lidt..
Det skal lige siges, at mit største problem er, at det ikke dur i firefox! Jeg kan godt finde ud af css.

Indlæg senest redigeret d. 30.03.2007 16:45 af Bruger #10841

Bruger #10113 @ 31.03.07 12:41

147

Du skal give dem en position som fks:

Kode

.whatever {
position: absolute;
top: 0px;
left: 0px;
}

Og ikke bare:

Kode

top: 0px;
left: 0px;

Noget om css baggrunde...

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler