Hey guys,

Basically im creating a website and I know how outdated tables are for content, so I decided to create a little mock-up in Illustrator, slice and then export and import into Dreamweaver. This was all good, im not very familiar with CSS although I am more familiar now then when I started the project.

But anyway, I deleted the gifs it created in the layout and applied to stylesheets, etc. I then carried on with the design and I had a number of good looking pages which I was very happy with.

That was until I took a closer look at the code, for some strange reason I had my CSS layout and a table layout, I dont really know how to explain, I was certain it was CSS but in the code theres definitely tables and if I make the border 1px you can see the border of this table where my CSS layout should be, because of this im getting huge gaps between the header, body and footer.

 

If someone could help me id appreciate it.

 

Heres an example of what I mean:

<div id="layout">
 <!-- ImageReady Slices (Untitled-1.html) -->
 <div style="position:absolute; left:0px; top:0px; width:1024px; height:1024px; font-family: Verdana, Geneva, sans-serif; color: #FFF;">
   <table id="Table_01" width="1024" height="979" border="0" cellpadding="0" cellspacing="0">
     <tr>
       <td width="318" rowspan="2" align="left" valign="top"> </td>
       <td width="706" height="201" align="left" valign="middle"><div id="header">
         <p align="left"><img src="images/City Tourism Vector2.png" width="88" height="79" alt="CityTourismLogo"><img src="images/CityTourism1.png" width="120" height="29" alt="CityTourism"></p>
         <p><FONT size="1">- Tourist information for the City</FONT></p>
         <p>         </p>
       </div></td>
     </tr>

 

Thank you

What kinda help, mate?

 

Try this: Open your file in DW -> Modify -> Convert -> Tables to layers...

 

But I'm not sure that the result will be satisfactory. Most likely, it will be impossible to do without hand coding.

If you are wanting to use css because you have heard that it is better for SEO or better for accessibility compared to tables you are very right it is.

 

However the reason that using CSS is seen as better is because it takes all the styling information (colours, font information, widths, heights) out of the html code making it cleaner and easier to read for browsers, spiders and screen readers a like.

 

Slicing the code within a graphics editor, be it fireworks, photoshop, illustrator or whatever, creates a whole pile of pointless coding and takes away the whole reason for using CSS over tables in the first place.

 

So the best help that anyone can give you, is for them to stand on their high horse and tell you that if it matters how your code looks then, learn how to code yourself rather than relying on something to make the code for you, that way you will have control over what goes into it and what stays out.

 

Here is a nice tutorial that takes a psd through the steps of being coded, it would be pretty much the same for any graphics editor to html:

http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

Tip of the hour:):

 

Dreamweaver -> File -> New...

Try to play with page templates, to analyze generated code.

Haha, right on point Lev, and Dizi, as usual!

Thanks for all the help.

 

Yesterday I did have a look at the templates in Dreamweaver and managed to adapt them to suit the layout I want.

 

However, I was wondering what the difference is between a liquid layout and an elastic layout, I know about liquid layouts and I chose to use a liquid template, but what about elastic?

 

Thanks, as I said before, a complete n00b to CSS and havent even done a website in a while

Liquid, elastic. Flexible also.

As for me, it makes no difference.

Im trying to create the following layout but I just dont know enough about creating layouts to actually do it :/

 

 

Id appreciate it if someone could help me.

 

Thanks

Im trying to create the following layout but I just dont know enough about creating layouts to actually do it :/

 

 

Id appreciate it if someone could help me.

 

Thanks

 

I'm afraid you haven't had a reply because there's not short-cut way to do it other than to learn. Most of the members on these forums have already put a lot of time and effort in becoming so proficient. I'd recommend putting a bit of effort into going through one of the many CSS tutorials available either on-line or in book format. Once you get going it's actually enjoyable!

Here you go, just copy/paste it all without editing, then adjust the widths and heights if you want. My code validates (check your code here http://validator.w3.org/ )

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        
"http://www.w3.org/TR/html4/strict.dtd"> 

<html>
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html;  charset=utf-8">
<style type="text/css">
body { margin: 0; }
div { padding: 5px; margin: 0; }
#wrap { width: 1000px; margin: 0 auto; position: relative; padding: 0; }
#header-left { width: 187px; float: left; border-right: 3px solid #000; 
height: 150px; }
#header-right { width: 790px; float: right; height: 150px; background: 
#ccc; }
.clear { clear: both; width: 100%; height: 0; visibility: hidden; padding: 0; 
}
#nav { width: 187px; float: left; border: solid #000; border-width: 3px 3px 
3px 0;  height: 350px; background: #ccc; }
#content {  width: 790px; float: left; border: solid #000; border-width: 3px 
0 3px 0; height: 350px; }
#subnav { width: 790px; border-bottom: 3px solid #000; height: 70px; 
background: #ccc; margin: -5px 0 0 -5px; }
#footer-left { width: 187px; float: left; border-right: 3px solid #000; height: 
150px; }
#footer-right { width: 790px; float: right; height: 150px; background: 
#ccc; }
p { margin: 0; }
</style>
</head>
<body>

<div id="wrap">
<div id="header-left"><p>&nbsp</p></div>
<div id="header-right"><p>Header</p></div>
<div class="clear"> </div>
<div id="nav"><p>Navigation</p></div>
<div id="content">
<div id="subnav"><p>Sub-navigation</p></div>
<p>Body</p>
</div>
<div class="clear"> </div>
<div id="footer-left"><p>&nbsp</p></div>
<div id="footer-right"><p>Footer</p></div>

</div><!--end of #wrap-->

</body>
</html>

 

It looks like this:-

http://www.wickham43.com/forumposts/thrash100129-2.html

 

Remember that padding and borders need to be added to a div width if you edit widths. The left side of my page is 200px being 187 + 3px right border + 2*5px padding = 200px

 

The right side is 790 + 2*5px padding = 800px.

Thats brilliant, thanks a lot for the help!

 

EDIT - When putting more content into the divs, for example the nav div, it expands into the body div which I was having problems with before. I was wondering if someone could tell me how to stop that from happening?

Its part of a website im doing about accessible websites so it would be quite ironic if the text size couldnt increase without it distorting the whole website.