Jump to content

alignment problems <RESOLVED>

Ricklord

By Ricklord
in CSS Help

Recommended Posts

Ricklord Member

Ricklord

Posted
Posted
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
Link to comment
https://forums.phpfreaks.com/topic/16444-alignment-problems/
Share on other sites
Ricklord Member

Ricklord

Posted
  • Author
Posted
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
Link to comment
https://forums.phpfreaks.com/topic/16444-alignment-problems/#findComment-68526
Share on other sites
killerb Newbie

killerb

Posted
Posted
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]
Link to comment
https://forums.phpfreaks.com/topic/16444-alignment-problems/#findComment-70043
Share on other sites

Archived

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

Go to topic listing
×
×
  • Create New...

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.