• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

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>
0
AntoniRyszard656
Asked:
AntoniRyszard656
1 Solution
 
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
 
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
 
siva350Commented:
Looks like you just need to set you all the the td widths. THis should hold your cells in place.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now