help

[deansaddigh]

Sorry for the Rather ott "title" im just so tired of going from forum to forum and no one wants to help me.

Basically i am trying to move away from table design and i have designed something with css.

Now i just want people to help me out by looking at my code and just tell me wether i am going along the right lines..

Ill tell you in words what i have done so you get some kind of idea.

So ok, are you relaxed and sitting down???

Good ill begin!!

I am making a marine fish website.

I have created a container to hold the whole site, and centred it.
Next within the container i made a header to hold the header image, and underneath that a links bar. now underneath that i have 2 things the first is the left colum which i floated left and the second is the right column which i floated right which is called contentcontainer.

Now within the the right colum i have other divs for diffrent things, the first is the news that i floated left within the contentcontainer. and another div called info or something which is floated right within the contentcontainer.
and finally underneath that another div which is called something else and i have cleared: both so it clears the left floated and right floated column within the content container and sits nicely underneath them.

Next i have a another links bar kinda thing which is outside th content container and another bar underneath that.


SO is this right in essense, Is this how you develop pages in css? i really need to know cause i dont want to keep going along the same lines if not.

css code

#container {width:900px; background-color: #015eb0; }
#header {width:100%; background-color:#FF6600}
#linkholder {width:100%; background-color:#374256; padding:0px}

A:link {text-decoration: none; color: #0099FFl; }
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; margin-top:10px; margin-bottom: 20px}

#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 }




#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 */

html 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>Untitled Document</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>

<!--test code for same collum height -->

<script type="text/javascript" language="javascript">
function allocateSidebarHeight() {
var contentDom = document.getElementById("leftcoloum");
var sidebarDom = document.getElementById("contentcontainer");
if((contentDom.offsetHeight-800) > sidebarDom.offsetHeight) {
sidebarDom.style.height = (contentDom.offsetHeight-800)+"px"; }
}

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() { this.className+=" over"; }
node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } }
allocateSidebarHeight(); }

window.onload=startList;
</script>

<!--end test code for coulm height -->


<!--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"> 
      <div align="left"> 
        <p><a href="http://www.google.co.uk">Home</a></p>
      </div>
    </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"> 
        
        <p align="center" class="style8">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>
      <!-- end of news section -->
      <!-- rightinfo section -->
      <div id="rightinfo"> 
        <p class="style9"><span class="style6">Welcome To The Tanks<br />
          <br />
          <a href="images/image-1.jpg" rel="lightbox" title="my caption">image 
          #1</a></span></p>
        <p align="center" class="style4"><a href="images/large/clown-fish2.jpg" rel="lightbox" title="my caption"><strong>image 
          #2</strong></a></p>
        <p align="center" class="style4"> <a href="images/large/tang.jpg" rel="lightbox" title="Yellow Tang"> 
          <img src="images/thumb/tropical_fish_wallpaper.jpg"   alt="fish" width="100" height="89" border="0" /></a> 
        </p>
        <p class="style21">Lets have a look at three of the best shall we.? </p>
        <p class="style4">&nbsp;</p>
        <p class="style4"> </p>
      </div>
      <!-- end of rightinfo section -->
      <!-- rightinfo section -->
      <!-- 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">&nbsp;</p>
      <p align="left"><img src="images/layout_12.jpg" width="124" height="203" align="absbottom" /></p>
      <p align="left">&nbsp;</p>
    </div>
    <!-- left content container to hold the content -->
    <!--bottom links -->
    <div id="bottomlinks"> rthtrhhth</div>
    <!-- bottom links  -->
    <!--bottom bar -->
    <div id="bottombar"> <img src="images/layout_08.jpg" width="900" height="26" /></div>
    <!-- bottom bar  -->
  </div>
      </center>
<!-- end of the container -->

</body>
</html>

[Toon]

Looks fine from what I can see, a few things you might want to fix...

<LINK href="css/grids.css" rel="stylesheet" type="text/css">

Lowercase link not U/C

A:link {text-decoration: none; color: #0099FFl; }

Make your A: lowercase and 0099FFl isn't a colour

(Welcome aboard and best of luck)

[deansaddigh]

Originally Posted by Toon

Looks fine from what I can see, a few things you might want to fix...

<LINK href="css/grids.css" rel="stylesheet" type="text/css">

Lowercase link not U/C

A:link {text-decoration: none; color: #0099FFl; }

Make your A: lowercase and 0099FFl isn't a colour

(Welcome aboard and best of luck)

omg thanks so much, so i am doing it right then???
thanks for the welcome aboard hopefully this will be my home now lol.


One other thing, how can i get my left colum and contentcontainer both the same heights so they are always the same height.

ill change what you said, many thanks

[Web Design Geek]

This may help

Equal Height Columns using CSS - Ed Eliot

[deansaddigh]

hey thanks alot my friend it did cheers. i used the faux method very nice.


ok one last question

you see this site BrainJuicer Community

well how did they do the top bit "the red bar that goes along the top and makes the little text search box, i want exactly that on my site. any ideas.

[Web Design Geek]

which search bar method are you using?

That's just a continuous div across with a red background and then the search box is placed in the div underneath and they join making it look part of the top bar.

[deansaddigh]

oh i see so its one big red line and the search bar is postioned underneath it,

would tha be absolutly then?

[Web Design Geek]

I think what they've got is a centred div about 900px wide and the background is 100% so it gives the illusion of a full width site but the actual content is in the centred div

[deansaddigh]

Originally Posted by Web Design Geek

I think what they've got is a centred div about 900px wide and the background is 100% so it gives the illusion of a full width site but the actual content is in the centred div

Ok i kinda get what you ment , so thanks alot

Im gonna go and do some reading up now on form styles.

Oh just one last question

when should you position absolute and relative