Jump to content

Alignment Issues

Natechs

By Natechs
in CSS

Recommended Posts

Natechs Member

Natechs

Posted
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted 
<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
Ingolme w3schools Guru

Ingolme

Posted
Posted

The form is working OK for me, but if you're trying to make it send an E-mail automatically, you'll have to learn PHP and use the mail() function.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...