June 24, 200818 yr Having problems with the centre alignment of my website: http://www.robmarchant.co.uk On my browser (IE 7) at home it's aligned in the centre perfectly. On an Apple Mac (Firefox I think) it's aligned in the centre perfectly. On my mate's work PC, the browser (IE 6) displays it as left aligned. On my work PC (Windows 2000), the browser (IE 6) displays it as left aligned. So my question is: Is there some sort of code I can include which will centre align the pages across all browsers? Cheers, Rob.
June 24, 200818 yr Just make a wrapper for all of your content. See Dizi's post below: http://www.webdesignerforum.co.uk/index.php?showtopic=2473
June 24, 200818 yr Hi rob, Have you tried aligning the body to centre i.e. your body tag instead of it being just <body> make it <body align="centre"> I don't know if this will work for sure, I am a beginner also, but it seems logical to me
June 24, 200818 yr Author Hi rob, Have you tried aligning the body to centre i.e. your body tag instead of it being just <body> make it <body align="centre"> I don't know if this will work for sure, I am a beginner also, but it seems logical to me Must admit I haven't tried that, would seem like the sensible thing to do. At the moment I've got all my divs set to margin-left:auto and margin-right:auto, I'll give your idea a try later when I'm at home.
June 24, 200818 yr Author Just make a wrapper for all of your content. See Dizi's post below: http://www.webdesignerforum.co.uk/index.php?showtopic=2473 Superb, cheers.
June 25, 200818 yr Author Just make a wrapper for all of your content. See Dizi's post below: http://www.webdesignerforum.co.uk/index.php?showtopic=2473 Tried this, but it still hasn't fixed my problem! Removed all margin-left: auto; margin-right: auto;'s from the divs in my stylesheet, and used the above solution. As always, it worked on my PC at home - IE 7. On my work PC it's left aligned - IE 6. Any suggestions?
June 25, 200818 yr Tried this, but it still hasn't fixed my problem! Removed all margin-left: auto; margin-right: auto;'s from the divs in my stylesheet, and used the above solution. As always, it worked on my PC at home - IE 7. On my work PC it's left aligned - IE 6. Any suggestions? Hi Rob Try adding this to the top of your css * {margin:0; padding:0; } Also remove this from the <head></head> <style type="text/css"></style> Pat
June 25, 200818 yr Author Hi Rob Try adding this to the top of your css * {margin:0; padding:0; } Also remove this from the <head></head> <style type="text/css"></style> Pat Will do, I'll let you know if it works. Cheers!
June 25, 200818 yr Will do, I'll let you know if it works. Cheers! Replace the start of your html down to </head> with the code below <!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>Rob Marchant - DJ / Home</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Author" content="Rob Marchant" /> <meta name="Keywords" content="Rob Marchant, DJ, house music, mixes, DJ mixes, download, music, electro, funky, ibiza, london" /> <meta name="Description" content="A site about DJ Rob Marchant" /> <link href="stylesheet.css" rel="stylesheet" type="text/css"/> </head> That should center it in ie6 Pat
June 25, 200818 yr Author Replace the start of your html down to </head> with the code below <!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>Rob Marchant - DJ / Home</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Author" content="Rob Marchant" /> <meta name="Keywords" content="Rob Marchant, DJ, house music, mixes, DJ mixes, download, music, electro, funky, ibiza, london" /> <meta name="Description" content="A site about DJ Rob Marchant" /> <link href="stylesheet.css" rel="stylesheet" type="text/css"/> </head> That should center it in ie6 Pat Good stuff, I'll give both suggestions a try. I'm going to the pub after work now, so apologies in advance if I forget!
June 25, 200818 yr I am also having some problems i am trying to centre all of it bit its letting it out wide to fill the maximum screen. link: http://deafraiders.zymichost.com/template.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body { background-image: url(background.jpg); background-repeat: repeat; text-align: center; } #content { font-family: Arial, Helvetica, sans-serif; color: #003366; background-color: #FFFFFF; } #banner { background-color: #FFFFFF; } --> </style> <link href="nav.css" rel="stylesheet" type="text/css" /> </head> <div="wrapper"><div id="banner"> <img src="images/banner.gif" alt="banner" width="597" height="218" /></p> </div> <div id="nav" align="center"> <ul name="nav" align="center"> <li id="current"> <a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Events</a></li> <li><a href="#">Members</a></li> <li><a href="#">Media</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Guestbook</a></li> <li><a href="#">Links</a></li> </ul> </div> <div> <div id="content" align="center"> <p> </p> <h1>Welcome to the new Deaf Jet Ski website</h1> <div align="left"><br /> </div> </div> </div> </div> </body> </html> Css code nav.css #nav ul { margin: 0px; padding: 0px; list-style-type: none; left: 11px; background-color: #04527B; text-align: center; height: 40px; position: absolute; top: 234px; width: 997px; } #nav li { float:left; background: url(images/end.gif) no-repeat right top; margin:0; padding:0; text-align: center; } #nav a { display: block; background-image: url(images/lst.gif); background-repeat: no-repeat; background-position: left top; padding-top: 5px; height: 25px; padding-left: 20px; padding-right: 25px; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; } #nav { float:left; width:auto; font-size:93%; line-height:normal; z-index: 1; } #nav #current a { background-image:url(images/start_ov.gif); font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: normal; text-decoration: underline; } #nav #current { background-image:url(images/end_ov.gif); } #nav a:hover { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; text-decoration: underline; } #wrapper { margin: 0 auto; width: 850; }
June 26, 200818 yr Hi rob, Have you tried aligning the body to centre i.e. your body tag instead of it being just <body> make it <body align="centre"> I don't know if this will work for sure, I am a beginner also, but it seems logical to me Wouldn't it be "center" rather than "centre"?
June 26, 200818 yr @Meshach: Yeah you're right. Center is the middle of something, Centre is main of something.
June 26, 200818 yr Its not working I am also trying to get the background of the navbar colour along to the left side of it too
June 26, 200818 yr @Meshach: Yeah you're right. Center is the middle of something, Centre is main of something. Ahh. Okay. BTW, Welcome to WDF ELugh!
June 26, 200818 yr Try simply this in your CSS stylesheet: body { text-align: center; } #container { width: XXXpx; margin: 0 auto; text-align: left; } Where XXX is whatever width you want your page to be. Then put all of your content inside the container div. Basically IE6 doesn't understand automatic margins but only understands the old-skool "center" or "text-align" features, so you "text-align: center" the whole page (body), and then create a div for everything else (which is what the Container is for). IE6 will then align the div Container centrally. The Container style just resets the defaults, for whatever you then want to put inside it.
June 27, 200818 yr Author Try simply this in your CSS stylesheet: body { text-align: center; } #container { width: XXXpx; margin: 0 auto; text-align: left; } Where XXX is whatever width you want your page to be. Then put all of your content inside the container div. Basically IE6 doesn't understand automatic margins but only understands the old-skool "center" or "text-align" features, so you "text-align: center" the whole page (body), and then create a div for everything else (which is what the Container is for). IE6 will then align the div Container centrally. The Container style just resets the defaults, for whatever you then want to put inside it. This worked for me, thanks a lot to everyone for their input. You'll definitely see another post with my name on it when I'm next stuck Cheers!
Create an account or sign in to comment