Jump to content
Killersites Community
joecool

How To Use Boxes Instead Of Tables

Recommended Posts

Hi all,

 

I have created a new charity website and I am trying to fix somethign on one of the pages.

 

I have content with an image beside it then a horizontal line underneath it, what is happening is depending on what browser you are using and depending at what browser you are using and other settings, sometimes the images are ending up in the line, above the line, below the line etc. I want things to stay i in places they should be no matter what browser or device they are watching it on.

 

I am not good at website design and in the old days I just used to put everything in a table and that would normally fix the issues, but this is an important charity site and I want to do everything correctly.

 

I think I need to put each section i.e. text with associated image and horizontal line into some kind of box or container system. But I am not sure.

 

Please can someone help. We launched the site on Wednesday and have just noticed this issue.

 

One of the main problem pages is:

 

(Deleted link because I didn't get a response to questions and didn't want to keep my url up here)

 

Thanks

 

Joe

Edited by joecool

Share this post


Link to post
Share on other sites

That's too bad, I was just about to look into things, but without being able to see your page, I cannot help.

 

 


(Deleted link because I didn't get a response to questions and didn't want to keep my url up here)

Share this post


Link to post
Share on other sites

You need to learn CSS positioning - which can be a pain ... no doubt. 

 

If anyone reading this thread, please consider learning Twitter Bootstrap:

 

http://getbootstrap.com/

 

... Once you learn it, you will be saved many hours of frustration trying to get your CSS layouts to work.

Stef

Share this post


Link to post
Share on other sites

Hi Joecool,

I would like to answer the question an easy way  you should try below code:

<table style="width:500px; height:250px; border: 1px solid black;border-collapse: collapse;padding: 5px; text-align: center;" rules="all">
  <tr>
    <td colspan="2" >1</td>
    <td colspan="1" style="width: 33%;height:50%" >2</td>


  </tr>
<tr>
    <td colspan="1" style="width: 33%">3</td>
    <td colspan="2" >4</td>
</tr>
</table>

Hope that Helps!

Regards,

Daniel,

Techtiq Solutions,

Share this post


Link to post
Share on other sites

Just as a general rule to consider, Tables are only to be used for housing data, basically spreadsheets etc. Back in the middle ages of the 80s and 90s there was not a graphic way of placing web elements so tables were creatively misused. They did in fact limit what designers could do.

The correct way to handle this is with CSS. You can place anything anywhere you want by simply creating empty boxes and filling them with data, images, or more boxes as you like where you like and this is really the best way to do it. It can e tricky to learn, but not really hard, you simply have to get used to thinking that way and in pixels.

One benefit as well is doing so in this manner, it will leaver your source code and data cleaner. Those with disabilities will find the web site easier to navigate, including those with vision issues and search engine spiders. All your "Look and feel" elements can be placed in a separate external CSS file, separating your web site information from the web site graphical look and feel (this is what makes it better for disabilities and spyders). Also, you can then swap out the CSS file and change the look and feel of the web site with little to know changes to the actual HTML file if it is well planned and designed.

If this is an issue that needs correcting fast than Daniel's code should work. But in the long run you will want to learn CSS and eventually change the site to boxes instead of tables. But to not fear creating sites in phases. Phase one - get it up there, phase two - clean it up and improve it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×