webForumDet fria alternativet

image footer problem

4 svar · 224 visningar · startad av echoSwe

echoSweMedlem sedan nov. 20041 467 inlägg
#1

Hej!

1) Jag har suttit och klurat på det här ett tag... Det är så att jag vill lägga till en footer till min sida. Jag sätter footer-divvarna till position:absolute, samt bredd, höjd, bottom, left samt z-index: 1;

body har z-index 0.

#content, #wrapper, #sidebar { z-index: 500 }

Detta är alltså koden:

#sidebar {
	float:right;
	width: 201px;
	background-image:url(../images/layout/sidebarTop4.jpg);
	background-position:right top;
	background-repeat:no-repeat;	
	padding: 35px 20px 10px 0px;
	overflow: hidden;
}
#footer_bottom, #footer_right, #footer_middle {
	position: absolute;
	background-position:top left;
	background-repeat:no-repeat;
	z-index: 1;	
}
#footer_bottom { background-image:url(../images/layout/footer_bottom.gif); 
	width: 567px; height: 89px; bottom: 0; left: 0;
}
#footer_right { background-image:url(../images/layout/footer_right.gif);
	width: 283px; height: 359px; left: 567px; bottom: 0px; background-position:bottom right;
}
#footer_middle { background-image:url(../images/layout/footer_middle.gif);
	width: 75px; height: 54px; left: 493px; bottom: 89px;
}
/* z-indexes */
#sidebar, #content, #wrapper { z-index: 500; }

Ni får kolla på http://194.236.30.84/swedendesign2/ för att få HTML koden.

Problemet är att om man lägger #footer_*** divvarna ovanför #sidebar, så kommer texten längst ner i sidebar inte att döljas - om man däremot lägger #footer_**** under #sidebar döljs texten längst ner.
Detta gäller i Firefox.

I Opera syns inte texten längst ner vilket som. Jag har prövat att lägga #footer divvarna både utanför och ovan, innuti och utanför och under #wrapper.
Inget av detta fungerar...

Någon som kan hjälpa mig? Om ni ska kolla uppbyggnad så rekommenderar jag Firefox, och att sedan trycka CTRL+SHIFT+I när ni är på min sida. Välj sedan CSS Style Rules i dropdownen... (när ni har markerat body noden först)...

För att få ännu bättre koll på uppbyggnaden kan ni använda er av Web Developer Toolbar som hittas här:
http://www.chrispederick.com/work/firefox/webdeveloper/

samt till Opera:
http://nontroppo.org/wiki/WebDevToolbar

(detta kanske hjälper er i längden också)

2) Självklart funkar detta ju inte i Internet Explorer, men jag har en känsla av att om någon kan hjälpa mig att få det att fungera i Firefox och Opera så kommer IE av sig själv - den är alltid lite känslig för CSS fel...

Tack på förhand
//Henke

echoSweMedlem sedan nov. 20041 467 inlägg
#2

Det verkar inte som om någon klarar av det... Finns det inget sätt att sätta två bakgrundsbilder då?

zcorpanMedlem sedan dec. 20042 269 inlägg
#3

Vill du ha två bakgrundsbilder?

html { 
  background: white url(bg1.png) no-repeat fixed bottom right; 
  color: black; 
  height: 100%;
}
body { background: url(bg2.png) no-repeat fixed top left; }
jarvkloMedlem sedan juli 20013 295 inlägg
#4

echoSwe skrev:

Det verkar inte som om någon klarar av det... Finns det inget sätt att sätta två bakgrundsbilder då?

Jovisst!
Här finns några bra artilar att utgå ifrån:
http://www.alistapart.com/articles/fauxcolumns/
http://www.alistapart.com/articles/footers
http://www.alistapart.com/articles/negativemargins/

Se även kommentarer i koden på http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html

echoSweMedlem sedan nov. 20041 467 inlägg
#5

Tack för svaren! Det fungerade bättre att sätta två bakgrundsbilder. Kolla gärna på resultatet - det blev snyggast i portfolio delen.

126 ms totalt · 3 externa anrop · cache AV · v20260731051352-full.56cc9887
0 ms — hämta statistik (cache)
0 ms — hämta forumlista (cache)
123 ms — hämta tråd, inlägg och bilagor (db)