So my site http://www.flashninjaclan.com , loads a bit strange because of mainyl column by column table design. I want to change the main three columns table design to divs, however, I don’t know how to do position with divs. Right now my knowledge of CSS is just to use styles to style the TD’s and TR.
So how you would guys change:
<table border='0'>
<tr>
<td width="205" rowspan="1" valign="top" background="images/midde_bg.gif">
//content here
</td>
<td width="620" valign="top" background="images/midde_bg.gif">
//more content here
</td>
<td width="221" rowspan="2" valign="top" background="images/midde_bg.gif">
//content here
</td></tr></table>
Into Divs? I’d really like to keep my design but just change tables into Divs.
You don’t try and convert tables into divs/css because you would never use tables for layout. It’s like trying to make css work like a table so what would be the point of that?
What you have to do is set up your content first, which means getting rid of all the table markup which leaves the images and content you show above. There is no need to put a <img> inside a cell so leave it as <img>. If your ‘content’ is text, then put it in a <p>.
Once you have all your content in some appropriate container, then you worry about CSS styling. But styling comes after content creation so get your content in order first.
btw, your website has 1452 html errors alone. I think that’s the most I’ve ever seen!
I used to have zero, but then I discovered visitors don’t care about html errors and it doesnt penalize me in search engine ranking and it doesn’t slow my loading speed. So I stopped checking the site. When I did check, it used HTML transitional, not strict.
My main concern is that the site loads quick enough but the loading process is a bit wierd.
The semantics don’t really matter, I just want a 3 column layout written in divs instead of my table.
I want the tables to convert to CSS because tables must load 1 column at a time whereas CSS loads all at once which provides for a much smoother loading sequence.
I think you need to look closer at the benefits of semantics and valid code. It takes almost no effort to create a semantical design with valid code over a non-semantical design with invalid code. It’s the same amount of code, same amount of CSS etc. The only difference is that semantic code is better in every possible way, including for search engines as you alluded to above.
There is no quick, dirty way to convert a design from TABLE’s to DIV’s. Perhaps read up on the difference between block and inline elements and how to position them using padding, margins, floats and widths.
But it entirely depends on the context in which you are using it. The above code I’ve given you may not be useful in some situations as it contains floated elements and specifies heights for each block which may not be the effect you are looking for.
I’ve argured this W3 standards vs. Non W3 standard and neither side has been successful in convincing the other. I’ve studied SEO stuff, whether your site is valid or not has no effect on your SEO ranking. The top sites for my terms aren’t even checkable by w3 because they contain non ntf-8 characters
Its a moot point and I’m not going to spend hours argueing again.
I’m not surprised the positioning is off as you didn’t say what you needed it to do, so I just gave you a crude example which gave three boxes with fixed widths side by side.
There is no such thing as a layer in the standards so I guess you want him to become a farmer. Convert your tables into chickens. But that’s kind of insulting isn’t it?
drhowarddrfine - he wants his site to be tableless, nothing was mentioned of requiring standards (in fact quite the opposite), so chrisOBrien’s comment is exactly the type of answer Archbob was looking for.
It’s still a stupid way to code, but it does answer his question.
All I want in a tables design converted to Divs, not semantics and stuff.
BTW: My site loads fine in both IE and FF currently and it has over 300 “errors”, thats not the issue. Its the loading process that I want to get better, hence the need for divs.
Oh gosh!! never ever do that You’ll end up in such a mess you’ll never get out of it That functionality should never have been added to DW and I believe won’t be available in the next version (thank goodness).
Why not do a google search for a 3 column CSS layout - I’m sure you’ll find a heap of free templates that you could use. However, you are still going to have a lot of work porting that layout into a css layout - you’ll have to learn a lot more than just ‘styling’ with css to get the same type of layout - it’s not going to be an easy job I’m afraid
I’ve done the coding for Archbob already. The design is simply a bunch of boxes laid out in order, so it wasn’t too difficult, albeit it did take quite a while to make it look identical to the original design.
Not true, although it may depend on the browser. Pages do load differently depending on how they’re coded. It’s not something I recommend worrying about though, semantic coding is far more important than how the page loads IMO.
ryanhellyer, there isnt a quick fix to this. Nothing like instant valid code or tableless layout. If you really want to port your ‘tabled layout’ to ‘css layout’ then you really have to invest the time and effort in redesigning the site. There is no doubt about that.
I think you know this will require a lot of effort from your part writing your css layout, validating code, browser consistencies and compatability hence this quick route you’re professing.
Sorry to disappoint you but you wont find one :). And you will learn to hate IE in the process
Compared to tables, divs load quicker, but just putting something in a div does not; that was my point.
Semantically correct also do not make things quicker, only more understandable to the coder, although it may help the coder simplify their page which, of course, would make it load faster.
Both of those items, by themselves, do not make pages load quicker.
i totally agree. if you are going to create a tableless website it must be done properly. There are enough bad websites out there. Lets stick to standards and doing this properly for what they are meant for!
