Positioning Text and Links

Question

NinjaLink -2 Posting Pro in Training

15 Years Ago

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!

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Aaron Cannon's Home page</title>


<style type = "text/css">

div.menu { font-weigh: bold; color: black; border: 2px solid #225599;
           text-align: center; width: 10em; background-color: #000000 }

</style>

</head>


<body bgcolor="#000000">




<div style="text-align: center;">


<p style = "font-size: 15pt; color: #FFFFFF">

<table border = "1">

<thead>

<th>


  Aaron Cannon's Webpage

</p>


<div style="text-align: center;">

<img src = "C:\Documents and Settings\winuser\Desktop\AaronCannonPicture.jpg"
width = "150" height = "150" alt = "Picture of Aaron Cannon" />

</th>
</thead>
</table>

<div style="text-align: left;">
<ul>

<div class = "Menu">Menu

<style type="text/css">

a:link {color: #ff3333;}
a:visited {color: #ff3333;}
</style>


<table border = "1">

<thead>

<th>


<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\index.html" style="text-decoration:none;">
<B>·</B>&nbspHome</a></li>


<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Resume.html" style="text-decoration:none;">
<B>·</B>&nbspResume</a></li>

<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Biography.html" style="text-decoration:none;">
<B>·</B>&nbspBiography</a></li>

<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Hobbies.html" style="text-decoration:none;">
<B>·</B>&nbspHobbies</a></li>

<li><a href = "#" style="text-decoration:none;>
<B>.</B>&nbspInstitutions</a></li>

<li><a href = "#" style="text-decoration:none;">
<B>.</B>&nbspReferences</a></li>

<li><a href = "#" style="text-decoration:none;">
<B>.</B>&nbspMajor</a></li>

<li><a href = "#" style="text-decoration:none;">
<B>.</B>&nbspMy Refelections</a></li>

<li><a href = "#" style="text-decoration:none;">
<B>.</B>&nbspAnything Goes</a></li>

<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\RateMe.html" style="text-decoration:none;">
<B>.</B>&nbspRate Me</a></li>

</th>
</thead>
</table>

</div>
</ul>
</div>

</div> 



<p style = "font-size: 16pt; color: #FFFFFF">

<table border = "1">

<thead>

<th>

<b><em>News</em></b>
<br></br>


<div style="text-align: left;">

<p style = "font-size: 14pt; color: #FFFFFF">


Aaron Cannon - 03/17/2009: Happy St. Patrick's Day!
<br></br>



Welcome to my website! Today is March 17, 2009. In other words, it is St. Patrick's Day!
On this page, I have put up links to left, so you can learn more information about me.
I hope you enjoy my page. If you have extra time, please click on the rate me link on to
the left, so you can rate my page. Thank you and please visit again!



<br></br>
<br></br>
</th>
</thead>
</table>

<br></br>
<br></br>


<div style="text-align: center;">

<a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\index.html" style="text-decoration:none;">
<B>·</B>&nbspHome</a>

</div>

</div>




</body>




</html>

web-design

3 Contributors
2 Replies
114 Views
2 Months Discussion Span
Latest Post 15 Years Ago Latest Post by sreein1986

Slade007 0 Newbie Poster

15 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sreein1986 0 Posting Whiz · Answer 1 · 2009-05-26T12:30:57+00:00

hello,

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

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Aaron Cannon's Home page</title>
<style type = "text/css">
div.menu { font-weigh: bold; color: black; border: 2px solid #225599;
          text-align: center; width: 10em; background-color: #000000 }
</style>
</head>
<body bgcolor="#000000">
<table width="800" border = "0" align="center">
<thead>
<tr><th colspan="2"><p style = "font-size: 15pt; color: #FFFFFF">  Aaron Cannon's Webpage</p>
<div style="text-align: center;">
<img src = "C:\Documents and Settings\winuser\Desktop\AaronCannonPicture.jpg"
width = "150" height = "150" alt = "Picture of Aaron Cannon" /></div></th>
</thead>
<tr>
  <th width="191">
  <div class = "Menu">Menu
  <ul>
<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\index.html" style="text-decoration:none;">
<B>·</B>&nbsp;Home</a></li>


<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Resume.html" style="text-decoration:none;">
<B>·</B>&nbsp;Resume</a></li>

<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Biography.html" style="text-decoration:none;">
<B>·</B>&nbsp;Biography</a></li>

<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\Hobbies.html" style="text-decoration:none;">
<B>·</B>&nbsp;Hobbies</a></li>

<li><a href= "#" style="text-decoration:none;">
<B>.</B>&nbsp;Institutions</a></li>

<li><a href = "#" style="text-decoration:none;">
<B>.</B>&nbsp;References</a></li>

<li><a href = "#" style="text-decoration:none;">
<B>.</B>&nbsp;Major</a></li>

<li><a href = "#" style="text-decoration:none;">
<B>.</B>&nbsp;My Refelections</a></li>

<li><a href = "#" style="text-decoration:none;">
<B>.</B>&nbsp;Anything Goes</a></li>

<li><a href = "C:\Documents and Settings\winuser\Desktop\CTEC293 Webpage\RateMe.html" style="text-decoration:none;">
<B>.</B>&nbsp;Rate Me</a></li>
</ul>
	</div></th>
  <th width="599">
  	<div style="text-align: left;">
<p style = "font-size: 14pt; color: #FFFFFF">
Aaron Cannon - 03/17/2009: Happy St. Patrick's Day!
<br></br>
Welcome to my website! Today is March 17, 2009. In other words, it is St. Patrick's Day!
On this page, I have put up links to left, so you can learn more information about me.
I hope you enjoy my page. If you have extra time, please click on the rate me link on to
the left, so you can rate my page. Thank you and please visit again!</div>  </th>
  <tr>
    <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>
  </table>
</body>
</html>