SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: Navigation help please
-
Jun 20, 2005, 04:05 #1
- Join Date
- Feb 2005
- Posts
- 737
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Navigation help please
Hi Guys,
I'm trying to build a CSS version of my current <table> site www.thisisslough.com
Now I have started on it and here's my code:
HTML Code:<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { text-align: center; } #container { margin: 0 auto; width: 100%; text-align: left } #navigator {background-color: #FFFFFF; width: auto; position: absolute; text-align: left; padding: 8px;} .navigationbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .navigationbutton a {padding: 4px; text-decoration: none; display: block; color: #ffffff; background-color: #000099; border-top: 2px #cce3ff solid; border-left: 2px #cce3ff solid; border-bottom: 2px #31557f solid; border-right: 2px #31557f solid;} .sectionbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .sectionbutton a {padding: 4px; background-color: #0066ff; font-weight: bold; text-decoration: none; color: #ffffff; border-top: 2px #ffe5c3 solid; border-left: 2px #ffe5c3 solid; border-bottom: 2px #7f6645 solid; border-right: 2px #7f6645 solid; display: block;} .mainbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .mainbutton a {padding: 4px; background-color: #cccccc; font-weight: bold; text-decoration: none; color: #4f5942; border-top: 2px #edf8de solid; border-left: 2px #edf8de solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; display: block;} .mainbutton a:hover {border-top: 2px #727f5e solid; border-left: 2px #727f5e solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; background-color: #eeeeee;} .centeredImage { text-align:center; margin-top:0px; margin-bottom:0px; padding:0px; } </style> </head> <body> <img src="banner.jpg" width="743" height="98"> <div id="container"> <div id="navigator"> <p class="navigationbutton"><a href="../index.html">Navigation</a></p> <p class="sectionbutton"><a href="../../index.html">Sections</a></p> <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p> <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p> <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a> <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a> <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a> <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a> <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a> <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a> <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a> <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a> <p class="mainbutton"><a href="../../../../../../link.html">Observer</a> <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a> <p class="mainbutton"><a href="../../../../../../link.html">Property</a> <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a> <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a> <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a> </div> </div> </body> </html>
Now though I want my navigation bar to sit just above the left hand edge of the banner as it is on my tabled www.thisisslough.com site, but I don't know how to do it. Any ideas please?
I've tried setting the navigation:
margin-left: 16.0px;
margin-right: 96.5px;
But it does not move?
PLEASE HELP!!!!!
-
Jun 20, 2005, 06:52 #2
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I hope this helps :
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Come friendly bombs...</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { margin:0; padding:0; background-color:white; } #container { margin: 0 auto; width: 743px; } #navigator { width: auto; position: absolute; text-align: left; margin:0; padding: 0; list-style:none; } #navigator li { margin:0; padding:0; } #navigator .navigationbutton { font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px; } #navigator .navigationbutton a { padding: 4px; text-decoration: none; display: block; color: #ffffff; background-color: #000099; border-top: 2px #cce3ff solid; border-left: 2px #cce3ff solid; border-bottom: 2px #31557f solid; border-right: 2px #31557f solid; } #navigator .sectionbutton { font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px; } #navigator .sectionbutton a { padding: 4px; background-color: #0066ff; font-weight: bold; text-decoration: none; color: #ffffff; border-top: 2px #ffe5c3 solid; border-left: 2px #ffe5c3 solid; border-bottom: 2px #7f6645 solid; border-right: 2px #7f6645 solid; display: block; } #navigator li { font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px; } #navigator a { padding: 4px; background-color: #cccccc; font-weight: bold; text-decoration: none; color: #4f5942; border-top: 2px #edf8de solid; border-left: 2px #edf8de solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; display: block; } #navigator a:hover { border: 2px #727f5e solid; background-color: #eeeeee; } .centeredImage { text-align:center; margin:0px; padding:0px; } </style> </head> <body> <div id="container"> <img src="banner.jpg" width="743" height="98" /> <!-- You really should change the name of this image - some ad-blockers block images called 'banner' --> <ul id="navigator"> <li class="navigationbutton"><a href="../index.html">Navigation</a></li> <li class="sectionbutton"><a href="../../index.html">Sections</a></li> <li><a href="../../../../index.html">Latest News</a></li> <li><a href="../../../../../index.html">Latest Business</a></li> <li><a href="../../../../../../link.html">E-Commerce</a></li> <li><a href="../../../../../../link.html">Cinema</a></li> <li><a href="../../../../../../link.html">Leisure</a></li> <li><a href="../../../../../../link.html">Eating Out</a></li> <li><a href="../../../../../../link.html">Contact Us</a></li> <li><a href="../../../../../../link.html">Message Board</a></li> <li><a href="../../../../../../link.html">Motoring</a></li> <li><a href="../../../../../../link.html">Advertiser</a></li> <li><a href="../../../../../../link.html">Observer</a></li> <li><a href="../../../../../../link.html">Public Notices</a></li> <li><a href="../../../../../../link.html">Property</a></li> <li><a href="../../../../../../link.html">Job Search</a></li> <li><a href="../../../../../../link.html">Local Links</a></li> <li><a href="../../../../../../link.html">Motor Search</a></li> </ul> </div> </body> </html>
-
Jun 20, 2005, 06:58 #3
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
use A DTD
give main #container a width
give #navigator a with
float #navigator left float . content right, clear float
Did you test yours Bon ?
Code:<!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" xml:lang="en" lang="en"> <head> <title>12345 12345 123435 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ text-align: center; } #container { margin: 0 auto; width: 743px; text-align: left } #navigator { float:left; background-color: #FFFFFF; /*width: auto; position: absolute;*/ text-align: left; margin: 8px 8px 8px 0 ; width:150px; } .content{ display:inline; background: #ffff66; float:right; border:1px solid #ff0000; text-align: left; width:570px; margin: 8px 8px 8px 0 ; } .navigationbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .navigationbutton a {padding: 4px; text-decoration: none; display: block; color: #ffffff; background-color: #000099; border-top: 2px #cce3ff solid; border-left: 2px #cce3ff solid; border-bottom: 2px #31557f solid; border-right: 2px #31557f solid;} .sectionbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .sectionbutton a {padding: 4px; background-color: #0066ff; font-weight: bold; text-decoration: none; color: #ffffff; border-top: 2px #ffe5c3 solid; border-left: 2px #ffe5c3 solid; border-bottom: 2px #7f6645 solid; border-right: 2px #7f6645 solid; display: block;} .mainbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .mainbutton a {padding: 4px; background-color: #cccccc; font-weight: bold; text-decoration: none; color: #4f5942; border-top: 2px #edf8de solid; border-left: 2px #edf8de solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; display: block;} .mainbutton a:hover {border-top: 2px #727f5e solid; border-left: 2px #727f5e solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; background-color: #eeeeee;} .centeredImage { text-align:center; margin-top:0px; margin-bottom:0px; padding:0px; } .fcl{clear:both;} </style> </head> <body> <div><img src="banner.jpg" width="743" height="98" alt="" /></div> <div id="container"> <div id="navigator"> <p class="navigationbutton"><a href="../index.html">Navigation</a></p> <p class="sectionbutton"><a href="../../index.html">Sections</a></p> <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p> <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p> <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Observer</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Property</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a></p> </div> <div class="content">12345<br /><br /><br /><br /><br /><br /><br /></div> <div class="fcl"></div> </div> </body> </html>
-
Jun 20, 2005, 07:10 #4
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by all4nerds
-
Jun 20, 2005, 07:12 #5
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
Please test again in IE
-
Jun 20, 2005, 07:14 #6
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK, I didn't test it very well - I often forget to check IE. Stupid mistake... I'll fix it now...
-
Jun 20, 2005, 07:16 #7
- Join Date
- Feb 2005
- Posts
- 737
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Guys!!!
I used all4nerds version as I want the site centred. One last thing i'm confused on. On my tabled site www.thisisslough.com:
I have a three panel layout.
Now on all4nerds code he floats the .content to the right. Now I see you can't float an panel center, so how do I go about creating a third panel like on my existing site if .content is already aligned right ?
Many, many thanks
Chris
PS: Also just to ask, what does <div class="fcl"></div> do?
& love the <title> BonRouge !!
-
Jun 20, 2005, 07:27 #8
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
bring in a 3 colum maybe ?
Code:<!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" xml:lang="en" lang="en"> <head> <title>12345 12345 123435 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ text-align: center; } #container { margin: 0 auto; width: 743px; text-align: left } #navigator { float:left; background-color: #FFFFFF; /*width: auto; position: absolute;*/ text-align: left; margin: 8px 8px 8px 0 ; width:150px; } .content{ padding:5px; display:inline; background: #ffff66; float:left; border:1px solid #ff0000; text-align: left; width:405px; margin: 8px 0px 8px 0 ; } .contentr{ padding:5px; display:inline; background: #ffff66; float:right; border:1px solid #ff0000; text-align: left; width:140px; margin: 8px 8px 8px 0 ; } .navigationbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .navigationbutton a {padding: 4px; text-decoration: none; display: block; color: #ffffff; background-color: #000099; border-top: 2px #cce3ff solid; border-left: 2px #cce3ff solid; border-bottom: 2px #31557f solid; border-right: 2px #31557f solid;} .sectionbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .sectionbutton a {padding: 4px; background-color: #0066ff; font-weight: bold; text-decoration: none; color: #ffffff; border-top: 2px #ffe5c3 solid; border-left: 2px #ffe5c3 solid; border-bottom: 2px #7f6645 solid; border-right: 2px #7f6645 solid; display: block;} .mainbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .mainbutton a {padding: 4px; background-color: #cccccc; font-weight: bold; text-decoration: none; color: #4f5942; border-top: 2px #edf8de solid; border-left: 2px #edf8de solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; display: block;} .mainbutton a:hover {border-top: 2px #727f5e solid; border-left: 2px #727f5e solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; background-color: #eeeeee;} .centeredImage { text-align:center; margin-top:0px; margin-bottom:0px; padding:0px; } .fcl{clear:both;} .work{border:1px solid #0000ff;} </style> </head> <body> <div><img src="banner.jpg" width="743" height="98" alt="" /></div> <div id="container"> <div id="navigator"> <p class="navigationbutton"><a href="../index.html">Navigation</a></p> <p class="sectionbutton"><a href="../../index.html">Sections</a></p> <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p> <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p> <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Observer</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Property</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a></p> <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a></p> </div> <div class="content"><div class="work">12345<br /><br /><br /><br /><br /><br /><br /></div></div> <div class="contentr"><div class="work">12345<br /><br /><br /><br /><br /><br /><br /></div></div> <div class="fcl"></div> </div> </body> </html>
-
Jun 20, 2005, 07:35 #9
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK... I cleaned up what I'd posted and tested it properly...
I think you really should have the menu marked up as a list...
And I added a right column...
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Come friendly bombs...</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { margin:0; padding:0; background-color:white; } #container { margin: 0 auto; width: 743px; position:relative; } #navigator { width: 150px; float:left; text-align: left; margin:0; padding: 0; list-style:none; } #navigator li { margin:0; padding:0; height:20px; line-height:20px; font-weight: bold; text-align: center; } #navigator .navigationbutton { font-weight: bold; text-align: center; } #navigator a { height:20px; line-height:20px; } #navigator .navigationbutton a { height:20px; line-height:20px; text-decoration: none; display: block; color: #ffffff; background-color: #000099; border-top: 2px #cce3ff solid; border-left: 2px #cce3ff solid; border-bottom: 2px #31557f solid; border-right: 2px #31557f solid; } #navigator .sectionbutton { font-weight: bold; text-align: center; } #navigator .sectionbutton a { background-color: #0066ff; font-weight: bold; text-decoration: none; color: #ffffff; border-top: 2px #ffe5c3 solid; border-left: 2px #ffe5c3 solid; border-bottom: 2px #7f6645 solid; border-right: 2px #7f6645 solid; display: block; } #navigator a { background-color: #cccccc; font-weight: bold; text-decoration: none; color: #4f5942; border-top: 2px #edf8de solid; border-left: 2px #edf8de solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; display: block; } #navigator a:hover { border: 2px #727f5e solid; background-color: #eeeeee; } #content { margin:0 150px; } * html #content { height:1px; } #right { float:right; width:150px; } .centeredImage { text-align:center; margin:0; padding:0; } #clear { clear:both; margin-top:-1px; height:1px; overflow:hidden; } </style> </head> <body> <div id="container"> <img src="banner.jpg" width="743" height="98" /> <!-- You really should change the name of this image - some ad-blockers block images called 'banner' --> <div id="right"> Right content goes here</div> <ul id="navigator"> <li class="navigationbutton"><a href="../index.html">Navigation</a></li> <li class="sectionbutton"><a href="../../index.html">Sections</a></li> <li><a href="../../../../index.html">Latest News</a></li> <li><a href="../../../../../index.html">Latest Business</a></li> <li><a href="../../../../../../link.html">E-Commerce</a></li> <li><a href="../../../../../../link.html">Cinema</a></li> <li><a href="../../../../../../link.html">Leisure</a></li> <li><a href="../../../../../../link.html">Eating Out</a></li> <li><a href="../../../../../../link.html">Contact Us</a></li> <li><a href="../../../../../../link.html">Message Board</a></li> <li><a href="../../../../../../link.html">Motoring</a></li> <li><a href="../../../../../../link.html">Advertiser</a></li> <li><a href="../../../../../../link.html">Observer</a></li> <li><a href="../../../../../../link.html">Public Notices</a></li> <li><a href="../../../../../../link.html">Property</a></li> <li><a href="../../../../../../link.html">Job Search</a></li> <li><a href="../../../../../../link.html">Local Links</a></li> <li><a href="../../../../../../link.html">Motor Search</a></li> </ul> <div id="content"> content goes here </div> <div id="clear"></div> </div> </body> </html>
-
Jun 20, 2005, 08:18 #10
- Join Date
- Feb 2005
- Posts
- 737
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks guys - really appreciate this and am learning a lot. Going by what you guys did before I tried to add two more table colums in css so it is the same as my www.thisisslough.com site with a topbar (homepage, date etc) and bottombar (copyright).
So I tried this code:
HTML Code:<!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" xml:lang="en" lang="en"> <head> <title>12345 12345 123435 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ text-align: center; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; } #container { margin: 0 auto; width: 743px; text-align: left } #navigator { float:left; background-color: #FFFFFF; /*width: auto; position: absolute;*/ text-align: left; margin: 8px 8px 8px 0 ; width:150px; } .contentm{ padding:5px; display:inline; background: #ffffff; float:left; border:1px solid #000000; text-align: left; width:405px; margin: 8px 0px 8px 0 ; } .contentt{ padding:5px; display:inline; background: #ffffff; float:left; border:1px solid #000000; text-align:center; width: 743px; margin: 8px 0px 8px 0 ; } .contentb{ padding:5px; display:inline; background: #ffffff; float:left; border:1px solid #000000; text-align: center; width: 743px; margin: 8px 0px 8px 0 ; } .contentr{ padding:5px; display:inline; background: #ffffff; float:right; border:1px solid #000000; text-align: left; width:140px; margin: 8px 8px 8px 0 ; } .navigationbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .navigationbutton a {padding: 4px; text-decoration: none; display: block; color: #ffffff; background-color: #000099; border-top: 2px #cce3ff solid; border-left: 2px #cce3ff solid; border-bottom: 2px #31557f solid; border-right: 2px #31557f solid;} .sectionbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .sectionbutton a {padding: 4px; background-color: #0066ff; font-weight: bold; text-decoration: none; color: #ffffff; border-top: 2px #ffe5c3 solid; border-left: 2px #ffe5c3 solid; border-bottom: 2px #7f6645 solid; border-right: 2px #7f6645 solid; display: block;} .mainbutton {font-weight: bold; text-align: center; margin-bottom: 3px; margin-top: 3px;} .mainbutton a {padding: 4px; background-color: #cccccc; font-weight: bold; text-decoration: none; color: #4f5942; border-top: 2px #edf8de solid; border-left: 2px #edf8de solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; display: block;} .mainbutton a:hover {border-top: 2px #727f5e solid; border-left: 2px #727f5e solid; border-bottom: 2px #727f5e solid; border-right: 2px #727f5e solid; background-color: #eeeeee;} .centeredImage { text-align:center; margin-top:0px; margin-bottom:0px; padding:0px; } .fcl{clear:both;} .work{border:4px solid #0000ff;} </style> </head> <body> <div><img src="slough.jpg" width="743" height="98" alt="" /></div> <div class="contentt">top date and homepage content</div> <div id="container"> <div id="navigator"> <p class="navigationbutton"><a href="file:///C%7C/Documents%20and%20Settings/Chris%20Boxall/Desktop/index.html">Navigation</a></p> <p class="sectionbutton"><a href="file:///C%7C/Documents%20and%20Settings/Chris%20Boxall/index.html">Sections</a></p> <p class="mainbutton"><a href="file:///C%7C/index.html">Latest News</a></p> <p class="mainbutton"><a href="file:///C%7C/index.html">Latest Business</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">E-Commerce</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Cinema</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Leisure</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Eating Out</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Contact Us</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Message Board</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Motoring</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Advertiser</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Observer</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Public Notices</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Property</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Job Search</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Local Links</a></p> <p class="mainbutton"><a href="file:///C%7C/link.html">Motor Search</a></p> </div> <div class="contentm">Maintext<br /> <br /><br /><br /><br /><br /><br /></div> <div class="contentr">lefttext<br /><br /><br /><br /><br /><br /><br /></div> <div class="fcl"></div> </div> <div class="contentb">bottom copyright content</div> </body> </html>
Cheers
Chris
-
Jun 20, 2005, 08:29 #11
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
wrappe the div's with a width of 743px in the #container
or give al div's with a width of 743px a margin:0 auto;
Bookmarks