Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > CSS
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 10-28-2009, 07:25 PM
  #1
forever
Champion (Level 13)
 
Join Date: Mar 2005
Posts: 213
iTrader: (0)
forever is on a distinguished road
Question flexible footer height: 100% ?

Heres an example:
http://bit.ly/14U0vh

When the content is small it reveals a gap between the grey footer and the green background - I want to fill this gap with the grey footer background..

height: 100% doesnt work?

Does anyone know how to do this?

Thanks

Last edited by forever : 10-29-2009 at 08:56 AM.
forever is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 10-31-2009, 04:52 AM
  #2
forever
Champion (Level 13)
 
Join Date: Mar 2005
Posts: 213
iTrader: (0)
forever is on a distinguished road
Question

is this even possible? BonRouge? Pegasus? coothead? Please can you let me know?
forever is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 10-31-2009, 02:33 PM
  #3
Pegasus
Extremely Flighty Admin
 
Pegasus's Avatar
 
Join Date: Nov 2001
Location: 35º South of Santa Claus
Posts: 21,472
iTrader: (0)
Pegasus is a name known to allPegasus is a name known to allPegasus is a name known to allPegasus is a name known to allPegasus is a name known to allPegasus is a name known to all
The only thing I can see that might affect your footer height is in the body CSS. You have a line-height without a measurement. Try adding that. Remember, pixels can't use decimals, whole numbers only.
__________________


Decaf is the root of all evil...
HTMLForums Awards 2008
Pegasus is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-01-2009, 07:14 AM
  #4
forever
Champion (Level 13)
 
Join Date: Mar 2005
Posts: 213
iTrader: (0)
forever is on a distinguished road
Question

good spot but that doesn't help answer this question

I want the footer to automatically change height if the content is small (see example link) if you click on the home page you can see the footer is in the correct position and doesn't reveal a gap showing the coloured body background. If the content is small then I want the footer's grey background to fill the gap and not show the background?

its no big deal I was curious to know if it is possible?
forever is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-01-2009, 12:32 PM
  #5
Excavator
Lord (Level 16)
 
Join Date: Dec 2006
Location: Alaska
Posts: 737
iTrader: (0)
Excavator is on a distinguished road
Hello forever,
You just need to nest another div so you can add a background color.
Like this:
themes.css -
Code:
/************** blue **************/
body.blue{
	background: #323232;
}
#wrap {
	background:url(http://ukacoach.pixelscene.net/assets/images/bg-blue.jpg) no-repeat top center #323232;
}
body.blue #logo{
	background:url(../images/logo-uka-blue.png) no-repeat;
}
body.blue a, body.blue a:link, body.blue a:visited, body.blue a:hover, body.blue a:focus, body.blue a:active,
body.blue div#latest_news ul li,
body.blue #box-content #box-search a,
body.blue #favourites_table th a,
And add #wrap to your markup like this -
Code:
<div id="wrap">
<p class="accessible">
<a href="/privacy" title="Privacy" accesskey="1">Privacy</a>
<a href="/disclaimer" title="Disclaimer" accesskey="2">Disclaimer</a>
<a href="/site/sitemap" title="Sitemap" accesskey="3">Sitemap</a>
<a href="http://www.uka.org.uk/sponsors/" title="UKA Sponsors" access

...

<label for="password">Password</label>
	<input name="password" id="password" value="" maxlength="32" type="password">

	<button type="submit" class="submit"><strong class="accessible">Login</strong></button>
	<ul id="forgot">
		<li><a href="/members/lost_username/" title="Link opens Forgot username?">Forgot username?</a></li>
		<li><a href="/members/lost_password/" title="Link opens Forgot password?">Forgot password?</a></li>
	</ul>
	
	</fieldset>
	</form>
	
	</div>

	
	</div>
</div>
<!-- END controls -->

<script type="text/javascript" src="/assets/js/jquery.newsTicker.js"></script>
<!--end wrap--></div>
__________________
Validate often, DURING development! Use it like a splelcheker.
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-01-2009, 05:23 PM
  #6
forever
Champion (Level 13)
 
Join Date: Mar 2005
Posts: 213
iTrader: (0)
forever is on a distinguished road
Excavator - that wouldnt work because bg-blue.jpg has to stretch beyond the normal monitor resolution if we specified a height and width on #wrap it would give the view port scroll bars.

Sorry if I haven't been cleared your see the gap if you zoom out
forever is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote

Reply
KEEP TABS
SPONSORS
 
Boxedart
 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 03:57 AM.

   

Mascot team created by Drawshop.com

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.