• 0

[Help]: Convert Table Layout

Asked by tHE LoRd ,

 Share

Question

Collaborator

tHE LoRd

Posted
Posted

Hi All,

I'm building a new blog, and I do not know HTML and web design; so I created the general layout using <table>. If anybody can help me to change it to use <div> instead of <table> I would appreciate :)

The reason I need to use <div> is that I'm planning to use CSS with it, so the performance becomes better than <table> + CSS.

Thanks alot in advance :)

concept.zipFetching info...

Link to comment
https://www.neowin.net/forum/topic/364620-help-convert-table-layout/
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Mentor

turkishdelight

Posted
Posted

I'm assuming you want a two-column layout with a header? In that case, attached is a plain-vanilla template I came up with using your example. More descriptions (or even simple filler text) could have helped...

Also, consider modifying an existing layout from a layout site such as glish.com.

  • 0
Collaborator

tHE LoRd

Posted
  • Author
Posted
  mzhao said:
I'm assuming you want a two-column layout with a header? In that case, attached is a plain-vanilla template I came up with using your example. More descriptions (or even simple filler text) could have helped...

Also, consider modifying an existing layout from a layout site such as glish.com.

586443531[/snapback]

Hi mzhao,

Thanks for your time and work, I'm attaching a picture for the initial concept. Yes it's a header with two columns layout, each column will contain some boxes to display contents, like blog entries, links, login, and so on.

By the way, I just need the layout, the format and so on I will take care of it, by designing a CSS for it.

Thanks alot :rose:

post-70542-1125246736_thumb.jpg

  • 0
Collaborator

tHE LoRd

Posted
  • Author
Posted
  mzhao said:
I'll work on designing a basic template for you. There will be some CSS required, though, because I'll be testing the colors and such.

586444267[/snapback]

Really Thank you man alot. By the way, do you know how to make 100% height. It's very easy if you use it with tables <table height="100%"> with no xhtml , but how that can be done using DIVs + CSS?

  • 0
Collaborator

tHE LoRd

Posted
  • Author
Posted
  mzhao said:
For a div with id "object" that spans 100% of the page, use this:

...
&lt;style type="text/css"&gt;
html,body { height:100%; }
#object { height:100%; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="object"&gt;
...
&lt;/div&gt;
...

586444759[/snapback]

I tried this style, it work well on IE (the same as <table height="100%">) but did not work in Opera 8. I did not test with others, but I thought they will not work, and I test them with table layout not with DIVs

  • 0
Community Regular

rguy84

Posted
Posted

Try this 

&lt;style type="text/css"&gt;
#head {
  width: 100%;
  height: 25%;
}
#container{
 width: 100%
}
#menu{
 width: 25%;
 float: right;
 height: 100%;
 padding: 5px 5px 10px 5px;
 text-align: center;
}
#menu .box{
 width: 75%;
 border: 2px solid blue;
}
#menu .box h1(
 background: blue;
 font-size: medium;
}
#main {
 float: left;
height: 100%;
 padding: 5px 5px 5px 5px;
 text-align: center; width: 75%;
}
#main .box{
 width: 75%;
 border: 2px solid blue;
}
#main .box h1(
 background: blue;
 font-size: medium;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;
...
&lt;/div&gt;
&lt;div id="container"&gt;
&lt;div id="menu"&gt;
&lt;div class="box"&gt;
  &lt;h1&gt;..&lt;/h1&gt;
   .....
&lt;/div&gt;
&lt;duv id="main"&gt;
&lt;div class="box"&gt;
  &lt;h1&gt;..&lt;/h1&gt;
   .....
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.