This is my first attempt at hand-coding a site (not using a WYSIWYG
editor,
in other words). It's no great shakes, just some HTML markup and CSS.
http://www.timgillmusic.com/trio
My question is, will the fixed 700px body width be too large on
lower-resolution browsers? It is a non-fluid design horizontally because
of
the design layout. Is this a potential problem to some users?
Anyhow, any comments appreciated. Be nice to the newbie!
Not too bad for a first try. At all.
I don't see why you couldn't do this fluid. Instead of an image for the
header, have the text floated ("the" floated left, "tim gill trio" floated
right, with margins set the way you like, and marked up as h1 - like this:
<div id="header">
<h1><span class="the">The </span><span>Tim Gill Trio</h1>
</div>
and style like this
#header {
background-image: url(squiggly.gif);
font-family: "whatever font you used", Arial, Helvetica, sans-serif;
font-size: 1.5em;
letter-spacing: .5em;
word-spacing: 1em;
}
#header h1 span {
display: block;
float: right;
width: 25em;
margin: 3em 0 0 0;
}
#header h1 span.the {
float: left;
width: 5em;
margin: 0 0 3em 0;
text-transform: lowercase;
}
Addust the distances in ems to make it look right. Your bg gif can be as
wide as you expect the widest viewport to be, I'd go 2000px. And a caveat
- I typed this all out of my head, I haven't tested any of it. I make
errors from time to time.
What the goal is, is that the width can change but the overall look of the
header is the same. It'll be squishable.
This will degrade for non-graphic browsers as a typical 1st level heading.
Make Welcome a second-level heading like the other. You can class it and
style it different if you like.
Make your alt text for the pic better. Like, "The Tim Gill Trio is Tim,
Biff and Guido" or something, where alt alone will be useful to no-image
browsers, and it explains the pic a bit too.
I've used XHTML for sites too. I now am using HTML 4.01 again because
since most browsers cannot read XML properly, and since my server cannot
serve XML properly, there's really no benefit. Might think about that.
CSS: Do the font-size in body as a percentage. I think .8em (80%) is too
small, go at least 95%. Yes, Verdana looks big, but the replacement fonts
look tiny.
Just for ha-has, I looked in Netscape Navigator 4.01. Screenshot at
http://users.rcn.com/neal413/tim.gif . (Colors are whacked, sorry.) Avoid
this by importing the stylesheet, not linking.
(in the head)
<style>
@import url("tg3presentation.css")
</style>
Use less px and more % in your layout widths and stuff. You can make this
fluid.
Very good for a beginner. You can do better.