Hmmm…
The red would be the navigation bar (in different language so its on the opposite side).
Since you’re from Dearborn, can I assume this might be a right-to-left page?
If so, know that some browsers get plenty wrong no matter how well you write the page. Opera, I’ve found, does rtl pages excellently. Safari3 and 4 are ok and Chrome is also ok.
If this will be a rtl page you’ll want to state that in the browser (a direction). I won’t go any further though because this is only a guess on my part… if I’m right, I can show you some other things to add to your page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>My Title</title>
You certainly want a good doctype if you want any chance of this page looking right in all the browsers, so good job.
But you’ll also want some meta tags… yes, the server ultimately sets your charset and MIME type but it’s still good to state these in your page… also language.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
<html [b]lang="nl"[/b]>
[b]<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="nl">[/b]
<title>My Title</title>
The above has Dutch language as an example.
User agents may or may not grab your stated language but for those who do, this is a good way to steer them in the right direction.
If you’re getting a gap under your banner image…
<div style="text-align: center;">
<img src="new_banner1.jpg" />
</div>
That would be because of images being inlines and naturally having a little gap for dangly letters. Not all browsers show it, but you know you’ve got it if it goes away when you add this to your CSS:
img {
vertical-align: bottom; /should remove the gap/
}
You have labels in your form but you will want to link them to their inputs… you do this by making the “for” attribute of the labels match the ID’s of the inputs, not the names.
<label for=[b]"name"[/b]>Name:<br/></label>
<input type="text" name="username" [b]id="name"[/b] />
Of course the rule still is that you only get to use a particular id once on a page… each must be unique.
You’ll want to style the anchor HOME at the bottom purely with external CSS (not the inline styles you have now) because inline (embedded) styles can’t do :hover and :focus, which you’ll want as a visual feedback for visitors.
Anyway, instead of your current CSS for #home you can center the child anchor like this
<div id="home">
<a href="index.html">Home</a>
</div>
#home {
text-align: center;
}
#home a {
color: #000;
}
the “a” will cover all states of “a” including “visited” so to make those different, you’d need to explicitly state them (which is what you want, less code) : )
<div id="flash" align="center">
Since align went away with the original Internet dot-bomb, use automargins instead.
If you know the width of #flash, state it… and you’ll be able to center it using automargins.
#flash {
position: relative; /you won’t need this if you let the form position itself/
width: whatever the width;
margin: 0 auto;
}
Width can be a % if you want.
Those are some ideas.
