HTML - Alignment problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • beacon
    Contributor
    • Aug 2007
    • 579
    #1

    HTML - Alignment problem

    I'm having trouble with a personal web page that I'm designing for work. I'm not well versed in HTML and could use some assistance.

    Currently, when I open the browser, the table in the head at the top of the screen doesn't stay flush with the top of the screen. I've tried changing the alignment, but have had no luck.

    I'm not using a stylesheet and am wondering if maybe that's the problem.

    Also, below the head, I have another table that has links on one side and information on the other. I have a good size gap on the right side of the page that I would like to fill by moving the info side of the table over to the right some and then making the links side of the table a little bigger by moving it to the right.

    Here's an idea of what I'm working with:

    -----------------------------
    | Links | Info | GAP |
    -----------------------------

    And here's my code:
    [code=html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <style>
    <!--

    .mouseBeOffMe {
    border-top: 5px solid #d3d3d3;
    border-bottom: 5px solid #d3d3d3;
    border-left: 5px solid #d3d3d3;
    border-right: 5px solid #d3d3d3;
    }

    .mouseBeOnMe {
    border-top: 3px solid #d3d3d3;
    border-bottom: 7px solid #d3d3d3;
    border-left: 6px solid #d3d3d3;
    border-right: 4px solid #d3d3d3;
    }

    .mouseBeDown {
    border-top: 7px solid #d3d3d3;
    border-bottom: 3px solid #d3d3d3;
    border-left: 4px solid #d3d3d3;
    border-right: 6px solid #d3d3d3;
    }

    .mouseBeUp {
    border-top: 4px solid #d3d3d3;
    border-bottom: 6px solid #d3d3d3;
    border-left: 6px solid #d3d3d3;
    border-right: 4px solid #d3d3d3;
    }

    //-->
    </style>

    <title><-- FAQs --> Provided by CRS Support</title>

    <link rel="shortcut icon" href="P:/HTML Docs/favicon.ico"/>
    <!-- <table style="margin-left:0px" width="900px" height="150px" border="0" cellpadding="0" cellspacing="0" bgcolor="gray">
    <tr><td>

    <h1 align=center></td></tr></h1> -->
    </head>
    <a name="top"></a>
    <table BORDER="5" cellpadding="0" cellspacing="0" width="100%" bgcolor="#C11B1 7">
    <td width="234" valign="top">
    </a>
    </td>
    <th valign="middle" align="left" class="right">

    </table>
    <body bgcolor="#B7CEE C" text="000000" link="#153e7e" vlink="#1589FF" alink="red" width="900"><b>
    <table style="margin-left:1px" width="790px" border="0" cellpadding="0" cellspacing="2" >
    <tr>
    <td width="137" class="content" valign="top"><b r />
    <a class="left" href="FAQs[real].html" target="_top">
    <center>
    <img src="home3.jpg"
    width="50"
    height="50"
    border="0"
    alt="home"
    class="mouseBeO ffMe"
    onmouseover="th is.className='m ouseBeOnMe'"
    onmousedown="th is.className='m ouseBeDown'"
    onmouseup="this .className='mou seBeUp'"
    onmouseout="thi s.className='mo useBeOffMe'"></center></a>

    <hr style="color:#1 53e7e" />

    <a class="left" href="FAQs[real].html" target="_top"></a>

    <b><a style="color:#C 11B17">FAQs</a></b><br />

    <a class="left" target="_top" style="text-decoration:none " href="FAQs[real].html" onmouseover="th is.style.textDe coration='under line'" onmouseout="thi s.style.textDec oration='none'" >FAQs HOME</a><br />
    <a class="left" target="_top" style="text-decoration:none " href="LAN FAQ Test Page.htm" onmouseover="th is.style.textDe coration='under line'" onmouseout="thi s.style.textDec oration='none'" >LAN FAQs</a><br />
    <a class="left" target="_top" style="text-decoration:none " href="RADplus FAQ Test Page.htm" onmouseover="th is.style.textDe coration='under line'" onmouseout="thi s.style.textDec oration='none'" >RADplus FAQs</a><br />
    <a class="left" target="_top" style="text-decoration:none " href="AccessHR FAQ Test Page.htm" onmouseover="th is.style.textDe coration='under line'" onmouseout="thi s.style.textDec oration='none'" >AccessHR FAQs</a><br />
    <a class="left" target="_top" style="text-decoration:none " href="MS Office FAQ Test Page.htm" onmouseover="th is.style.textDe coration='under line'" onmouseout="thi s.style.textDec oration='none'" >Microsoft Office FAQs</a><br />
    <br />
    <b><a style="color:#C 11B17">RADplus ScreenShots</b><br />

    <br />
    <b><a style="color:#C 11B17">Examples/Quiz</b>
    <br />

    <br />
    <b><a style="color:#C 11B17">Referenc es</b><br />
    <br />
    <b><a style="color:#C 11B17">Selected Reading</b><br />


    </b></td>
    <td valign="top">
    <br><br><tabl e align="right" style="border: 1px solid gray" width="650" bgcolor="white" border="0" cellpadding="5" cellspacing="0" >
    <tr>
    <td>


    <h1 style="color:#C 11B17" align="center"> Welcome to the Computer Help Center!</h1>
    <hr /><br><h3 style="color:#C 11B17">Please follow the links on the left-hand side to find the info you need.</h3>

    <hr />

    <p class="intro">H TML uses a hyperlink to link to another document on the Web.</p>

    <hr />

    <h2 style="color:#C 11B17">Examples </h2>

    <p>
    <a target="_blank" href="tryit.asp ?filename=tryht ml_links">Creat e hyperlinks</a><br />
    <a style="color:#C 11B17">This example demonstrates how to create links in an HTML document.
    </a></p>

    <p><a target="_blank" href="tryit.asp ?filename=tryht ml_imglink">An image as a link</a><br />
    <a style="color:#C 11B17">This example demonstrates how to use an image as a link.
    </a></p>

    <p style="color:#C 11B17">(You can find more examples at the bottom of this page)</p>

    <hr />
    <br><p>
    <br>

    </body>
    </html>
    [/code]
    Tags: None
    • Markus
      Recognized Expert Expert
      • Jun 2007
      • 6092
      #2
      here's the general markup for a webpage:
      [code=html]
      <html doctype goes here...>
      <head>
      <title>Title</title>
      <link= ... some links />
      <script ... some script></script>
      <style...>
      </style>
      </head>
      <body>
      <p>HTML MARKUS GOES HERE</p>
      </body>
      </html>
      [/code]
      In yours, you have markup inside the <head> tags.. this just won't fly with the html gods!

      ya dig.

        Comment

        • beacon
          Contributor
          • Aug 2007
          • 579
          #3
          No, I don't dig. I'm still new to this, so I'm not sure how putting my markup in between p tags will help me with my alignment problem in either case.

          Also, by markup, do you mean changing the fonts and things of that nature?

          It may look like I know what I'm doing, but I've just been checking out a bunch of tutorials and trying to piece together as much of this as I can. I'm realizing that I should probably use CSS, but I know even less about it than I do HTML or javascript.

            Comment

            Previous template Next
            Working...