How to start...

**loyalblue** · 05-19-2008, 07:45 AM

Using Div's and CSS to build websites..

I currently know a few things with CSS but only contains styleing such as background images, colours and text format etc, I've never used it for Position or anything else of such.

I'd like to start building modern using Div's and CSS, At the moment I'm currently just using tables on a main index page bringing it include files for Nav, Content, Footer, Header etc...

I hope you can point me in the right direction.

Thanks,

**bakerc** · 05-19-2008, 08:34 AM

Hi

There's loads of tutorials on the net - the links below should be of use to you

http://www.w3schools.com/css/css_intro.asp

http://www.cssbasics.com/

**loyalblue** · 05-19-2008, 12:19 PM

Thanks for your links and I've managed to read a little but not much, The only really thing I'm confussed and stuck at is how to position everything using the CSS sheet rather than the tables, Below I've written code which I'd normaly do, It would be absolotaly brilliant if you could show me for example than the translation from my code to the Div/Css Code for me to compare, take notes and learn.

Between the TD tags I'd normaly bring my Include files in. For Example

Code:

<?php include("includes/topnav.php"); ?>

For the Content Box I'd use this to drag in the content,

Code:

<? if($id) { include("content/$id.html"); } else { include("content/hello.html"); } ?>

Code:

    <html><head></head>
<body bgcolor="#000000" background="" leftmargin="0" topmargin="20" marginwidth="0" marginheight="0">
<table id="main" class="main" bgcolor="#FFFFFF" width="920" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
<td background="" class="topnav" colspan="2" height="15" width="100%" align="center"></td>
        </tr>
    <tr>
<td colspan="2" class="header" width="100%" height="150" valign="top" background="">
        </td></td></tr>
    <tr>
<td background="" width="100%" colspan="2" height="50" width="100%" class="main-nav">
        </td></tr>
    <tr>
<td background="" width="200" height="250" valign="top" class="photogallery"></td>
<td background="" width="720" valign="top" class="content">
<table width="100%" cell padding="15">
    <tr><td><br>
        </td></tr></table>
    <tr>
    <td background="" class="footer-spacer" width="100%" colspan="2" height="13">
        </td></tr>
    <tr>
<td background="" colspan="2" height="80" width="100%" class="footer">
    </table></body></html>

Much Apperciated,

Thanks,

**bakerc** · 05-19-2008, 12:23 PM

Hi

The links below should show help you to convert to CSS from tables.

http://www.developerfusion.co.uk/show/5201/

http://www.sitepoint.com/article/tables-vs-css

**LadynRed** · 05-19-2008, 03:17 PM

Quote:

The only really thing I'm confussed and stuck at is how to position everything using the CSS sheet rather than the tables

First, get rid of the mindset that you have to position everything. Learn to use the normal document flow and floats and position only when you have to.

There's a whole lot on css layouts here: http://css-discuss.incutio.com/?page=CssLayouts