Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2012-03-19
9
Medium Priority
?
176 Views
Last Modified: 2012-06-27
How can I layout my pages using css and not html tables?
0
Comment
Question by:cbrune
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 668 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:
Gurvinder Pal Singh earned 668 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

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

Expert Comment

by:Gurvinder Pal Singh
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 664 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

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.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Suggested Courses

715 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