Back To Website Design Forum

Page Layout Problems

  • The Apostle of God
  • Beginner
  • Beginner
  • User avatar
  • Joined: Oct 28, 2003
  • Posts: 54
  • Loc: SDSU, SD, USA
  • Status: Offline

Post February 23rd, 2004, 11:04 am

I'm trying to make this page xhtml 1.0 transitional. Basically, I'm running into a problem with my menu bars; they expand to the size of the text in them. I'm trying to control their width with a stylesheet, and set it to 130px, but I'm doing something wrong. Sorry for another lamo question :oops:

Here is the pages code:
Code: [ Select ]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "tester.css";
</style>
</head>

<body>
<table class="banner">
 <tr>
  <td> <img src="/images/logo.jpg" alt="Logo" width="750" height="115" /></td>
 </tr>
</table>
<table class="body">
 <tr>
  <td class="130" valign="top"><br /> <table class="130">
    <tr>
     <td class="top"> Navigation</td>
    </tr>
    <tr>
     <td class="topmenu"> <p class="menu">
              - <a href="http://www.theapostleofgod.com" >Home</a> <br />
       - <a href="/tos">Original Series</a> <br />
       - <a href="/tng/index.html"> Next Generation</a> <br />
       - <a href="/ds9">Deep Space 9</a> <br />
       - <a href="/voy">Voyager</a> <br />
       - <a href="/ent">Enterprise</a> <br />
       - <a href="/mov">Movies</a> <br />
       - <a href="/forums/">Forums</a> <br />
       - <a href="/store/">Store</a> <br />
       - <a href="/about/">FAAQ</a></p></td>
    </tr>
   </table>
   <br /> <table class="130">
    <tr>
     <td class="top"> Recommended</td>
    </tr>
    <tr>
     <td class="topmenu"> <p class="menu">- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section
       31</a> <br />
       - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega
       Project</a> <br />
       - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek
       Today</a> <br />
       - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN
       </a><br />
       - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
      </p></td>
    </tr>
   </table>
  </td>
  <td width="482" valign="top">
<br />
   <table class="article">
    <tr>
     <td class="top"><p class="bold">Insert Title</p></td>
    </tr>
    <tr>
     <td>
      <p class="main">Insert Tex</p>
      </td>
    </tr>
   </table>
     <br />
   <table align="center" width="480" border="1" bordercolor="#3399cc" cellspacing="1" cellpadding="1" valign="top">
    <tr>
     <td valign="center">
            <p class="disclaimer"> All articles on this site Copyright 2003 (Matthew L. Nowlin), All Rights Reserved.
       All other material is copyright its respective owners. This is a
       fan site; Star Trek is the property of Paramount Pictures. We respect
       copyrights: <a href="mailto:copyright@theapostleofgod.com?subject=COPYRIGHT RELATED">
        Report
       Copyright Issues/Violations.</a>
      
         </td>
    </tr>
   </table>
   <br />

  <td width="130" valign="top"><br /> <table class="130">
    <tr>
     <td class="top"> Recommended</td>
    </tr>
    <tr>
     <td class="topmenu"> <p class="menu">- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section
       31</a> <br />
       - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega
       Project</a> <br />
       - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek
       Today</a> <br />
       - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN
       </a><br />
       - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
      </p></td>
    </tr>
   </table>
   <br /> <table class="130">
    <tr>
     <td class="top"> Recommended</td>
    </tr>
    <tr>
     <td class="topmenu"> <p class="menu">- <a href="/aboutus.html">Synopsis
       Project</a></p></td>
    </tr>
   </table>
   </tr></table>
</body>
</html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <style type="text/css">
  8. @import "tester.css";
  9. </style>
  10. </head>
  12. <body>
  13. <table class="banner">
  14.  <tr>
  15.   <td> <img src="/images/logo.jpg" alt="Logo" width="750" height="115" /></td>
  16.  </tr>
  17. </table>
  18. <table class="body">
  19.  <tr>
  20.   <td class="130" valign="top"><br /> <table class="130">
  21.     <tr>
  22.      <td class="top"> Navigation</td>
  23.     </tr>
  24.     <tr>
  25.      <td class="topmenu"> <p class="menu">
  26.               - <a href="http://www.theapostleofgod.com" >Home</a> <br />
  27.        - <a href="/tos">Original Series</a> <br />
  28.        - <a href="/tng/index.html"> Next Generation</a> <br />
  29.        - <a href="/ds9">Deep Space 9</a> <br />
  30.        - <a href="/voy">Voyager</a> <br />
  31.        - <a href="/ent">Enterprise</a> <br />
  32.        - <a href="/mov">Movies</a> <br />
  33.        - <a href="/forums/">Forums</a> <br />
  34.        - <a href="/store/">Store</a> <br />
  35.        - <a href="/about/">FAAQ</a></p></td>
  36.     </tr>
  37.    </table>
  38.    <br /> <table class="130">
  39.     <tr>
  40.      <td class="top"> Recommended</td>
  41.     </tr>
  42.     <tr>
  43.      <td class="topmenu"> <p class="menu">- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section
  44.        31</a> <br />
  45.        - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega
  46.        Project</a> <br />
  47.        - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek
  48.        Today</a> <br />
  49.        - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN
  50.        </a><br />
  51.        - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
  52.       </p></td>
  53.     </tr>
  54.    </table>
  55.   </td>
  56.   <td width="482" valign="top">
  57. <br />
  58.    <table class="article">
  59.     <tr>
  60.      <td class="top"><p class="bold">Insert Title</p></td>
  61.     </tr>
  62.     <tr>
  63.      <td>
  64.       <p class="main">Insert Tex</p>
  65.       </td>
  66.     </tr>
  67.    </table>
  68.      <br />
  69.    <table align="center" width="480" border="1" bordercolor="#3399cc" cellspacing="1" cellpadding="1" valign="top">
  70.     <tr>
  71.      <td valign="center">
  72.             <p class="disclaimer"> All articles on this site Copyright 2003 (Matthew L. Nowlin), All Rights Reserved.
  73.        All other material is copyright its respective owners. This is a
  74.        fan site; Star Trek is the property of Paramount Pictures. We respect
  75.        copyrights: <a href="mailto:copyright@theapostleofgod.com?subject=COPYRIGHT RELATED">
  76.         Report
  77.        Copyright Issues/Violations.</a>
  78.       
  79.          </td>
  80.     </tr>
  81.    </table>
  82.    <br />
  84.   <td width="130" valign="top"><br /> <table class="130">
  85.     <tr>
  86.      <td class="top"> Recommended</td>
  87.     </tr>
  88.     <tr>
  89.      <td class="topmenu"> <p class="menu">- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section
  90.        31</a> <br />
  91.        - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega
  92.        Project</a> <br />
  93.        - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek
  94.        Today</a> <br />
  95.        - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN
  96.        </a><br />
  97.        - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
  98.       </p></td>
  99.     </tr>
  100.    </table>
  101.    <br /> <table class="130">
  102.     <tr>
  103.      <td class="top"> Recommended</td>
  104.     </tr>
  105.     <tr>
  106.      <td class="topmenu"> <p class="menu">- <a href="/aboutus.html">Synopsis
  107.        Project</a></p></td>
  108.     </tr>
  109.    </table>
  110.    </tr></table>
  111. </body>
  112. </html>

Here is the stylesheet:
Code: [ Select ]
/* CSS Document */
/* CSS Document */
BODY     
    {
    BACKGROUND-COLOR: #000000;
    }
p.main
    {
    text-align: justify;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #bccbdc;
    }
p.disclaimer
    {
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #bccbdc;
    }    
p.menu
    {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #bccbdc;
    }
        
    }
td.title
    {
    background-color: #336699;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #bccbdc;
    font-weight: strong;
    padding: 0 px;
    
    }
td    
    {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #bccbdc;
    font-weight: strong;
    padding: 0 px;
    }
td.episode    
    {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10;
    color: #bccbdc;
    font-weight: strong;
    padding: 0 px;
    }
td.shots
    {
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10;
    color: #bccbdc;
    font-weight: strong;
    padding: 0 px;
    }
.bold
  {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-color: white;    
    font-weight: strong;
    }    
A:link
    {
    COLOR: #597795; TEXT-DECORATION: underline
    }
A:active
    {
    COLOR: #597795; TEXT-DECORATION: underline
    }
A:visited
    {
    COLOR: silver; TEXT-DECORATION: underline
    }
A:hover {
    COLOR: #597795; TEXT-DECORATION: underline
    }
A:mailto
    {
    COLOR: #597795; TEXT-DECORATION: underline
    }
.textfont
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    }
table.banner
    {
    width: 710;
    border: 0;
    vertical-align: top;
    }
table.body
    {
    width: 750;
    height: 100%;
    vertical-align: top;
    }    
td.top
    {
    text-align: center;
    font size: 20;
    height: 20px;
    vertical-align: top;
    background: #336699;
    border: 1px solid #3388cc;
    }
td.topmenu
    {
    vertical-align: top;
    background: #000000;
    border: 1px solid #3399cc;
    }    
td.center
    {
    text-align: center;
    height: 20;
    font-size: 12pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    vertical-align: center;
    }
table.130
    {        
    width: fixed 130px;
    padding: 1;
    border: 1px solid #3399cc;
    }    
table.article
    {    
    width: 480px;
    padding: 1;
    border: 1px solid #3399cc;
    }
  1. /* CSS Document */
  2. /* CSS Document */
  3. BODY     
  4.     {
  5.     BACKGROUND-COLOR: #000000;
  6.     }
  7. p.main
  8.     {
  9.     text-align: justify;
  10.     font-family: Verdana, Arial, Helvetica, sans-serif;
  11.     font-size: 10pt;
  12.     color: #bccbdc;
  13.     }
  14. p.disclaimer
  15.     {
  16.     text-align: center;
  17.     font-family: Verdana, Arial, Helvetica, sans-serif;
  18.     font-size: 8pt;
  19.     color: #bccbdc;
  20.     }    
  21. p.menu
  22.     {
  23.     text-align: left;
  24.     font-family: Verdana, Arial, Helvetica, sans-serif;
  25.     font-size: 10pt;
  26.     color: #bccbdc;
  27.     }
  28.         
  29.     }
  30. td.title
  31.     {
  32.     background-color: #336699;
  33.     text-align: center;
  34.     font-family: Verdana, Arial, Helvetica, sans-serif;
  35.     font-size: 12pt;
  36.     color: #bccbdc;
  37.     font-weight: strong;
  38.     padding: 0 px;
  39.     
  40.     }
  41. td    
  42.     {
  43.     text-align: left;
  44.     font-family: Verdana, Arial, Helvetica, sans-serif;
  45.     font-size: 12pt;
  46.     color: #bccbdc;
  47.     font-weight: strong;
  48.     padding: 0 px;
  49.     }
  50. td.episode    
  51.     {
  52.     text-align: left;
  53.     font-family: Verdana, Arial, Helvetica, sans-serif;
  54.     font-size: 10;
  55.     color: #bccbdc;
  56.     font-weight: strong;
  57.     padding: 0 px;
  58.     }
  59. td.shots
  60.     {
  61.     text-align: center;
  62.     font-family: Verdana, Arial, Helvetica, sans-serif;
  63.     font-size: 10;
  64.     color: #bccbdc;
  65.     font-weight: strong;
  66.     padding: 0 px;
  67.     }
  68. .bold
  69.   {
  70.     text-align: left;
  71.     font-family: Verdana, Arial, Helvetica, sans-serif;
  72.     font-size: 12pt;
  73.     font-color: white;    
  74.     font-weight: strong;
  75.     }    
  76. A:link
  77.     {
  78.     COLOR: #597795; TEXT-DECORATION: underline
  79.     }
  80. A:active
  81.     {
  82.     COLOR: #597795; TEXT-DECORATION: underline
  83.     }
  84. A:visited
  85.     {
  86.     COLOR: silver; TEXT-DECORATION: underline
  87.     }
  88. A:hover {
  89.     COLOR: #597795; TEXT-DECORATION: underline
  90.     }
  91. A:mailto
  92.     {
  93.     COLOR: #597795; TEXT-DECORATION: underline
  94.     }
  95. .textfont
  96.     {
  97.     font-family: Verdana, Arial, Helvetica, sans-serif;
  98.     font-size: small;
  99.     }
  100. table.banner
  101.     {
  102.     width: 710;
  103.     border: 0;
  104.     vertical-align: top;
  105.     }
  106. table.body
  107.     {
  108.     width: 750;
  109.     height: 100%;
  110.     vertical-align: top;
  111.     }    
  112. td.top
  113.     {
  114.     text-align: center;
  115.     font size: 20;
  116.     height: 20px;
  117.     vertical-align: top;
  118.     background: #336699;
  119.     border: 1px solid #3388cc;
  120.     }
  121. td.topmenu
  122.     {
  123.     vertical-align: top;
  124.     background: #000000;
  125.     border: 1px solid #3399cc;
  126.     }    
  127. td.center
  128.     {
  129.     text-align: center;
  130.     height: 20;
  131.     font-size: 12pt;
  132.     font-family: Verdana, Arial, Helvetica, sans-serif;
  133.     vertical-align: center;
  134.     }
  135. table.130
  136.     {        
  137.     width: fixed 130px;
  138.     padding: 1;
  139.     border: 1px solid #3399cc;
  140.     }    
  141. table.article
  142.     {    
  143.     width: 480px;
  144.     padding: 1;
  145.     border: 1px solid #3399cc;
  146.     }


The class I'm having problems with is table.130... I Think. Heck, I don't know if I'm even doing this right over all. Slap me upside the head if you need to :(
The page is on my server at http://www.theapostleofgod.com/xhtml.html
Thanks in advance.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 23rd, 2004, 11:04 am

  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 16, 2004
  • Posts: 379
  • Loc: here
  • Status: Offline

Post February 23rd, 2004, 1:15 pm

You may want to consider dropping the whole table layout and move to a box model using an external CSS sheet. I don't know your issue for sure, but after looking . . . if I had to guess I would say it relates to the way tables behave naturally. I haven't spent much time defining classes for tables, but a normal table cell will expand to fit text if it is too small rather than the text wrapping, which is what it sounds like your issue is.

If, for instance, you were to simply create a box using a style sheet and specify the width, you would accomplish 2 things: 1) remove all that code related to the table from your page, and 2) The box would behave the way you want it to.

Using CSS for positioning is a bit of a pain at first as you learn it, but once you get the hang of it, it's pretty nice.

Speaking of your code in particular, it looks like the way you have the classes entered, you're telling the table as a whole to be 130px (which isn't a terribly big space), then telling each cell in the table to use 20px font, which is a fairly large font. Not much room there to work. But there's a bunch of other issues there too, from what I can tell.

My advice to you would defenitely be to start over without the table layout, and begin learning to position your elements with CSS. I think you'll find it much simpler than trying to do it with tables.

Mark
  • The Apostle of God
  • Beginner
  • Beginner
  • User avatar
  • Joined: Oct 28, 2003
  • Posts: 54
  • Loc: SDSU, SD, USA
  • Status: Offline

Post February 23rd, 2004, 1:48 pm

Agreed :)
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 12, 2004
  • Posts: 350
  • Loc: NY
  • Status: Offline

Post February 24th, 2004, 2:02 pm

When you say 'box', do you mean 'div'?
  • The Apostle of God
  • Beginner
  • Beginner
  • User avatar
  • Joined: Oct 28, 2003
  • Posts: 54
  • Loc: SDSU, SD, USA
  • Status: Offline

Post February 24th, 2004, 2:05 pm

Thanks, I've resolved this issue. Could a mod please close this?
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post February 24th, 2004, 2:25 pm

Could you please post your answer...
Pixel Acres V2
  • The Apostle of God
  • Beginner
  • Beginner
  • User avatar
  • Joined: Oct 28, 2003
  • Posts: 54
  • Loc: SDSU, SD, USA
  • Status: Offline

Post February 24th, 2004, 2:28 pm

The answer was: I abandoned tables and went to stylesheets :)
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 12, 2004
  • Posts: 350
  • Loc: NY
  • Status: Offline

Post February 24th, 2004, 3:28 pm

Excuse me, but that wasn't my question. It wasn't even addressed to you - you didn't say anything about boxes. I was talking to allgoodpeople. He said something about boxes, and I was asking if he meant divs, so I could understand what was going on more clearly. Thanks for reading. Really.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 16, 2004
  • Posts: 379
  • Loc: here
  • Status: Offline

Post February 24th, 2004, 4:19 pm

conorific wrote:
Excuse me, but that wasn't my question. It wasn't even addressed to you - you didn't say anything about boxes. I was talking to allgoodpeople. He said something about boxes, and I was asking if he meant divs, so I could understand what was going on more clearly. Thanks for reading. Really.


well, yes and no. i apologize if i'm "mixing my metaphors" so to speak. i'm still a little new to the web design area, so i may use a term incorrectly from time to time.

a div is not always a box in my mind, but i've never seen a box that was not a div (doesn't mean it can't happen though). the best example of what i mean can be seen at http://bluerobot.com/web/layouts/layout1.html

There you can see very clearly that most sites are essentially just a series of boxes arranged at various places on a page with content in them. most people have a header area running horizontally on their site (1 "box"), some sort of vertical menu area or areas (another "box") and a main content area (a third "box"). This is a fairly simple page layout using boxes in the sense i meant it.

there may be other divs in the site, but i guess i don't really think of them as boxes, per se. but now that i write about it and think a little bit about my understanding of what a div is, maybe all divs are boxes. a div separates a section of the code out from the rest of the page. if one were to nest divs, i suppose that would create a "box in a box" effect, even if it did not create separate sections in the web page from a layout perspective.

on the flip side of that, i tend to think of a box as being able to be positioned, so a nested div without an ID or Class in it wouldn't fall into that category.

I think it may be helpful to distinguish between talking about boxes from a layout perspective, vs talking about boxes from a code/design perspective as well.

I know in some of my discussions with digitalmedia and lazyjim, they spoke quite a bit about the "box model", specifically referring to page layout. they may be able to speak more definitvely on what exactly constitutes a box.

So, after all that, i'm not sure if i was more confusing or helpful :lol: :oops: Hope it helps!

Mark
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post February 24th, 2004, 4:21 pm

They're talking about the Box Model which is not necessarily limited to divs. The example on the page that the link in the previous sentence leads to uses a list for example.
Free Programming Resources
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 12, 2004
  • Posts: 350
  • Loc: NY
  • Status: Offline

Post February 24th, 2004, 4:23 pm

Okay. I get it. Thanky.

Page 1 of 1

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 91 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.