Jump to content

Alignment Issues


Natechs
 Share

Recommended Posts

I want to switch to XHTML 1.0 Strict but when I validate it, it says I have to remove <center>. But when I try the margin: 0 auto; thing for CSS it doesn't work. HELP!CURRENT CODE:

<?xml version="1.0" encoding="utf-8"?><!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><meta name="author" content="Nathan Chancellor" /><meta name="keywords" content="web designer, nathan c, nathan's services, nathan's web design services" /><meta name="description" content="Nathan C, a somewhat talented web designer, runs this site as a service and personal website" /><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /><link rel="stylesheet" type="text/css" href="styles.css" /><title>Nathan C:: Web Designer</title></head><body><div id="header"><div id="banner"><br /><center><img src="images/banner.gif" alt="Nathan C:: Web Deisgner" /></center></div><hr /></div><br /><ul><li><a href="index.html" class="list">Home</a></li><li><a href="aboutme.html" class="list">About Me</a></li><li><a href="projects.html" class="list">Projects</a></li><li><a href="services.html" class="list">Services</a></li><li><a href="news.html" class="list">News</a></li><li><a href="http://ncwebdesign.getphpbb.com/" class="list">Forum</a></li></ul><br /><div id="hilights"><h2>My hilights</h2><strong>News page...</strong><p><a href="news.html">Visit the news page</a></p><strong>My services</strong><p>My services are free <br />but soon will be $5 a page<br /><a href="services.html">Check it out...</a></p></div><div id="content"><div class="main"><h2 class="center">Nathan C: Web Design Site</h2><p>This is my web design site for Nathan's services as well as my personal web site. You fill out a form telling me what you want, I make it and give it to you. Please note that I don't host the pages. I just make them.</p><p>This site is best viewed in Safari.These links are to get certain web browsers.<br /><img src="images/iconsbanner.png" width="250" height="100" border="0" usemap="#browsers" alt="Browser icon" /><map id="none" name="browsers"><area shape="rect" coords="1,21,54,77" href="http://www.apple.com/safari/download/" alt="Safari download" /><area shape="rect" coords="57,22,120,83" href="http://www.opera.com/download/" alt="Opera download" /><area shape="rect" coords="121,23,180,83" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" alt="Internet Explorer download" /><area shape="rect" coords="180,22,247,86" href="http://www.mozilla.com/en-US/firefox/?utm_id=Q108&utm_source=google&utm_medium=ppc&gclid=CI_f9tCtrJQCFQOjFQodjiSPtA" alt="Firefox download" /></map></p><script type="text/javascript">/*<![CDATA[*/document.write('<p>Today is:</p>' + new Date())/*]]>*/</script></div></div><div id="footer">© 2008 Nathan C | <a href="mailto:natecdog@gmail.com">contact me</a> | <a href= "http://www.geocities.com/bioniclepages">BioniclePages</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS 2.1</a> | <script type="text/javascript">//<![CDATA[      <!--      document.write("Document updated: " + document.lastModified);      //-->//]]></script></div></body></html>

CURRENT CSS:

/* ------------------------------------------Title: Nathan C's Web Design style.css fileAuthor: Nathan CPurpose: to style [url="http://h1.ripway.com/ncwebdesign/"]http://h1.ripway.com/ncwebdesign/[/url] --------------------------------------------- */#banner {width: 100%;}/*Begin main "Dark Sand" theme*/body {background: /*sandy background; don't modify*/url(images/background2.gif);background-attachment: fixed;font-family: /*Put Lucida Handwriting; If not, Book Antiqua.*/Lucida Handwriting, Book Antiqua;font-size: 14pt;color: #000;margin: 0px;padding: 0px;}/*allows room for text*/#content {margin: 5px 1px 0px 15px;padding: 5px 1px 0px 15px;}/*puts high lights to the right of the homepage*/ #hilights {float: right;padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px;display: block;color: #000;}#hilights h3 {display: block;}/*both are blocked for well display*/#hilights h3 p {display: block;}/*makes text a dark blue*/#hilights a:hover {color: #191970;}#footer {clear: both;font-size: 75%;/*font will/should be smaller than rest of fonts*/color: #000;margin: 5px 1px 0px 15px;padding: 5px 1px 0px 15px;}/*all links will/should be black.*/#footer a:link {color: #000;}#footer a:visited {color: #000;}#footer a:active {color: #000;}a:link, a:visited, a:active {color: #000;}/*makes text a dark blue*/#footer a:hover {color: #191970;}/*dark blue text*/a:hover {color: #191970;}/*navigation bar: should be long enough for most browsers; is horizontal.*/ ul {text-align: center;float: left;width: 100%;padding: 0;margin: 0;list-style-type: none;}/*Makes sure that it works in IE*/li {display: inline;}/*normal links have no underline and are black*/a.list {float: left;width: 6em;text-decoration: none;color: #000;font-weight: bold;padding:0.2em 0.6em;border: 1px solid #000;}/*The links in the nav bar are against a grayish background and have dark blue text*/a.list:hover {background-color: #dddddd;color: #191970;text-decoration: underline;}#navbar {margin: 5px 5px 5px 5px;padding: 5px 5px 5px 5px;}/*Use this to center align text instead of <center> tags. <element class="center">Some text</elmeent>*/.center {text-align: center;}

Link to comment
Share on other sites

To center text you use text-align: center; on the element containing the text.To center a block level element that has a defined width, use margin: 0 auto;I don't know exactly which element you want centered, but if you tell me which one it is and show me the code, I can probably tell you why margin: 0 auto isn't working.

Link to comment
Share on other sites

<div id="banner"><br /><center><img src="images/banner.gif" alt="Nathan C:: Web Deisgner" /></center></div>

I'd fix two things there:1. You can remove the <br /> tag and give the #banner class 1em of top padding instead2. You can give the #banner class text-align: center to center the image.

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...