1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Some HTML and CSS help.

Discussion in 'Web Design & Development' started by lumentec, Oct 11, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. lumentec

    lumentec Thread Starter

    Joined:
    Mar 23, 2008
    Messages:
    103
    This code:
    HTML:
    <head>
      <title>Start Page</title>
      <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
      <style>
      table.main {
      width: 820px;
      }
      
      td.stats {
      width: 210px;
      background-color: F0F0F0;
      border-style: solid;
      border-width: thick;
      border-color: black;
      display: inline;
      }
      
      td.nav {
      width: 610px;
      height: 60px;
      display: inline;
      background-color:transparent;
      border-style: solid;
      border-width: thick;
      border-color: black;
      }
      
      td.main {
      width: 600px;
      display: inline;
      background-color:transparent;
      border-style: solid;
      border-width: thick;
      border-color: black;
      }
      
      tr {
      display: inline;
      }
      
      </style>
    </head>
    <body>
    <table class="main">
    <tr>
    <td class="stats">
    Stats go here.
    </td>
    <td class="nav"> <!-- must be inline. -->
    Navbar here.
    </td>
    </tr>
    <tr>
    <td class="main"> <!-- must be inline as well. -->
    Main content here.
    </td>
    </tr>
    </table>
    </body>
    </html>
    Produces something that looks like the picture attached.

    I want it to be more like this:
    HTML:
    ------------------------------------------  -----------------------------------------------------------------------
    |            200 x *                      | |                       600 x 50-60                                    |
    |                                         | |                                                                      |
    |                                         | ------------------------------------------------------------------------
    |                                         | ------------------------------------------------------------------------
    |                                         | |                            600 x *                                    |
    |                                         | |                                                                       |
    |                                         | |                                                                       |
    ------------------------------------------  ------------------------------------------------------------------------
    

    How could I go about fixing this?

    Thanks. :)
     

    Attached Files:

  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,270
    First Name:
    Colin
    Here's some css for you saved as styles.css

    Code:
     #container {
      width: 825px;
      }
      
      #stats {
      width: 201px;
      min-height: 100px;
      background-color: F0F0F0;
      border-style: solid;
      border-width: thick;
      border-color: black;
      display: inline;
      float: left;
      }
      
      #nav {
      width: 600px;
      height: 60px;
      display: inline;
      background-color:transparent;
      border-style: solid;
      border-width: thick;
      border-color: black;
      float: right;
      }
      
      #main {
      width: 600px;
      display: inline;
      background-color:transparent;
      border-style: solid;
      border-width: thick;
      border-color: black;
      float:right;
      }
    Here's the html page that goes with it

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="container" align="center">
    <div id="stats">
    Stats here
    </div>
    <div id="nav">
    Navigation here
    </div>
    <div id="main">
    Content here
    </div>
    </div>
    </body>
    </html>
    Gives you what you want you will need to change around the widths padding etc to suit.
     
  3. lumentec

    lumentec Thread Starter

    Joined:
    Mar 23, 2008
    Messages:
    103
    If I change the margin to 5 pixels on each side for all the items, and I change the total width to 820px... I get something that looks like this:


    [​IMG]


    Here's the code:
    Code:
    #container {
      width: 810px;
      }
      
      #stats {
      width: 200px;
      min-height: 100px;
      padding: 5px 5px 5px 5px;
      background-color: F0F0F0;
      border-style: solid;
      border-width: thick;
      border-color: black;
      display: inline;
      float: left;
      }
      
      #nav {
      width: 600px;
      height: 60px;
      padding: 5px 5px 5px 5px;
      display: inline;
      background-color:transparent;
      border-style: solid;
      border-width: thick;
      border-color: black;
      float: right;
      }
      
      #main {
      width: 600px;
      padding: 5px 5px 5px 5px;
      display: inline;
      background-color:transparent;
      border-style: solid;
      border-width: thick;
      border-color: black;
      float:right;
      }
     
  4. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,270
    First Name:
    Colin
    That is exactly what is supposed to happen. A margin adds pixels to the div so if you have a div that is 200 wide and add a 5px margin all round then you need 210px to display it. Padding gives an indent of 5 pixels from the inside of the div. If you remove your borders it will all fit fine or adjust the container width to make it large enough to fit your divs with their margins.

    See the attached picture.

    BTW you haven't increased the container to 820 it is still 810
     

    Attached Files:

  5. lumentec

    lumentec Thread Starter

    Joined:
    Mar 23, 2008
    Messages:
    103
    Why is it still 810?
     
  6. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,270
    First Name:
    Colin
    Coz in your code above (the CSS) you didn't change it to 820 change the container width to 840 and then reduce it until you get what you want.
     
  7. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,270
    First Name:
    Colin
    Here's a screen grab from my original code that I posted
     

    Attached Files:

    • 1.jpg
      1.jpg
      File size:
      16.8 KB
      Views:
      34
  8. lumentec

    lumentec Thread Starter

    Joined:
    Mar 23, 2008
    Messages:
    103
    I found what was wrong. :p
    I hadn't accounted for the borders on the div's which added to the overall width.
     
  9. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/758287

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice