Solved

How can I layout my pages using css and not html tables?

Posted on 2012-03-19
9
172 Views
Last Modified: 2012-06-27
How can I layout my pages using css and not html tables?
0
Comment
Question by:cbrune
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37737774
Depend on what you want to do layout wise.

What you are asking is like asking how to build a building.

You need some idea of design to start.


Cd&
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 167 total points
ID: 37737807
In addition to Cd&:

You should learn semantic HTML & CSS first.  Here's a few resources:
http://htmldog.com/guides/cssbeginner/
http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/

If you do not want to learn HTML/CSS standards and best practices, then you should hire someone who already knows.
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 167 total points
ID: 37737808
something like this

<div style="clear:both;height:20px;">
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
</div>
<div style="clear:both;height:20px;">
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
</div>
<div style="clear:both;height:20px;">
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
</div>
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:cbrune
ID: 37737828
sorry i meant div tags
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37737854
My solution has div tags only :)

did you got any idea about the solution now?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37738016
So you go from a table to all divs.  That is no improvement.  There are a whole range of tags, for containers, wrappers, style carriers, semantic support and specialize presentation.

All divs is no better than a table but I guess it moves you from the 20th century to about 2004, so some progress is better than none.


Cd&
0
 
LVL 8

Expert Comment

by:Ben McNelly
ID: 37738091
As COBOLdinosaur said, for detailed help we need more detailed questions. From what we can assume, you are used to using tables to build structured web pages, and you would like to move towards a more modern solution.

Depending on your situation, it may be helpful to be even more forward thinking and design with HTML5 and CSS3 in mind.

here is a link to a simple overview and guide: http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/

While css/divs are more advanced than tables and offer greater flexibility and better standards support, HTML5 is even the next step forward. However, the same principles are used.

The end result is that you are using the html on your page and content holders or structure if you will. Then you use CSS to do the positioning and styling.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37738133
Then you use CSS to do the positioning and styling.


AND...

The semantics necessary to give modern level support to accessibility.  The importance of correctly using newer tags like aside, article, section and nav, do part of the job, but using the power of the new input types makes forms much more user friendly.

Cd&
0
 
LVL 1

Assisted Solution

by:jayhawks
jayhawks earned 166 total points
ID: 37742787
CSS3 has a multi-column layout feature (text flows like in newspaper columns). Not yet supported in IE but that's coming. You can read about the standard on the W3C website.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

837 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question