Jump to content
  • Advertisement
Sign in to follow this  
Talib

[web] Giving up on DIV layouts

This topic is 4238 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I do all my page layouts with tables. So after reading a couple articles and being convinced that this is not the way to go anymore. I tried doing my pages with DIVs. I took me a 30 mins to figure out how to center an image within a div. OK, maybe it's me just not knowing how to do it properly so I go on. 1 Hour later I still can't get 3 divs next to each other aligned center on the page. My first problem is that CSS does not seem to be user friendly. You cannot guess from some of the attributes what they do and what combinations to use. Secondly is that some browsers support stuff in a certain way while others do it in another. It just feels hopeless. Now I will probably go back to tables as I am more productive and less-frustrated. And my layouts look the same 90% of the time, no matter what browser I am using. I don't know if I don't have the mindset to understand div layouts, but it just seem to me that some1 got it horribly wrong when they thought it will be better using divs for layouts (by better I mean easy and fast) Enough ranting and raving. If you feel I have it wrong or right, tell me about it.

Share this post


Link to post
Share on other sites
Advertisement
Just because you took longer to get used to DIVs than you did to get used to tables doesn't mean it's worse.

Making a badly formed table layout may seem like an easy way out to get a page ready in a few minutes, but when you realise the problems such as slower loading, more bandwidth usage and most importantly the perils in trying to edit the content, layout and appearance of the page, it will be too late.

Yes, using CSS is not child's play... it is fairly simple if you know what you want to do and if you know what does what in CSS, but if you don't... learn it.

Take a few minutes off and explore more with CSS... read articles/tutorials on some sites such as W3Schools and A List Apart, or if you like going into technical detail rather than practical examples... then just go over to w3.org.

These few minutes/hours spent in getting CSS right will help you save a lot more time that would have been wasted in trying to edit those nasty table layouts.


Quote:
My first problem is that CSS does not seem to be user friendly. You cannot guess from some of the attributes what they do and what combinations to use.


CSS is user friendly alright... it's just that it does not come with any AI... you have to tell it what to do.


Quote:
Secondly is that some browsers support stuff in a certain way while others do it in another. It just feels hopeless.


From my experience at least... different behaviours are rarely observed with CSS... and workarounds for these are easy... unlike the problems caused by using HTML attributes directly and complex table nesting.

Share this post


Link to post
Share on other sites
I'm not a web developer, merely someone that has dabbled with both implementations through the production of my own sites and I can see where you're coming from. My latest attempt at a web presence uses CSS for 2 simple reasons despite the fact that it currently causes me more headaches than simple tables.

1. Restyling through just the CSS.
If I wanted to restyle the site I could do so by changing merely the CSS. For an example of how far you can go by simply changing the CSS take a look at css zen garden

2. Easy to read
When it comes to the actual page content it contains only a few divs and other tags as opposed to a mass of table elements that start to push things around.


Like I say, I'm no pioneer of CSS based layout but I can see the point in sticking with it so I am doing.

Share this post


Link to post
Share on other sites
CSS is hard to get right from the start, but as soon as you have enough practice and plan forward a little, it pays back well.

Share this post


Link to post
Share on other sites
Quote:
Original post by Verminox
... the problems such as slower loading, more bandwidth usage and most importantly the perils in trying to edit the content, layout and appearance of the page, it will be too late.
This isn't always the case. The common example case is the columnar layout, where you want to break a page into equal height columns. It is far simpler (and less code) to just chuck a single row, three celled table onto the page.

People seem to assume that tables and CSS are mutually exclusive. They're not. You can quite happily theme a table using CSS as you would a div.

I do not advocate using tables for everything, far from it. There are just some cases where it's significantly easier (and cleaner) to use them for layout, though.

Share this post


Link to post
Share on other sites
Quote:
Original post by benryves
Quote:
Original post by Verminox
... the problems such as slower loading, more bandwidth usage and most importantly the perils in trying to edit the content, layout and appearance of the page, it will be too late.
This isn't always the case. The common example case is the columnar layout, where you want to break a page into equal height columns. It is far simpler (and less code) to just chuck a single row, three celled table onto the page.

People seem to assume that tables and CSS are mutually exclusive. They're not. You can quite happily theme a table using CSS as you would a div.

I do not advocate using tables for everything, far from it. There are just some cases where it's significantly easier (and cleaner) to use them for layout, though.




I don't disagree with you... there are some cases when tables may seem to provide the best solution... but that's only for very simply layouts and those aren't very extensible. It's the same as using OOP vs. Procedural. For a Hello World program... you won't use classes... but for building a 3D game... you would rather not use procedural C.

Consider a simple three column layout. Which would would you rather have on your page?


<table border="0" width="100%" cellspacing="1">
<tr>
<td width="30%">
<table border="0" width="100%">
<tr>
<th>Navigation</th>
</tr>
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
</tr>
</table>
</td>
<td width="50%">
<h1>My Web Page</h1>
<p>..........
..........
..........
</p>
<p>..........
..........
..........
</p>
</td>
<td>
<table border="0" width="100%">
<tr>
<th>Sponsors</th>
</tr>
<tr>
<td>Ad 1</td>
</tr>
<tr>
<td>Ad 2</td>
</tr>
<tr>
<td>Ad 3</td>
</tr>
</table>
</td>
</tr>
</table>




Or....



<style type="text/css">

#nav {
float: left;
width: 30%;
}

#main {
}

#ads {
width: 20%;
float: right;
}
</style>


<div id="nav">
<h2>Navigation</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>


<div id="ads">
<h2>Sponsors</h2>
<ul>
<li>Ad 1</li>
<li>Ad 2</li>
<li>Ad 3</li>
</ul>
</div>


<div id="main">
<h1>My Web Page</h1>
<p>..........
..........
..........</p>
<p>..........
..........
..........</p>
</div>





Both serve the same purpose... look the same.... but just think how much easier it is to edit the second layout in case I needed to change something.... rather than try to find my way through all those nested tables/cells.

Share this post


Link to post
Share on other sites
Yeah, I guess giving up divs is not the smartest of things. I was just very frustrated when I wrote the post.

I just realised though, that if I gave up on c++ when first began, I wouldn't be happily doing game coding.

So I have decided to look for a CSS layout tutorial, can any1 recommend one. (PS I am looking at the one @ suicide.com, looks promising)

Share this post


Link to post
Share on other sites
Quote:
Original post by Verminox
Both serve the same purpose... look the same....
'Fraid not. First of all, in your float example, the text in the middle column will flow under the left and right floats if it gets too long. You need to add extra padding around the central column. Then IE 6 will add an extra 3 px margin around the floats, which can only be remedied by making the central column another float. Your next guess might be to float all three divs to the left and give them the appropriate width percentages, but then you'll have to reduce them by a few percent to stop them from being rearranged by rounding errors.

It gets even more fun when you want to make the left and right columns fixed widths (perhaps in ems, so they change with font size), and make the middle column take up the rest of the available space. Now you can't just use percentages: now you have to put in your left and right floats, then declare a non-semantic div with the necessary padding on its left and right, then add the actual content div inside it, floated to either side. Finally, if this is for a public Web site, you'll need to tweak it to make it work in all the modern browsers.

Definitely possible, but takes longer than doing a three-column layout with tables (especially when you don't overcomplicate the tables like in your example) and would be unlikely to be my first choice for some things, such as small private pages or prototypes. Until CSS provides something sensible for layout, tables are just plain easier in some cases.
/* Proposed syntax for CSS 3 layout */
body {
display: "hhh" (50px)
"lcr" (*)
"fff" (intrinsic)
300px * 200px;
}
#header { position: h; }
#left { position: l; }
#content { position: c; } /* ... */

Share this post


Link to post
Share on other sites
If it's any consolation, it's driven me nuts multiple times. These sites helped though...

echo echo - A fairly straightforward progression through development

little boxes - some nicely laid out examples of common layouts.

tizag - Not very clear but a fair amount of the basics

Share this post


Link to post
Share on other sites
Quote:
Original post by Beer Hunter
Until CSS provides something sensible for layout, tables are just plain easier in some cases.


Wow, that's quite possibly the worst-explained W3 (draft) spec I've seen, and that's saying something. The use of arbitrary strings is a bit horrific. It's fixing the wrong problem, assuming that the reluctance to leave tables means that everybody wants grids, when in fact they almost always just want to be able to line up an arbitrary number of block elements horizontally without using numerous float or margin hacks. Surely that is fixable without something like this.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!