Ok i wondered if someonme could point me in the right direction.
Basically if you take a look here
ReefLovers
you can see my website i am working on.
Now you should be able to see the red background within the link part and also the left column.
That Red is the colour of the container, now i understand why its on the left, because with css you cant set column to match, you have to use Faux columns are something so that is fine.
What is really puzzling me is why you can see the red above and below the div for the links.
please help its really confusing me.
Html code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Lightbox image enlarger-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!-- End of light box -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ReefLovers</title>
<!-- link top stlye sheet -->
<link href="css/grids.css" rel="stylesheet" type="text/css">
<!-- End link to Style sheet -->
<style type="text/css">
<!--
.style1 {
color: #CCCCCC;
font-weight: bold;
}
body {
background-image: url(images/Underwater_Bubbles_by_X_Anime_Fan_X.jpg);
background-color: #015EB0;
}
.style4 {
font-size: 16px;
color: #FFFFFF;
}
.style6 {
color: #CCCCCC;
font-size: 16px;
font-weight: bold;
}
.style8 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; }
.style9 {color: #FFFFFF; }
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; }
.style21 {font-size: 16px; color: #FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; }
-->
</style>
</head>
<body>
<!--Container to hold all the elements -->
<center>
<div id="container">
<!--Header to hold the logo -->
<div id="header"><img src="images/layout_01.jpg" width="900" height="89" /></div>
<!--end of Header to hold the logo -->
<!--link holder grey bar that sits underneath the header -->
<div id="linkholder">
<p><a href="http://www.google.co.uk">Home</a></p>
</div>
<!--end of holder grey bar that sits underneath the header -->
<!--content container to hold the content -->
<div id="contentcontainer">
<!-- news section -->
<div id="news">
<div id"toppic"><img src="images/welcome.gif" alt="head" width="352" height="32" /></div>
<p align="center" class="style8">Welcome!!!<br />
<br />
Welcome to the newly launched reef lovers
where you can buy cheap as chips Reef Equipment, Corals and even itty
bitty little frags to grow on. Also you can join our ever growing community
or reef lovers over at the forum and learn how to set up a beautiful,
healthy marine set up. </p>
<p align="center" class="style8">Feel free to contact us with any queries
you have regarding the stock we sell and you can do that via the contact
link at the top of this page or right here. <a href="images/wallpaper1.jpg">Contact
us.</a></p>
<p align="center" class="style8"><br />
Check Out these Beautiful pictures!!!!</p>
<table width="39" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center"><a href="images/large/windowslivewriterpufferfish.jpg" rel="lightbox" title="Puffer Fish"><img src="images/thumb/windowslivewriterpufferfish.jpg" alt="puffer" width="81" height="64" border="2" /></a></div></td>
<td><div align="center"><a href="images/large/wallpaper.jpg" rel="lightbox" title="EEL"><img src="images/thumb/wallpaper.jpg" alt="fus" width="81" height="64" border="2" /></a></div></td>
<td><div align="center"><a href="images/large/tang.jpg" rel="lightbox" title="Yellow Tang"><img src="images/thumb/tropical_fish_wallpaper.jpg" alt="tang" width="81" height="64" border="2" /></a></div></td>
<td><div align="center"><a href="images/large/clown-fish2.jpg" rel="lightbox" title="Clown Fish"><img src="images/thumb/clown-fish2.jpg" alt="clown" width="81" height="64" border="2" /></a></div></td>
</tr>
</table>
<p align="left" class="style8"> </p>
<p align="right" class="style8"> </p>
<p align="left" class="style10"> </p>
<div id"bottompic"><img src="images/welcomebottom.gif" alt="head" width="352" height="32" /></div>
</div>
<!-- end of news section -->
<!-- rightinfo section -->
<div id="rightinfo">
<p>hi lo</p>
</div>
<!-- end of rightinfo section -->
</div>
<!-- end of content container to hold the content -->
<!--left content to hold the content -->
<div id="leftcoloum">
<p align="left"><img src="images/layout_12.jpg" width="124" height="203" align="absbottom" /></p>
</div>
<!-- left content container to hold the content -->
<!--bottom links -->
<div id="bottomlinks"> rthtrhhth</div>
<!-- bottom links -->
<div id="bottombar"> <img src="images/layout_08.jpg" width="900" height="26" /></div>
<!-- bottom bar -->
</div>
</center>
<!-- end of the container -->
</body>
</html>
And the css code
Code:
#container {width:900px; background-color: #FF0000 }
#header {width:100%; background-color:#FF6600; height:89px; }
#linkholder {width:100%; background-color:#374256;}
a:link {text-decoration: none; color: #0099FF; }
a:visited {text-decoration: none; color: #0099FF}
a:active {text-decoration: none; color: #0099FF}
a:hover {color:#FFFFFF; }
#contentcontainer {float:right; background-color: #3399FF; width:754px; height:100%; margin-top:0px; padding:0px }
#news { float:left; margin-left:20px; background-color:#0066FF; min-width:350px; max-width:350px; overflow:hidden }
#rightinfo { float:right; margin-right:20px; background-color:#0066FF; min-width:350px; max-width:350px; margin-top:10px; margin-bottom: 20px }
#belownews{ clear:both; background-color: #0099FF; width:560px; margin-right:20px; margin-left:20px; border-top: #CCCCCC thin; margin-top:20px }
#toppic{ max-width:300px}
#bottompic{max-width:300px}
#leftcoloum {float:left; background-color: #015eb0; min-width:146px; max-width:146px; overflow:hidden; margin-bottom:0px; padding:0px }
#bottomlinks { clear:both; width:100%; min-height:23px; max-height:23px; background-color:#374256}
#bottombar { width:100%; min-height:26px; max-height:26px; background-color:#374256}
/*light box css */
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
/* end of light box css */
Many thanks