Hey I have been having difficulty getting this to work. I am trying to get a bottom navigation bar working on my website. The bar contains a background image that stretches the length of the screen. However, I am trying to get it so that the items will all position themselves equally along the bottom, depending on the resolution of the screen. I have been able to get it working slightly well using absolute positioning, but when I add or subtract code, the icons for the bottom bar become offset. I was hoping there was an easy way to get this working. I have attached a screenshot of what im trying to do (except they will be lined up on the blue background and will be equally spaced from eachother. My page code is shown below.. you can see an example of this at http://deranjer.is-a-geek.com. I also posted my CSS code. Currently I am not using all of it, but I was at one point in time. Thank you!
<?php
session_start();
$my_t=getdate(date("U"));
print("$my_t[weekday], $my_t[month] $my_t[mday], $my_t[year]");
?>
<html>
<link href="Space_pics.css" rel="stylesheet" type="text/css">
<link href="center_banner.css" rel="stylesheet" type="text/css">
<link href="heading_over_bottom.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {font-size: 36px}
-->
</style>
<body>
<p style="text-align: center; font-size: 180%;"> Welcome to derajnet </p>
</br>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<p>
<?php
if ($_SESSION['passtest']==1)
{
echo '<p style="text-align: center; color: red; font-size: 125%;"> Incorrect Username or Password</p>';
unset($_SESSION['passtest']);
}
else
{
echo '<p style="text-align: center; font-size: 125%;"> Please enter a Username and Password to log into derajnet.</p>';
}
?>
</p>
<p class="Heading_over_bottom style1"> </p>
<p class="Heading_over_bottom style1">Use the links below to connect with me!</p>
<p class="Heading_over_bottom style1"> </p>
<p class="Heading_over_bottom style1"> </p>
<hr>
<p> </p>
<div style="background-image:url(images/blue_banner.png); width:100%; height:140px; left: 0px; top: 0px;">
<a href="http://aproductivelife.blogspot.com"><img src="images/blogger-logo-new.PNG" alt="Follow me on Blogger!" width="80" height="80" class="Space_Images_right"></a>
<a href="http://www.youtube.com/deranjer"><img src="images/youtube-logo.jpg" alt="Follow me on YouTube!" width="120" height="90" class="Space_Images_right_two"></a>
<a href="http://linkedin.com/in/jaredswets"><img src="images/linkedin-logo.jpg" alt="Connect with me on Linked-in!" width="150" height="90" class="Space_Images_right_three"></a>
<a href="http://twitter.com/deranjer"><img src="images/twitter-90X90.jpeg" alt="Follow me on twiter!" width="90" height="90" class="Space_Images_right_four"></a></div>
<div>
</div>
</body>
</html>
My CSS code
.Space_Images_right {
position: relative;
right: auto;
left: 3%;
top: 30%;
bottom: auto;
z-index: 1;
float: left;
margin-right: 3%;
margin-left: 3%;
}
.Public_access {
position: relative;
left: 175px;
top: -22px;
right: -175px;
bottom: auto;
z-index: 2;
}
.Space_Images_right_two {
position: absolute;
right: auto;
left: 181px;
top: 589px;
bottom: auto;
z-index: 1;
}
.Space_Images_right_three {
position: absolute;
right: 10%;
left: 377px;
top: 594px;
bottom: auto;
z-index: 1;
width: 150px;
}
.Space_Images_right_four {
position: absolute;
right: 5%;
left: 574px;
top: 595px;
bottom: auto;
z-index: 1;
width: 89px;
}