Solved

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

Posted on 2012-03-19
9
170 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
 

Author Comment

by:cbrune
ID: 37737828
sorry i meant div tags
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Inline input fields - Contact Form 7 5 27
Kill default webkit margin!  Please! 6 22
.php tree directory? 5 55
Not seen Link button 5 13
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

914 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now