Ricklord Posted August 3, 2006 Share Posted August 3, 2006 Hi Guys, Im trying to align a 10px high bar to the bottom of the screen with a 50px gap. example of what im after is [url=http://www.creativecogs.co.uk/web_design/packages.html]http://www.creativecogs.co.uk/web_design/packages.html[/url] this is the position i want but the css rule im using for it is wrong becuase it does not hold its position correctly. Probably becuase i used position relative. Anyone know what position i should use and if you could correct my code below i would appreciate it. I need it to work in IE and FF.[code]#bottom_bar { position:relative; padding-bottom : 0px; width : 100%; height: 10px; background-image:url(images/bottom_bar.gif); background-repeat:repeat-x;}[/code]The above code works on the site i have used as an example for some reason but not a my new site and it moves up and down the page anyway without keeping the bottom padding to 50px.Cheers Rick Quote Link to comment https://forums.phpfreaks.com/topic/16444-alignment-problems/ Share on other sites More sharing options...
Ifa Posted August 3, 2006 Share Posted August 3, 2006 have you tried margin-bottom? Quote Link to comment https://forums.phpfreaks.com/topic/16444-alignment-problems/#findComment-68509 Share on other sites More sharing options...
Ricklord Posted August 3, 2006 Author Share Posted August 3, 2006 What instead of padding?what do i need in teh code, would i still use poistion relation or change back to absolute?Rick Quote Link to comment https://forums.phpfreaks.com/topic/16444-alignment-problems/#findComment-68513 Share on other sites More sharing options...
AndyB Posted August 3, 2006 Share Posted August 3, 2006 If all preceding floats have been cleared, then the 'bottom' will appear at the end of the page assuming that's where it is in your html code. You shouldn't need position at all. Quote Link to comment https://forums.phpfreaks.com/topic/16444-alignment-problems/#findComment-68522 Share on other sites More sharing options...
Ricklord Posted August 3, 2006 Author Share Posted August 3, 2006 Still can't get it at the bootom, im sure im doing something wrong but cant spot what. here is my html code [code]<body><div id="banner"></div><div id="top_bar"></div><div id="logo"></div><div id="processor"></div><div id="navigation"><a href="index.html">HOME</a> <a href="services.html">SERVICES</a> <a href="case_studies.html">CASE STUDIES</a> <a href="about_us.html">ABOUT US</a> <a href="contact_us.html">CONTACT US</a></div><div id="news"></div><div id="content"></div><div id="bottom_bar"></div></body>[/code]here is my CSS Code[code]body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color:#F7F7F7;}#banner { position:absolute; width:100%; height:150px; padding: o o o o; background-image:url(images/top_background.gif); background-repeat:repeat-x; z-index:10;}#top_bar { position:absolute; width:100%; height:30px; top: 150px; background-image:url(images/top_bar.gif); background-repeat:repeat-x; z-index:11;}#processor { position:absolute; width:100%; height:175px; background-image:url(images/processor.gif); background-position:right; background-repeat:no-repeat; z-index:12;}#logo { position:absolute; width:325px; height:150px; padding: 0 0 0 20px; background-image:url(images/logo.gif); background-repeat:no-repeat; z-index:13;}#navigation { position:absolute; width:550px; height:30px; top:150px; padding:5px 0 0 0; z-index:14;}#navigation a { font-family:Tahoma; font-size: 13px; font-weight: bold; color:#287683; padding:0 0 0 40px; text-decoration: none; background-color: transparent;}#navigation a:hover { font-family:Tahoma; font-size: 13px; font-weight: bold; color:#0F2D73; padding:0 0 0 40px; text-decoration: none; background-color: transparent;}#news { position:absolute; width:190px; height:500px; top:200px; background-image:url(images/news_background.gif); background-repeat:no-repeat; z-index:15;}#content { position:absolute; width : 570px; height:500px; left:220px; top:200px; bottom : 50px; padding-left : 230px; z-index:15;} #bottom_bar { float:left; bottom : 20px; width : 100%; height: 10px; background-image:url(images/bottom_bar.gif); background-repeat:repeat-x; z-index:16;}[/code]Can anyone spot what im doing wrong and if so please correct me. Thanks Rick Quote Link to comment https://forums.phpfreaks.com/topic/16444-alignment-problems/#findComment-68526 Share on other sites More sharing options...
killerb Posted August 6, 2006 Share Posted August 6, 2006 How about something like this:[code]<html><head><style>body{padding:0;margin:0}#lastDiv{height:1200px;margin:0;}#bottomNav{margin:0;height:70px;}#bottomNav .inner{margin:0;height:20px;background:teal url(image.png) no-repeat center center;}</style></head><body><div id="lastDiv">Say this is the bottom most div before the bottomNav</div><div id="bottomNav"> <div class="inner">Content Goes Here</div></div></body></html>[/code] Quote Link to comment https://forums.phpfreaks.com/topic/16444-alignment-problems/#findComment-70043 Share on other sites More sharing options...
Ricklord Posted August 6, 2006 Author Share Posted August 6, 2006 Solved Quote Link to comment https://forums.phpfreaks.com/topic/16444-alignment-problems/#findComment-70114 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.