• 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.

  • Posts

    • The list of Mac devices rumored to get macOS 26

      By Circaflex · Posted

      At some point, hardware becomes obsolete and we cant blame vendors for dropping support. Much of the models dropped, run Intel hardware which means they can install something else on the device if they truly want to keep using it.
    • Microsoft shares "immediate remediation" script if you deleted this Windows system folder

      By ecmarm · Posted

      Well, that was fun: PS C:\WINDOWS\system32> Install-Script -Name Set-InetpubFolderAcl WARNING: Unable to download from URI 'https://go.microsoft.com/fwlin...627338&clcid=0x409' to ''. WARNING: Unable to download the list of available providers. Check your internet connection. PackageManagement\Install-PackageProvider : No match was found for the specified search criteria for the provider 'NuGet'. The package provider requires 'PackageManagement' and 'Provider' tags. Please check if the specified package has the tags. At C:\Program Files\WindowsPowerShell\Modules\PowerShellGet\1.0.0.1\PSModule.psm1:7468 char:21 + ... $null = PackageManagement\Install-PackageProvider -Name $script:N ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidArgument: (Microsoft.Power...PackageProvider:InstallPackageProvider) [Install-PackageProvider], Exception + FullyQualifiedErrorId : NoMatchFoundForProvider,Microsoft.PowerShell.PackageManagement.Cmdlets.InstallPackageProvider PackageManagement\Import-PackageProvider : No match was found for the specified search criteria and provider name 'NuGet'. Try 'Get-PackageProvider -ListAvailable' to see if the provider exists on the system. At C:\Program Files\WindowsPowerShell\Modules\PowerShellGet\1.0.0.1\PSModule.psm1:7474 char:21 + ... $null = PackageManagement\Import-PackageProvider -Name $script:Nu ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidData: (NuGet:String) [Import-PackageProvider], Exception + FullyQualifiedErrorId : NoMatchFoundForCriteria,Microsoft.PowerShell.PackageManagement.Cmdlets.ImportPackageProvider WARNING: Unable to download from URI 'https://go.microsoft.com/fwlin...627338&clcid=0x409' to ''. WARNING: Unable to download the list of available providers. Check your internet connection. PackageManagement\Get-PackageProvider : Unable to find package provider 'NuGet'. It may not be imported yet. Try 'Get-PackageProvider -ListAvailable'. At C:\Program Files\WindowsPowerShell\Modules\PowerShellGet\1.0.0.1\PSModule.psm1:7478 char:30 + ... tProvider = PackageManagement\Get-PackageProvider -Name $script:NuGet ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (Microsoft.Power...PackageProvider:GetPackageProvider) [Get-PackageProvider], Exceptio n + FullyQualifiedErrorId : UnknownProviderFromActivatedList,Microsoft.PowerShell.PackageManagement.Cmdlets.GetPackageProvider Install-Script : NuGet provider is required to interact with NuGet-based repositories. Please ensure that '2.8.5.201' or newer version of NuGet provider is installed. At line:1 char:1 + Install-Script -Name Set-InetpubFolderAcl + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidOperation: ( [Install-Script], InvalidOperationException + FullyQualifiedErrorId : CouldNotInstallNuGetProvider,Install-Script
    • The list of Mac devices rumored to get macOS 26

      By Skyfrog · Posted

      Because Apple has never discontinued Mac models before now?
    • Here's why it makes sense to name it iOS 26 and why it doesn't

      By Skyfrog · Posted

      I recall reading that they intend to synchronize the version numbers between iOS, tvOS and macOS, so we will also be getting macOS 26 up next.
    • The list of Mac devices rumored to get macOS 26

      By neufuse · Posted

      every time.... why can't I install windows 11 on my 8088?

  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      488
    2. 2
      +FloatingFatMan
      257
    3. 3
      snowy owl
      247
    4. 4
      ATLien_0
      222
    5. 5
      +Edouard
      190
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!