meranda2100 Posted March 15, 2009 Share Posted March 15, 2009 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 More sharing options...
meranda2100 Posted March 15, 2009 Author Share Posted March 15, 2009 I can't get the link to work, here is the web address.http://www.geocities.com/meranda210051/Meranda2100 Link to comment Share on other sites More sharing options...
Tykain Posted March 15, 2009 Share Posted March 15, 2009 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 More sharing options...
meranda2100 Posted March 16, 2009 Author Share Posted March 16, 2009 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 More sharing options...
Tykain Posted March 16, 2009 Share Posted March 16, 2009 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 More sharing options...
meranda2100 Posted March 16, 2009 Author Share Posted March 16, 2009 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 More sharing options...
Tykain Posted March 16, 2009 Share Posted March 16, 2009 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 More sharing options...
meranda2100 Posted March 17, 2009 Author Share Posted March 17, 2009 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 More sharing options...
htmlcoder Posted March 24, 2009 Share Posted March 24, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.