zera555 Posted December 8, 2006 Share Posted December 8, 2006 I have a really simple website, but I'd like to center the entire thing. How would I do that? Here's a link to it:http://www.x-programming.com/clients/jbudd/ Link to comment Share on other sites More sharing options...
jlhaslip Posted December 8, 2006 Share Posted December 8, 2006 html <html><head><link rel="stylesheet" href="JBudd_files/style.css" type="text/css"><title>JBudd</title></head><body><div id="banner">JBudd</div><div id="nav"><a href="http://www.x-programming.com/clients/jbudd/newsletters.php">Newsletters</a><br><a href="http://www.x-programming.com/clients/jbudd/talentresource.php">Talent Resource</a><br><b><u>Media</u></b><br><a href="http://www.x-programming.com/clients/jbudd/movies.php">---Movies</a><br><a href="http://www.x-programming.com/clients/jbudd/audio.php">---Audio</a><br><a href="http://www.x-programming.com/clients/jbudd/images.php">---Images</a><br><a href="http://www.x-programming.com/clients/jbudd/store.php">Store</a><br><a href="http://www.x-programming.com/clients/jbudd/forum.php">Forum</a><br><a href="http://www.x-programming.com/clients/jbudd/links.php">Links</a><br><a href="http://www.x-programming.com/clients/jbudd/pressrelease.php">Press Release</a><br></div><div id="promo"> /* place this floated div before the centred div */Tra la la la la la, this is a test, this is only a test.</div><div id="content"><h1>News</h1>The site is coming along nicely!</div></body></html> CSS body {background: #d3d3d3;margin-left: auto;margin-right: auto;text-align:center;}h1 {margin-left: auto;margin-right: auto;text-align: center;}#banner {text-align: center;margin: 10px;height: 70px;}#nav {text-align: left;float: left;width: 180px;padding: 5px;background: #ffffff; }#main{;}#content {width: 460px;padding: 10px;margin-left: auto;margin-right: auto;text-align:center;background: #ffffff;}#promo {text-align: left;float: right;width: 180px;padding: 5px;background: #ffffff; } Link to comment Share on other sites More sharing options...
roondog Posted December 8, 2006 Share Posted December 8, 2006 I'm having a problem with this. got it to work on one page. www.tevershamhotspurs.co.uk but can not get it to work on another http://tevershamhotspurs.250free.com/mainpages/fixtures.htmlhere is the css body {font-family: times;margin: 0 auto;width:600px;text-align:center;}.container{float:left; height:100%; width: 800px; border:5px black; background-color: gray;text-align: left;}.banner {position : relative; top : 0; left : 0; width : 1px; } div.links {width:expression(document.body.clientWidth < 900 ? "800px" : "100%" );min-width: 800px;font-family: Comic Sans MS, Comic Sans MS5, cursive;font-size: .35cm;text-shadow: black;} a:link {color : black; } a:visited {color : black; } a {text-decoration:none}a:hover {font-size:105%} and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head><style type="text/css">table{width: 550px;float: left;position: absolute;z-index: 2;} </style><link rel="stylesheet" type="text/css"href="/stylesheet.css" ><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > <title>THFC Fixtures</title> </head> <body><div class="container"><img src="http://tevershamhotspurs.250free.com/headers/fixtures.jpg" alt="banner" /><img src="http://tevershamhotspurs.250free.com/headers/navbar.jpg" alt="banner" /><div class="links"><a href="http://tevershamhotspurs.250free.com/index.html">HOME</a> |<a href="http://tevershamhotspurs.2500free.com/mainpages/news.html">NEWS</a> | <a href="http://tevershamhotspurs.250free.com/mainpages/table.html">TABLE</a> | <a href="http://tevershamhotspurs.250free.com/mainpages/profiles.html">PLAYERS</a> | <a href="http://tevershamhotspurs.250free.com/mainpages/stats.html">STATISTICS</a> | <a href="http://tevershamhotspurs.250free.com/mainpages/info.html">CLUB INFO</a> | <a href="http://tevershamhotspurs.250free.com/mainpages/archive.html">ARCHIVE</a> | <a href="http://tevershamhotspurs.250free.com/mainpages/wallpaper.html">DOWNLOADS</a> | <a href="http://thfc.20.forumer.com">GUESTBOOK</a> | <a href="http://tevershamhotspurs.250free.com/mainpages/links.html">LINKS</a> </div> <table> </div> </body></html> Its probably something simple. The background is gray just so i can see it. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 8, 2006 Share Posted December 8, 2006 What kind of problems are you having?http://www.devarticles.com/c/a/Web-Style-S...ayout-with-CSS/ Link to comment Share on other sites More sharing options...
zera555 Posted December 8, 2006 Author Share Posted December 8, 2006 html<html><head><link rel="stylesheet" href="JBudd_files/style.css" type="text/css"><title>JBudd</title></head><body><div id="banner">JBudd</div><div id="nav"><a href="http://www.x-programming.com/clients/jbudd/newsletters.php">Newsletters</a><br><a href="http://www.x-programming.com/clients/jbudd/talentresource.php">Talent Resource</a><br><b><u>Media</u></b><br><a href="http://www.x-programming.com/clients/jbudd/movies.php">---Movies</a><br><a href="http://www.x-programming.com/clients/jbudd/audio.php">---Audio</a><br><a href="http://www.x-programming.com/clients/jbudd/images.php">---Images</a><br><a href="http://www.x-programming.com/clients/jbudd/store.php">Store</a><br><a href="http://www.x-programming.com/clients/jbudd/forum.php">Forum</a><br><a href="http://www.x-programming.com/clients/jbudd/links.php">Links</a><br><a href="http://www.x-programming.com/clients/jbudd/pressrelease.php">Press Release</a><br></div><div id="promo"> /* place this floated div before the centred div */Tra la la la la la, this is a test, this is only a test.</div><div id="content"><h1>News</h1>The site is coming along nicely!</div></body></html> CSS body {background: #d3d3d3;margin-left: auto;margin-right: auto;text-align:center;}h1 {margin-left: auto;margin-right: auto;text-align: center;}#banner {text-align: center;margin: 10px;height: 70px;}#nav {text-align: left;float: left;width: 180px;padding: 5px;background: #ffffff; }#main{;}#content {width: 460px;padding: 10px;margin-left: auto;margin-right: auto;text-align:center;background: #ffffff;}#promo {text-align: left;float: right;width: 180px;padding: 5px;background: #ffffff; } this centered my "content" section, but i need the whole page to be centered.... something like this website:http://www.cliffordhoeft.com/ Link to comment Share on other sites More sharing options...
zera555 Posted December 9, 2006 Author Share Posted December 9, 2006 nevermind, i figured it outi put all my div's inside one big div "wrapper" and did this#wrapper{width: 800px;margin-left: auto;margin-right: auto;} Link to comment Share on other sites More sharing options...
jlhaslip Posted December 9, 2006 Share Posted December 9, 2006 Add text-align:center to that #wrapper code so that IE will do what you want. Link to comment Share on other sites More sharing options...
quackquack Posted December 9, 2006 Share Posted December 9, 2006 Your website is not working. Update it plz. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now