HTML and CSS RSS HTML and CSS RSS

Positioning Text and Links

Thread Solved

•
•
Join Date: Mar 2008
Posts: 370
Reputation: NinjaLink is an unknown quantity at this point 
Solved Threads: 0
NinjaLink NinjaLink is offline Offline
Posting Whiz

Positioning Text and Links

 
0
  #1
Mar 17th, 2009
Hello,

I am having a problem trying to get the "News" section directly in the middle of the page while keeping the "Links" section staying the same.

Right now, the "News" section appears in the middle below the "Links" section.

I want both the Links and News section to appear on the same row going across, so I can make the page look better. How do I fix this problem?

I'm not a good explainer, so I provided the source code for the page. I'm sure just by looking at the display, you will see the problem!


Also, is there any ideas to make my page look better? Like should I put a table border around the entire page? It does kind of seem unorganized, but this is my first time building a webpage.

Thanks for all who helps!

CSS Syntax (Toggle Plain Text) 
  1. <?xml version = "1.0" encoding = "utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4.  
  5. <html xmlns = "http://www.w3.org/1999/xhtml">
  6.  
  7. <head>
  8.  
  9. <title>Aaron Cannon's Home page</title>
  10.  
  11.  
  12. <style type = "text/css">
  13.  
  14. div.menu { font-weigh: bold; color: black; border: 2px solid #225599;
  15.            text-align: center; width: 10em; background-color: #000000 }
  16.  
  17. </style>
  18.  
  19. </head>
  20.  
  21.  
  22. <body bgcolor="#000000">
  23.  
  24.  
  25.  
  26.  
  27. <div style="text-align: center;">
  28.  
  29.  
  30. <p style = "font-size: 15pt; color: #FFFFFF">
  31.  
  32. <table border = "1">
  33.  
  34. <thead>
  35.  
  36. <th>
  37.  
  38.  
  39.   Aaron Cannon's Webpage
  40.  
  41. </p>
  42.  
  43.  
  44. <div style="text-align: center;">
  45.  
  46. <img src = "C:\Documents and Settings\winuser\Desktop\AaronCannonPicture.jpg"
  47. width = "150" height = "150" alt = "Picture of Aaron Cannon" />
  48.  
  49. </th>
  50. </thead>
  51. </table>
  52.  
  53. <div style="text-align: left;">
  54. <ul>
  55.  
  56. <div class = "Menu">Menu
  57.  
  58. <style type="text/css">
  59.  
  60. a:link {color: #ff3333;}
  61. a:visited {color: #ff3333;}
  62. </style>
  63.  
  64.  
  65. <table border = "1">
  66.  
  67. <thead>
  68.  
  69. <th>
  70.  
  71.  
  72. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\index.html" style="text-decoration:none;">
  73. <B>·</B>&nbspHome</a></li>
  74.  
  75.  
  76. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Resume.html" style="text-decoration:none;">
  77. <B>·</B>&nbspResume</a></li>
  78.  
  79. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Biography.html" style="text-decoration:none;">
  80. <B>·</B>&nbspBiography</a></li>
  81.  
  82. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Hobbies.html" style="text-decoration:none;">
  83. <B>·</B>&nbspHobbies</a></li>
  84.  
  85. <li><a href = "#" style="text-decoration:none;>
  86. <B>.</B>&nbspInstitutions</a></li>
  87.  
  88. <li><a href = "#" style="text-decoration:none;">
  89. <B>.</B>&nbspReferences</a></li>
  90.  
  91. <li><a href = "#" style="text-decoration:none;">
  92. <B>.</B>&nbspMajor</a></li>
  93.  
  94. <li><a href = "#" style="text-decoration:none;">
  95. <B>.</B>&nbspMy Refelections</a></li>
  96.  
  97. <li><a href = "#" style="text-decoration:none;">
  98. <B>.</B>&nbspAnything Goes</a></li>
  99.  
  100. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\RateMe.html" style="text-decoration:none;">
  101. <B>.</B>&nbspRate Me</a></li>
  102.  
  103. </th>
  104. </thead>
  105. </table>
  106.  
  107. </div>
  108. </ul>
  109. </div>
  110.  
  111. </div> 
  112.  
  113.  
  114.  
  115. <p style = "font-size: 16pt; color: #FFFFFF">
  116.  
  117. <table border = "1">
  118.  
  119. <thead>
  120.  
  121. <th>
  122.  
  123. <b><em>News</em></b>
  124. <br></br>
  125.  
  126.  
  127. <div style="text-align: left;">
  128.  
  129. <p style = "font-size: 14pt; color: #FFFFFF">
  130.  
  131.  
  132. Aaron Cannon - 03/17/2009: Happy St. Patrick's Day!
  133. <br></br>
  134.  
  135.  
  136.  
  137. Welcome to my website! Today is March 17, 2009. In other words, it is St. Patrick's Day!
  138. On this page, I have put up links to left, so you can learn more information about me.
  139. I hope you enjoy my page. If you have extra time, please click on the rate me link on to
  140. the left, so you can rate my page. Thank you and please visit again!
  141.  
  142.  
  143.  
  144. <br></br>
  145. <br></br>
  146. </th>
  147. </thead>
  148. </table>
  149.  
  150. <br></br>
  151. <br></br>
  152.  
  153.  
  154. <div style="text-align: center;">
  155.  
  156. <a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\index.html" style="text-decoration:none;">
  157. <B>·</B>&nbspHome</a>
  158.  
  159. </div>
  160.  
  161. </div>
  162.  
  163.  
  164.  
  165.  
  166. </body>
  167.  
  168.  
  169.  
  170.  
  171. </html>
  172.  
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 17
Reputation: Slade007 is an unknown quantity at this point 
Solved Threads: 2
Slade007's Avatar
Slade007 Slade007 is offline Offline
Newbie Poster

Re: Positioning Text and Links

 
0
  #2
May 24th, 2009
Try the span tag
using div creates blocks, but the enviroment surrounding it is seperated by a break, so you have
...content...
div-content
div-content
....content...

span does the same but runs in line with enviroment
so you''ll have
...content... span-content span-content ....content...

this is all putting it vaguely...
goggle up span, or do something like that...
you can get the tables side by side using span(maybe, but try it, i guess it should)...

Advice...
Recheck the syntax, you forgot the "(inverted coma) in line 89..
Try a nicer colour sheme...
Make it look a little neat, not a compultion but it makes reading better...

Thats all
Last edited by Slade007; May 24th, 2009 at 3:36 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2008
Posts: 302
Reputation: sreein1986 is an unknown quantity at this point 
Solved Threads: 33
sreein1986's Avatar
sreein1986 sreein1986 is offline Offline
Posting Whiz

Re: Positioning Text and Links

 
0
  #3
May 26th, 2009
hello,

Try with this here a lot bugs in your html code. you didn't close div tags properly.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <?xml version = "1.0" encoding = "utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns = "http://www.w3.org/1999/xhtml">
  5. <head>
  6. <title>Aaron Cannon's Home page</title>
  7. <style type = "text/css">
  8. div.menu { font-weigh: bold; color: black; border: 2px solid #225599;
  9.           text-align: center; width: 10em; background-color: #000000 }
  10. </style>
  11. </head>
  12. <body bgcolor="#000000">
  13. <table width="800" border = "0" align="center">
  14. <thead>
  15. <tr><th colspan="2"><p style = "font-size: 15pt; color: #FFFFFF">  Aaron Cannon's Webpage</p>
  16. <div style="text-align: center;">
  17. <img src = "C:\Documents and Settings\winuser\Desktop\AaronCannonPicture.jpg"
  18. width = "150" height = "150" alt = "Picture of Aaron Cannon" /></div></th>
  19. </thead>
  20. <tr>
  21.   <th width="191">
  22.   <div class = "Menu">Menu
  23.   <ul>
  24. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\index.html" style="text-decoration:none;">
  25. <B>·</B>&nbsp;Home</a></li>
  26.  
  27.  
  28. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Resume.html" style="text-decoration:none;">
  29. <B>·</B>&nbsp;Resume</a></li>
  30.  
  31. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Biography.html" style="text-decoration:none;">
  32. <B>·</B>&nbsp;Biography</a></li>
  33.  
  34. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Hobbies.html" style="text-decoration:none;">
  35. <B>·</B>&nbsp;Hobbies</a></li>
  36.  
  37. <li><a href= "#" style="text-decoration:none;">
  38. <B>.</B>&nbsp;Institutions</a></li>
  39.  
  40. <li><a href = "#" style="text-decoration:none;">
  41. <B>.</B>&nbsp;References</a></li>
  42.  
  43. <li><a href = "#" style="text-decoration:none;">
  44. <B>.</B>&nbsp;Major</a></li>
  45.  
  46. <li><a href = "#" style="text-decoration:none;">
  47. <B>.</B>&nbsp;My Refelections</a></li>
  48.  
  49. <li><a href = "#" style="text-decoration:none;">
  50. <B>.</B>&nbsp;Anything Goes</a></li>
  51.  
  52. <li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\RateMe.html" style="text-decoration:none;">
  53. <B>.</B>&nbsp;Rate Me</a></li>
  54. </ul>
  55. 	</div></th>
  56.   <th width="599">
  57.   	<div style="text-align: left;">
  58. <p style = "font-size: 14pt; color: #FFFFFF">
  59. Aaron Cannon - 03/17/2009: Happy St. Patrick's Day!
  60. <br></br>
  61. Welcome to my website! Today is March 17, 2009. In other words, it is St. Patrick's Day!
  62. On this page, I have put up links to left, so you can learn more information about me.
  63. I hope you enjoy my page. If you have extra time, please click on the rate me link on to
  64. the left, so you can rate my page. Thank you and please visit again!</div>  </th>
  65.   <tr>
  66.     <th colspan="2"><div style="text-align: center;"><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\index.html" style="text-decoration:none;"><B>·</B>&nbsp; Home</a></div></th>
  67.   </table>
  68. </body>
  69. </html>
Thanx,
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC