By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

HTML - Alignment problem

beacon
100+
P: 579
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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.  
  5. <style>
  6. <!--
  7.  
  8. .mouseBeOffMe {
  9. border-top:    5px  solid #d3d3d3; 
  10. border-bottom: 5px  solid #d3d3d3; 
  11. border-left:   5px  solid #d3d3d3;
  12. border-right:  5px  solid #d3d3d3; 
  13. }
  14.  
  15. .mouseBeOnMe {
  16. border-top:    3px  solid #d3d3d3;
  17. border-bottom: 7px  solid #d3d3d3;
  18. border-left:   6px  solid #d3d3d3; 
  19. border-right:  4px  solid #d3d3d3;
  20. }
  21.  
  22. .mouseBeDown {
  23. border-top:    7px  solid #d3d3d3;
  24. border-bottom: 3px  solid #d3d3d3; 
  25. border-left:   4px  solid #d3d3d3; 
  26. border-right:  6px  solid #d3d3d3;
  27. }
  28.  
  29. .mouseBeUp {
  30. border-top:    4px  solid #d3d3d3;
  31. border-bottom: 6px  solid #d3d3d3; 
  32. border-left:   6px  solid #d3d3d3; 
  33. border-right:  4px  solid #d3d3d3;
  34. }
  35.  
  36. //-->
  37. </style>
  38.  
  39. <title><-- FAQs --> Provided by CRS Support</title>
  40.  
  41. <link rel="shortcut icon" href="P:/HTML Docs/favicon.ico"/>
  42. <!-- <table style="margin-left:0px" width="900px" height="150px" border="0" cellpadding="0" cellspacing="0" bgcolor="gray">
  43. <tr><td>
  44.  
  45. <h1 align=center></td></tr></h1> -->
  46. </head>
  47. <a name="top"></a>
  48. <table BORDER="5" cellpadding="0" cellspacing="0" width="100%" bgcolor="#C11B17">
  49. <td width="234" valign="top">
  50. </a>
  51. </td>
  52. <th valign="middle" align="left" class="right">
  53.  
  54. </table>
  55. <body bgcolor="#B7CEEC" text="000000" link="#153e7e" vlink="#1589FF" alink="red" width="900"><b>
  56. <table style="margin-left:1px" width="790px" border="0" cellpadding="0" cellspacing="2">
  57. <tr>
  58. <td width="137" class="content" valign="top"><br />
  59. <a class="left" href="FAQs[real].html" target="_top">
  60. <center>
  61. <img src="home3.jpg" 
  62. width="50" 
  63. height="50" 
  64. border="0" 
  65. alt="home" 
  66. class="mouseBeOffMe" 
  67. onmouseover="this.className='mouseBeOnMe'" 
  68. onmousedown="this.className='mouseBeDown'"
  69. onmouseup="this.className='mouseBeUp'" 
  70. onmouseout="this.className='mouseBeOffMe'"></center></a>
  71.  
  72. <hr style="color:#153e7e" />
  73.  
  74. <a class="left" href="FAQs[real].html" target="_top"></a>
  75.  
  76. <b><a style="color:#C11B17">FAQs</a></b><br />
  77.  
  78. <a class="left" target="_top" style="text-decoration:none" href="FAQs[real].html" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">FAQs HOME</a><br />
  79. <a class="left" target="_top" style="text-decoration:none" href="LAN FAQ Test Page.htm" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">LAN FAQs</a><br />
  80. <a class="left" target="_top" style="text-decoration:none" href="RADplus FAQ Test Page.htm" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">RADplus FAQs</a><br />
  81. <a class="left" target="_top" style="text-decoration:none" href="AccessHR FAQ Test Page.htm" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">AccessHR FAQs</a><br />
  82. <a class="left" target="_top" style="text-decoration:none" href="MS Office FAQ Test Page.htm" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Microsoft Office FAQs</a><br />
  83. <br />
  84. <b><a style="color:#C11B17">RADplus ScreenShots</b><br />
  85.  
  86. <br />
  87. <b><a style="color:#C11B17">Examples/Quiz</b>
  88. <br />
  89.  
  90. <br />
  91. <b><a style="color:#C11B17">References</b><br />
  92. <br />
  93. <b><a style="color:#C11B17">Selected Reading</b><br />
  94.  
  95.  
  96. </b></td>
  97. <td valign="top">
  98. <br><br><table align="right" style="border: 1px solid gray" width="650" bgcolor="white" border="0" cellpadding="5" cellspacing="0">
  99. <tr>
  100. <td>
  101.  
  102.  
  103. <h1 style="color:#C11B17" align="center">Welcome to the Computer Help Center!</h1>
  104. <hr /><br><h3 style="color:#C11B17">Please follow the links on the left-hand side to find the info you need.</h3>
  105.  
  106. <hr />
  107.  
  108. <p class="intro">HTML uses a hyperlink to link to another document on the Web.</p>
  109.  
  110. <hr />
  111.  
  112. <h2 style="color:#C11B17">Examples</h2>
  113.  
  114. <p>
  115. <a target="_blank" href="tryit.asp?filename=tryhtml_links">Create hyperlinks</a><br />
  116. <a style="color:#C11B17">This example demonstrates how to create links in an HTML document.
  117. </a></p>
  118.  
  119. <p><a target="_blank" href="tryit.asp?filename=tryhtml_imglink">An image as a link</a><br />
  120. <a style="color:#C11B17">This example demonstrates how to use an image as a link.
  121. </a></p>
  122.  
  123. <p style="color:#C11B17">(You can find more examples at the bottom of this page)</p>
  124.  
  125. <hr />
  126. <br><p>
  127. <br>
  128.  
  129. </body>
  130. </html>
  131.  
Feb 7 '08 #1
Share this Question
Share on Google+
2 Replies


Markus
Expert 5K+
P: 6,050
here's the general markup for a webpage:
Expand|Select|Wrap|Line Numbers
  1. <html doctype goes here...>
  2.  <head>
  3.   <title>Title</title>
  4.   <link= ... some links />
  5.   <script ... some script></script>
  6.   <style...>
  7.   </style>
  8.  </head>
  9. <body>
  10. <p>HTML MARKUS GOES HERE</p>
  11. </body>
  12. </html>
  13.  
In yours, you have markup inside the <head> tags.. this just won't fly with the html gods!

ya dig.
Feb 7 '08 #2

beacon
100+
P: 579
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.
Feb 7 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.