Hello Again - Graphic Design Forum and Web Design Forum

deansaddigh · #1 (**permalink**) 15-09-2007, 09:58 PM

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">&nbsp;</p>
        <p align="right" class="style8">&nbsp;</p>
        <p align="left" class="style10">&nbsp;</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

lolly · #2 (**permalink**) 18-09-2007, 05:38 PM

did you fix it it displays fine here

PR Design · #3 (**permalink**) 18-09-2007, 09:18 PM

Yeah, same here, it looks ok. No red to mention. Was it browser specific? I'm using Firefox here...

deansaddigh · #4 (**permalink**) 19-09-2007, 09:06 AM

Yeah i fixed it, the reason why was because the div holding the links, my links were encased in <p> tags which puts a space above and below it.

My next question is about clearing floats.

If i just explain really quickly,

my site has a
sitecontainer div
header div
link div
content container div floted right
the content container did has other nester divs within it for things like news etc
left column div floated left
base link div with a clear both to clear the left and right floated divs
and another div underneath that.

Now my question is, if i make the link div float left so all my elements within appear across the left hand side of the screen, what clearing do i need to add to the content container underneath it and the left column which is underneath.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode