Jump to content

Tables Side By Side


meranda2100
 Share

Recommended Posts

I want to have links on one side of my page and text in the center. I have tried puting the links and text in tables, one aligned "left" the other "center", but whenever I add to the table on the left it makes the center table move down the page. I want the text in the center to not move. Is that possible? Is there a better way than tables?Here's the code in CSS:table.one{table-layout: fixed}in HTML

<div class="left">  <table class="one" table width="771" border="0" cellspacing="0" cellpadding="0">   <tr>      <td><a href="http://www.geocities.com/meranda210051" target="_blank">Home</a></td>   </tr>   <tr>       <td><a href="http://www.meranda2100.blogspot.com" target="_blank">My Blog</a></td>   </tr>   <tr>        <td><a href="http://www.w3schools.com/html/html_links.asp"target="_blank">Learn Html and More</a></td>  </tr>   <tr>        <td><a href="http://www.pandora.com/" target="_blank"> Great Free Radio </a></td>  </tr>	   <tr>       <td><a href="http://www.lds.org" target="blank"> My Homepage </a></td>  </tr>	   <tr>        <td><a href="http://www.facebook.com" target="_blank">Connect with Friends</a></td>   </tr>			  		 </table>					 </div><div align="center"> <table class="one" table width="771" border="0" cellspacing="0" cellpadding="0">   <tr>     <td>I am a novice webdesigner.<br /> I am using this page to try out all the new things that I learn. </td>     </tr>      <tr>          <td>Check back often as the site emerges.</td>      </tr>  </table></div>

Here's a linkAny help will be appreciated.Meranda 2100

Link to comment
Share on other sites

You should use divs for your layout, and use lists for your navigation menu. The only time you should be using tables is for tabular data.How about a layout like this ?

<html><head><title></title><style type="text/css">html,body{margin:0;padding:0}body{text-align:center}div#container{width:700px;margin:0 auto;}div#content{float:right;width:500px;}#content p {text-align:left;}div#navigation{float:left;width:200px;}div#header{width:100%;}div#footer{clear:both;width:100%;}</style></head><body><div id="container">	<div id="header">	<!-- Header goes here-->	</div>	<div id="navigation">	<!-- Nav menu goes here-->   	</div>	<div id="content">	<!-- Content goes here-->	</div>	<div id="footer">	<!-- Footer goes here-->	</div></div></body></html>

Link to comment
Share on other sites

You should use divs for your layout, and use lists for your navigation menu. The only time you should be using tables is for tabular data.How about a layout like this ?
<div id="navigation">    <a href="http://www.geocities.com/meranda210051" target="_blank">Home</a> <br />    <a href="http://www.meranda2100.blogspot.com" target="_blank">My Blog</a> <br />     <a href="http://www.w3schools.com/html/html_links.asp"target="_blank">Learn Html and More</a></br />    <a href="http://www.pandora.com/" target="_blank"> Great Free Radio </a><br />    <a href="http://www.lds.org" target="blank"> My Homepage </a> <br />    <a href="http://www.facebook.com" target="_blank">Connect with Friends</a><br />    </div>

I do like it better, but I would like the navigation bar to be at the left of the page. Is that possible?Meranda2100

Link to comment
Share on other sites

Yes, just adjust the divs dimensions. It's not on the far left because it's centered and the width is smaller than your screen resolution.You can make the body, html and container 100% width, the navigation div 20% and content div 80% or however you like it, just make sure that navigation div + content div width = container width.If you can't get it right i'll post the exact code later unless someone else do by then, as i'm a bit in a hurry right now.

Link to comment
Share on other sites

Yes, just adjust the divs dimensions. It's not on the far left because it's centered and the width is smaller than your screen resolution.You can make the body, html and container 100% width, the navigation div 20% and content div 80% or however you like it, just make sure that navigation div + content div width = container width.If you can't get it right i'll post the exact code later unless someone else do by then, as i'm a bit in a hurry right now.
Thanks, that worked. I made the body, html and container 100% width, the navigation div 15% and content div 75%. I had one more question though, when I had my navigation bar (full of links) in the table they were all left justfied. Now that they are divided they are center justified. They are at the left of the screen, and I appreciate all the help, I just wonder if I can get the links to left justify. Any help would be appreciated.Meranda 2100
Link to comment
Share on other sites

Add this line to your CSS #navigation ul {text-align: left;list-style: none;}And make your links list like this<ul> <li><a href="url">Link 1</a></li> <li><a href="url">Link 2</a></li> <li><a href="url">Link 3</a></li> <li><a href="url">Link 4</a></li> <li><a href="url">Link 5</a></li></ul>

Link to comment
Share on other sites

Add this line to your CSS #navigation ul {text-align: left;list-style: none;}And make your links list like this<ul> <li><a href="url">Link 1</a></li> <li><a href="url">Link 2</a></li> <li><a href="url">Link 3</a></li> <li><a href="url">Link 4</a></li> <li><a href="url">Link 5</a></li></ul>
Thanks, that worked perfectly.Meranda2100
Link to comment
Share on other sites

you should move the image and make it so it dosn't repeatto make it not repeat:

body {background-repeat: no-repeat;}

to make it centered:

body {[i]*with prev. code inserted*[/i] background-position:center; }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...