Jump to content

Archived

This topic is now archived and is closed to further replies.

Ricklord

alignment problems <RESOLVED>

Recommended Posts

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

Share this post


Link to post
Share on other sites
have you tried margin-bottom?

Share this post


Link to post
Share on other sites
What instead of padding?

what do i need in teh code, would i still use poistion relation or change back to absolute?

Rick

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.