what does this "Layout" word mean. to me it means placing data in a logical order in a page.
Layout means the design and construction of a page. More specifically it might mean the positioning of elements of the page design.
Yes, placing elements in a logical order on a page.
More often or not, unless working with a very basic page desing, this cannot be achieved using a table based layout due to the way tables work. i.e. reading top-left to bottom-right.
For example, take a look at this:
I built that site a couple of years back using a nested table layout. It works fine, but if you look at the underlying structure of the page it is not built in the same order as you would read the page.
You have the header, the navigation tabs, search box, flash movie, right hand column (with sub tables for each "panel"), side navigation, content, footer.
Now when you look at that page, where do you look first. The navigation? The content? The header?
Wherever it is, I bet you look at the content before the right column. So why does the right column come ahead of the content in the code? What does a search engine or screen reader "see"?
Using CSS to lay the page out means the content can come BEFORE the right column, as it would in it's "read order".
This has benefits beyond making the code easier to follow/edit.
Further to that, if I had built that page with CSS I could set up an alternative layout for hard copy printing, a different, narrower layout for mobile devices, one for screen readers, one for web-tv... and I wouldn't have had to make extra pages.
Check out my previous post with links to the 2 CSS templates. Print one. Note the navigation is removed on the print out and (if you are using a Mozilla based browser) the links are expanded to show the actual URL they link to rather than the link text.
Also note how light the code is compared to a table layout.
I simply define each area, navigation, header, content, right column and any sub parts therein. Define how each area relates to the others e.g. The header is at the top, the content is in the middle flanked by the nav and right columns etc. Then define how I want standard HTML elements (<p>,<a>,<img>,<ul> etc) to appear within each area.
The page is then constructed with "bog standard", no frills, HTML.
Oh, another great use of CSS is in doing navigation. Just define the nav as a series of nested lists, then use CSS to turn them into a nav bar, or drop downs or whatever you fancy.
now in CSS i would have to output each image as a DIV right? now thats a very tedious process.
No. With 2 short CSS statements you could do that.
Try this.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Image float test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
img {position:relative;float:left;clear:left;}
img.right {position:relative;float:right;clear:right;}
</style>
</head>
<body>
<img src="images/1.jpg">
<img class="right" src="images/2.jpg">
<img src="images/3.jpg">
<img class="right" src="images/4.jpg">
<img src="images/5.jpg">
<img class="right" src="images/6.jpg">
<img src="images/7.jpg">
<img class="right" src="images/8.jpg">
<img src="images/9.jpg">
<img class="right" src="images/10.jpg">
</body>
</html>
I only have to define 1 class (for the right hand images), I can just apply a style to the img tag. If I didn't want to effect all images on the page I could define another class, or better than that, contain the whole thing in a block level element such as a <div> and give that an ID. Then target the specific img tags within that ID.
How do you do it with a table? Which solution has the more code and is more labourious?
Code:
i still stick to the same point:
the best way to logically arrange a data is using a table.
If by "data" you mean spread sheet style information then I won't dispute that. If by "data" you mean page content I would definitely say that your argument doesn't hold water.
Tables have to be defined from top-left to bottom-right, a row at a time. If you have a column that spans more than 1 row then the flow is immediately illogical as it becomes necessary to include the entire contents of that column BEFORE you start the next row.
How is that a logical order if the table content is not spreadsheet style data?
u couldnt have made it better, CSS is meant for formatting html elements...
And formatting does not just mean the colour and font. It means how the element interacts with other elements.
I beleive the major issue in this discussion is that we have a couple of very specific misconceptions going on.
[ul]
[li] "Data" means numbers - report style.[/li]
[li]Web pages are certainly not all report style tables of data. In fact I think the majority aren't.[/li]
[li] It's not JUST about CSS. It's about semantic markup. i.e. using the right tag for the right job and as a consequence the separation of content (HTML, XHTML) from style (CSS).[/li]
[/ul]
Your comment about having to wrap img tags in divs leads me to believe that perhaps a little reading and research on the use of CSS layout would go a long way to help you understand why so many people are so passionate about it.
True, it's not the answer to everything, but I really do believe that sites constructed with CSS and semantic markup are the way forward. They simply work better on levels beyond what the user sees in the browser.
Due to cross browser/platform compatibility problems many people, yourself included I think, have a tarnished view. But as time goes on these problems have been ironed out and there are now few real problems of this nature.
Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
