• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 179
  • Last Modified:

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

How can I layout my pages using css and not html tables?
0
cbrune
Asked:
cbrune
3 Solutions
 
COBOLdinosaurCommented:
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
 
LZ1Commented:
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
 
Gurvinder Pal SinghCommented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
cbruneAuthor Commented:
sorry i meant div tags
0
 
Gurvinder Pal SinghCommented:
My solution has div tags only :)

did you got any idea about the solution now?
0
 
COBOLdinosaurCommented:
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
 
Ben McNellyCommented:
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
 
COBOLdinosaurCommented:
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
 
jayhawksCommented:
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now