Unfilled placing

[divinedesigns1]

hey sup guys, yeah today i have a css question which stroke my curiousity, on my site theres a few pages that doesnt have enough information on them, so the template doesnt fix that specific page, how do i make the high of the template fix the screen according to the text amount? http://www.divinedesigns1.com/services.html <---- right below the footer, you can see the background, how do i make the background not show even when i dont have enough text on that specific area?

[Ingolme]

I think you might be looking for "sticky footer"If you search for that you should find some explanations on how to do it.

[divinedesigns1]

thank you foxy

[divinedesigns1]

ok i got that part complete works good, but now i have a big gap between the footer and the content is there a book that shows you how to create html templates? yes i would read it self learn, but im missin knowledge how do i fix the content? do i have to do .content { bottom:0; width:1024px;} ? or do i have to do this to the wrapper?

[Ingolme]

The wrapper's background color or image should extend to the bottom of the page all the way to the footer. At least with the techniques I've researched.

[divinedesigns1]

can you share that link? the ones i found only showing how to do the footer only

[Ingolme]

Using firebug I edited this page to give the wrapper a background-color and it goes all the way down to the footer: http://ryanfait.com/sticky-footer/

[divinedesigns1]

thanks foxy

[divinedesigns1]

i tried that, its not working at all for me sigh

[Ingolme]

Read this full article and try to understand what is going on: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ If you just try to find code to put into your site you won't understand how to use it.

[divinedesigns1]

i did read it, then i follow step by step, which didnt work out too well but ill keep trying prolly just missing something

[divinedesigns1]

unless its JS i dont copy and paste code into my website

[dsonesuk]

html, body { height: 100%;} html {overflow-y:scroll;} /* to prevent content jumping right to left when scrollbar appears optional */ #wrapper {	background: none repeat scroll 0 0 #181818;	margin-left: auto;	margin-right: auto;	min-height: 100%;	overflow: hidden;	width: 1024px;}

remove footer from wrapper and place outside at bottom

#footer {	background-image: url("../layouts/footer.jpg");	background-repeat: repeat-x;	clear: both;	height: 43px;width:1024px;margin:-43px auto 0; /* top  minus height of footer */}

you need to add padding to .entry to allow for space to be occupied by footer

.entry {   float: right;	padding: 5px 10px 48px;	text-align: justify;}

Edited April 22, 2012 by dsonesuk

[dsonesuk]

you also have css errorsfont-weight: 300px;no spaces between : and pseudo class name.smallmenu ul li a: visited.footnav ul li a: visited no colon separating padding from unit valuespadding 0px 5px 0px 5px;

[divinedesigns1]

you also have css errorsfont-weight: 300px; no spaces between : and pseudo class name .smallmenu ul li a: visited .footnav ul li a: visited no colon separating padding from unit values padding 0px 5px 0px 5px;

how you saw my css?

[dsonesuk]

All css is available for anyone to access, and i use firefox web developer addon toolbar which highlights when errors are found, and when you click it, it shows where the errors are located.

[divinedesigns1]

ok

[divinedesigns1]

i got it working woot woot 0.o