Forums

dagash

hi ..
i have a problem with my footer.. i want to make bar that expand according to screen .
i make one for header by using background in body div , but i didn’t know how can i put another background at bottom page .

this is my header :my header
this is my footer :ny footer

how can i do that ...?

sheepysheep60

Pretty straight forward, the CSS would look like this:


.inside
{
  width:960px;
  margin:0 auto;
}

.header
{
  background:url(path/to/bar/image.jpg) repeat-x;
  width:100%; /* probably not necessary unless you have reset anything*/
}

and the HTML


<div class="header">
	 <div class="inside">
 	 	 Content of your header goes here
	 </div>	 
</div>

So the header now stretches the whole screen, yet the text within it stays centered to a fixed width. Cheers! Dave

dagash

that is for header , i am already did that , but my problem is on footer ,it is limited .


<body>
<div id="wrap">

<div id="header">
</div>

<div id="content">
</div>

<!-- my problem here in the footer , i didnt know how to make div id="footerbar" stretch the whol screen -->


<div id="footer"><!-- footer limited by 960px -->
	 <div id="footermainarea">
	 	 <div id="rightfooter">
	 	 </div>
	 	 <div id="midfooter">
	 	 </div>
	 	 <div id="leftfooter">
	 	 </div>

	 </div>
	 
	 <div id="footerbar">
	 </div>
</div>

</div>
</body>

because footer is limited by 960px , so everything inside it is limited among this range ,,

i think i should put the div=footerbar outside the div=footer , then style it ..

anyone have another idea ...??

timmey

you should wrap the footer div like u mentioned.

http://jsfiddle.net/BLwgJ/200/

dagash

thank u very much TIMMEY ..

this my first time with < jsfiddle.net > ,, but it is more simple and usefull ..

treehouse : what would you like to learn today?

Forums

how can i set a background at footer to expand according to screen size ..?