Question about html page layout?

Hello,

Could anyone possibly advise in the html code below, when the td displays the word Test.

"Test" is halfway down the page, rather than at the top?

Thank you


<html>

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

<style type=text/css>
UL.menu {
        LEFT: -1.6em; MARGIN: 0em; POSITION: relative
}
LI.menu {
        LIST-STYLE-TYPE: none; POSITION: relative; TEXT-ALIGN: right
}
.sidebar {
        PADDING-RIGHT: 0em; PADDING-LEFT: 0em; 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 height="20">
                  <font size="2" color="#FFFFFF">
                     TOOLS:
                  </font>
               </td>
            <tr>
            <tr>
               <td>
                  <li><a href="index.html">Home</a><br/>
               </td>
            </tr>
            <tr>
               <td>
                  <li><a href="controller?action=login">link  1</a><br/>
               </td>
            </tr>
            <tr>
               <td>
                  <li><a href="controller?action=add">link 2</a><br/>
               </td>
            </tr>
            <tr>
               <td>
                  <li><a href="controller?action=edit">link 3</a><br/>
               </td>
            </tr>
            <tr>
               <td>
                  <li><a href="controller?action=search">link 4</a><br/>
               </td>
            </tr>
         </table>
         </DIV>
         </td>
         <td class=main>
         <td>
             Test
          </td>
     </tr>
   </tbody>
</table>

</body>

</html>
AntoniRyszard656Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
sachin_raoraneConnect With a Mentor Commented:
Whenever you add any text inside <td> tag, default it will vertically align to middle.

You need to change that to Top...

so whichever <TD> holds the text "test" just replace the <TD>test</TD> as follows

<TD valign="top">test</TD>


0
 
Eternal_StudentCommented:
You have a redundant <td> tag below <td class=main>

I would remove that stray <td> tag and add this to class "main":

vertical-align:top;

Your menu and layout shouldnt be created in tables anyhow .. you should be using divs and that menu could easily be created using a list.

0
 
AntoniRyszard656Author Commented:
Thanks

When you said "the menu could easily be created using a list".

Do you mean the list in the side-menu should be created <p></p> rather than the <td> tags?
0
All Courses

From novice to tech pro — start learning today.