Intro to CSS/Table-Less LAYOUTS
Today we begin looking at building a page layout using CSS + Div tags. This is a good place to start if we keep in mind the workflow we discussed earlier in the course : Structure > Style > Content. This will be building page structure.
For the longest time tables have been the standard way of having any type of consistent page layout in web design. They also have also been the source of many headaches of web designers. So as an newer alternative to page layout, CSS is taking the place of tables.
It has taken some time as everyone has had to wait for browsers to catch up and fully understand CSS – or at least understand it all in the same manner.
CSS layouts use the BOX MODEL that we have been talking about (everything is contained inside a box/rectangle that we can control using CSS – width, height, padding, margins, etc.) – If you need to read more on the CSS box model read this article >>
Let’s look at the table below – it is comprised of : 1 table, 2 rows, 2 cols, 4 cells.
The code looks like:
<table width=”250″ height=”152″ border=”1″>
<tr>
<td width=”120″><p>Cell 1</p></td>
<td width=”114″><p>Cell 2</p></td>
</tr>
<tr>
<td><p>Cell 3</p></td>
<td><p>Cell 4</p></td>
</tr>
</table>
Now let’s hypothetically replace each tag with a DIV tag with an assigned ID.
<div id=”page_wrapper”>
<div id=”header_content”>
<div id=”left_header”><p>Cell 1</p></div>
<div id=”right_header”><p>Cell 2</p></div>
</div>
<div id=”body_content”>
<div id=”left_body”><p>Cell 3</p></div>
<div id=”right_body”><p>Cell 4</p></div>
</div>
</div>
Now each area can be controlled by CSS (width, height, colors, fonts, — well pretty much anything) which produces a layout that is more flexible and leaving the designer having more control.
To get the divs to be side by side we use the float property in CSS. More on that to come!
TIPS:
- use text-align:center in the body rule to align the page to the center for I.E5 users. You will then have to use the “auto” left and right margin for your page container/wrapper for the other browsers.
- use the Dreamweaver samples to get started as well as online generators, code sources, and references to get started.
- Don’t get frustrated if it doesn’t work right away – this stuff is finicky so you may have to go at it a couple of times. Start simple first and build up. Take your time!!!
NOTE: there are a lot of quirks and weird things that can happen when dealing with CSS layouts, later we will look at how to write CSS styles for specific browsers for now concentrate on understanding the concepts.
The CSS Float Property
Ok – hang on this can get wierd.
First what does float mean? If you think in terms of something floating in water it is on top.
In HTML / CSS, an item floating is also on top – which means the item is no longer in the regular flow of the document. By an item “floating” on top, it allows other items around it to move underneath and next to it….sort of.
Think of 2 Divs. Normally they stack on top of each other.
If we add the FLOAT property with a value of left to the first div,you will see only a bit of the next div.
The Explanation:
The first div is now ‘floating’ which means it is on top, the items that follow (in this case the second div) moves up to where the first div was in the document – meaning it is underneath the first div. Content/text isn’t allowed to be underneath by default so it will stretch out from underneath the div which is why we are able to see the text of the second below the first div.
Confused?
If we were to stretch out the second div you will see that the content will go next to the first div – here the second div’s width has been increased, it is still underneath the first div just wide enough for you to see the div and contents on the right..
Now what if we also float the second div to the left (and set the width back to the same amount as the first)?
They will be side by side. NOTE: once you apply a float, it will affect all items that follow. For this example I have added a paragrah after the second Div and you can see that it too is now being affected.
This text is a paragraph the is being affected by the floating items.
To stop floating items from affecting other items we add float:none and clear:both in a CSS rule. In this case to a paragrah that follows the second Div.
This text is a paragraph the should not be affected by the floating items.
To add space between the div’s we use a margin.
This text is a paragraph the should not be affected by the floating items.
To add space between the div’s and their content we can add padding.
This text is a paragraph the should not be affected by the floating items.
There’s a lot more to it depending on the layout and contents but this should get you started thinking on how to place items side by side.
Video
Please enter the url to a YouTube video.
Resources
- Online Tutorial : http://www.adobe.com/devnet/dreamweaver/articles/css_2c_tableless_print.html
- Working with DIV tags
- Tables to Table-less
Exercises
- Create a brand new wireframe for your website thinking of using DIV’s not Tables
- you may want to simplify your layout at this time.
- Create a basic page without content using a CSS DIV styled layout to match your wireframe – do not float anything yet just create the DIV’s required to match the wireframe
- Just use labels at this time and not content
- At this point just concern yourself with structure and remember to keep the layout simple!!! Everything does not have to be contained within a DIV
- Explore the DREAMWEAVER CSS sample layouts. Try out a couple just to see how CSS code was used. NOTE: it is sometimes harder to start with code you did not create.