Question about html-page layout?

Hello,

I was trying to build a template layout for my web-pages.

When I run the html here, the text in the side-menu is moved when I add text and a table on the right.

Could anyone advise of a approach to stop the menu text from moving?

Thank you

<html>

<head>
  <title></title>
</head>

<style type=text/css>
body {
        LEFT: 0em; COLOR: #000; FONT-FAMILY: serif; TOP: 0em; BACKGROUND-COLOR: #fff
}
a {
        TEXT-DECORATION: none
}
UL.menu {
        LEFT: -1.6em; MARGIN: 0em; POSITION: relative
}
LI.menu {
        LIST-STYLE-TYPE: none; POSITION: relative; TEXT-ALIGN: right
}
.sidebar {
        PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; PADDING-BOTTOM: 0em; PADDING-TOP: 0em; TOP: 0em; BACKGROUND-COLOR: #eee
}
.main {
        PADDING-RIGHT: 1.5em; MARGIN-TOP: 1em; PADDING-LEFT: 1.5em; LEFT: 10em; PADDING-BOTTOM: 2em; MARGIN-RIGHT: 2em; TOP: 0em
}
DIV.box2 {
        PADDING-RIGHT: 0em; PADDING-LEFT: 0em; PADDING-BOTTOM: 25ex; MARGIN: 1em; PADDING-TOP: 0.5ex
}
</style>

<body>

<table>
   <tbody>
      <tr>
         <td class=sidebar>
         <DIV class=box2>
         <table>
            <tr bgcolor="#0086b2">
               <td width="40%" height="20">
                  <font size="2" color="#FFFFFF">
                     TOOLS:
                  </font>
               </td>
            <tr>
         </table>
         <a href="index.html">Home</a><br/>
         <a href="controller?action=login">Login</a><br/>
         <a href="controller?action=add">Add Files</a><br/>
         <a href="controller?action=edit">Edit Upload</a><br/>
         <a href="controller?action=search">List Records</a><br/>
         </DIV>
         </td>
         <td valign="top" class=main>
            <p><font color="#000099">This course is interdisciplinary, drawing upon
             knowledge in the fields of&nbsp; business ethics, strategy, management,
             accounting and economics.
             This is reflected in the team teaching approach adopted during this
             module. Another&nbsp; important consideration of the course is the
             balancing of conceptual
             theoretical material with applied work.</font>
             </p><br>

             <div align="center">
             <table border="1" width="100%">
                <tr>
                   <td colspan="2">New Table</td>
                </tr>
                <tr>
                   <td>Cell one</td>
                   <td>Cell two</td>
                </tr>
             </table>
             </div>
         </td>
     </tr>
   </tbody>
</table>

</body>

</html>
AntoniRyszard656Asked:
Who is Participating?
 
azcn2503Commented:
I thought it was at first, but it was actually because I've changed my default fonts in Firefox. So no, nothing's being squashed, it looks the same width.

... Wait a sec...

On closer inspection, after having removed the block of text and the table from the right hand side I can see that the menu on the left has expanded. To get by this problem, you need to set a fixed width, here is an example of setting the width to 150 pixels (which looks pretty much spot on to the original):

<html>

<head>
  <title></title>
</head>

<style type=text/css>
body {
        LEFT: 0em; COLOR: #000; FONT-FAMILY: serif; TOP: 0em; BACKGROUND-COLOR: #fff
}
a {
        TEXT-DECORATION: none
}
UL.menu {
        LEFT: -1.6em; MARGIN: 0em; POSITION: relative
}
LI.menu {
        LIST-STYLE-TYPE: none; POSITION: relative; TEXT-ALIGN: right
}
.sidebar {
        PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; PADDING-BOTTOM: 0em; PADDING-TOP: 0em; TOP: 0em; BACKGROUND-COLOR: #eee; WIDTH: 150px;
}
.main {
        PADDING-RIGHT: 1.5em; MARGIN-TOP: 1em; PADDING-LEFT: 1.5em; LEFT: 10em; PADDING-BOTTOM: 2em; MARGIN-RIGHT: 2em; TOP: 0em
}
DIV.box2 {
        PADDING-RIGHT: 0em; PADDING-LEFT: 0em; PADDING-BOTTOM: 25ex; MARGIN: 1em; PADDING-TOP: 0.5ex
}
</style>

<body>

<table>
   <tbody>
      <tr>
         <td class=sidebar>
         <DIV class=box2>
         <table>
            <tr bgcolor="#0086b2">
               <td width="40%" height="20">
                  <font size="2" color="#FFFFFF">
                     TOOLS:
                  </font>
               </td>
            <tr>
         </table>
         <a href="index.html">Home</a><br/>
         <a href="controller?action=login">Login</a><br/>
         <a href="controller?action=add">Add Files</a><br/>
         <a href="controller?action=edit">Edit Upload</a><br/>
         <a href="controller?action=search">List Records</a><br/>
         </DIV>
         </td>
         <td valign="top" class=main>
            <p><font color="#000099">This course is interdisciplinary, drawing upon
             knowledge in the fields of&nbsp; business ethics, strategy, management,
             accounting and economics.
             This is reflected in the team teaching approach adopted during this
             module. Another&nbsp; important consideration of the course is the
             balancing of conceptual
             theoretical material with applied work.</font>
             </p><br>

             <div align="center">
             <table border="1" width="100%">
                <tr>
                   <td colspan="2">New Table</td>
                </tr>
                <tr>
                   <td>Cell one</td>
                   <td>Cell two</td>
                </tr>
             </table>
             </div>
         </td>
     </tr>
   </tbody>
</table>

</body>

</html>

I hope that this helps.
0
 
Ian GoughCommented:
Change <td class=sidebar> to <td class=sidebar valign="top">

Now it should stay up the top.
Hope this helps,
Ian
0
 
azcn2503Commented:
Where does the left menu move to? I have copied the code and opened it in Firefox 1.5 and Internet Explorer 7 and it's showing the same thing.
0
 
AntoniRyszard656Author Commented:
Thanks

When I run the html code, I am finding the menu options are being squashed.

And this only happened when I added the text on the right was added.

Is the text on the side-menu being squashed in your browser?

0
 
siva350Commented:
Looks like you just need to set you all the the td widths. THis should hold your cells in place.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.