Hi all - some time lurker and trying to get my head around css.
I am trying to create a header for my site that works properly using tables but I am stuck on 2 different issues in trying css - so first my code:
<style type="text/css">
.header{
background: #c9c9c9 url('images/header_bg.gif');
height: 82px;
color: #ffffff;
font: bold 11px Arial, Tahoma, Calibri, Verdana, Geneva, sans-serif;
}
.nav {
color: #ffffff;
text-align:right;
white-space:nowrap;
}
.nav a{
text-decoration:none;
color: #ffffff;
padding-right: 15px;
float: right;
}
.nav a:hover{
color: #930000;
}
.img_block img{
border:0;
}
</style>
<a name="top"></a>
<div class="header">
<div style="float: left;">
<a href=""><img src="images/header_left.gif" width="300" height="81" border="0" alt="" /></a>
</div>
<div style="float: right;">
<img src="images/header_right.gif" width="7" height="81" border="0" alt="" />
</div>
<div class="nav">
<a href="">Log Out</a>
<a href="">Notifications:</a>25
</div>
<div class="img_block">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
</div>
</div>
What it is suppose to be is:
- a logo image on the left of the page
- an image on the right of the page
- a background image inbetween
- a horizontal list of links and text across the top starting from the right
- 2 images that are on the bottom of the middle section that are fluid and move apart depending on screen width.
A working version that uses tables can be seen at [
recreationalflying.com.au ]
Problem 1: the "class nav" is suppose to go across the top right of the header which contains links and text. The "25" being text is suppose to follow the "Notifications" link but it ends up before the link.
Problem 2 (the big one): how can I get the two images in the middle to sit on the bottom and spread apart depending on the screen width.
Any help is greatly appreciated as I have spent a day on this so far trying all sorts of things - a great way to learn css but time is now against me - thanks for any help!
