Css based site, a simple one, but still...

you forgot my name

Hurray for selfless promotion.

Thanks for your advice guy's. Zerimar.

I see a box with a 1px border up in the right hand corner, to the top. In your css code it's under #logo and it's in that last line of code there. I'm not sure why it's there, unless of course you're going to fill it with an image of some sort later. If there's something there I don't really see it.

Also in your css under "body" you have text align as "center" but you might want to switch it to left. A little tip I picked up while reading Zeldmans' book "designing with web standards" due to a bug in IE6 which may or may not show up well. Of course, that's if you care about IE at all and the viewers on it. But according to the book it should be aligned left to avoid the bug that throws your text off.

That upperleft box is intended for a pic, yes. Hehe, otherwise it would/is look/ing stupid...And the leftalignment - of course. Will do...

Deker, I thank you. have seen that "ems" thing around, but really not remembered to check what it was...Now that I know that is a good advice.

Dolittle - I don't know, but I think you where watching a "waitwhileIgeta realsuggestionup" kinda page, that bluey thing, right ? Well, that wasn't there to stay, I wrote something 'bout that on the startpage ;)...But your opinion is noted, of course - thanks.

Patric.

Nice - its good to see more people designing with web standards. A couple people have touched on the design of the site already, so I'll just focus on the coding of it with my comments:

1. You need to set a character encoding label. See this page

2. Validate your work. Even when you override your nonexistant character encoding (see here), your document doesn't validate. This is because of several errors, which you need to fix before publishing your site.

3. Keep semantics in mind. I see that you are using a number of br tags, and I can't quite figure out why. You are also using p tags, which is good ... but if you want more space in between paragraphs or something, why not set a margin-bottom or margin-top on those paragraphs? I also see that when your document is viewed without CSS, the title of the page is not visible. This means that you have not taken into account browsers that cannot handle CSS, or must read out the information to listeners. In short, its not semantic. May I suggest this method for the title on your page:

In the HTML:
[i][h1][span]Patric's Page[/span][/h1][/i]

and then with CSS:
h1 span {display: none;}
h1 {width: 200px;height: 200px;background: url('image.gif') etc.;}

It works quite well, and also conveys the heading information in a very semantic and backwards-compatible way. I do like your usage of lists, for navigation, etc. I notice that you're using a center tag, though. If you'll remember, one of the many points of CSS is to separate content from presentation. The center tag is effectively presentation, and I believe is deprecated. Therefor, I would suggest you make use of CSS's text-align. Reading through this document may also help with any centering woes you may have in the future.

4. Use markup wisely. I see you are using a lot of empty divs, something for which I have never really sensed the need for on any of my pages. At the bottom of your site, for example, you are using three of them, and I don't really understand why. For the bottom of your page as it is now, I would have used one div - a footer. I would have used text-align to center it's contents, set a border on the top and bottom of it, and added some margin-bottom to the paragraph inside it. It would have added the same effect, and would have used less HTML.

5. Use good CSS. I see that you're setting your font as Tahoma in a lot of your style definitions. This isn't really neccessary - just do it for the body and then forget about it. Also, I would list a couple fonts - in case Tahoma isn't available on somebody's system. I don't think your 'color: #000000;' is really neccessary. Nor your 'background: transparent;'. And I can't really figure out why you're using so many floats ... but perhaps its valid. I don't have that much time to study it.

You might also want to:

1. Read documents/tutorials. There are outstanding CSS resources available on the web. I won't go to the trouble of listing them all here, since there is a CSS thread here in our resources forum, as well as one at lowopacity.net. The HTML and CSS specifications are also very useful - two W3 documents I start at a lot are the index of HTML elements and full CSS property index. Check them out, follow links when you need help, and learn how to read the specs. Very well-written and useful in my opinion.

2. Ask questions. If you need help figuring out a validator error, or don't understand what a tutorial or specification is telling you, I would suggest visiting an IRC help channel. They're great resources that I use every day - helping people and getting help myself. Try #web on irc.freenode.net or #css on irc.efnet.net. There are some great people out there to help.

NB: Edit. I'm adding some sites that have been/are useful to me.
3. Visit good sites & resources. Here are the sites in my favorites folder:
- CSS Resources and/or Information
- - http://accessify.com/default.asp
- - http://vischeck.com/
- - http://blooberry.com/indexdot/css/index.html
- - http://resources.the-protagonist.com/index.php?action=displaycat&catid=47
- - http://css-discuss.org/
- - http://digital-web.com/features/feature_2002-09.shtml
- - http://pixy.cz/blogg/clanky/cssnopreloadrollovers/
- - http://stopdesign.com/log/2004/01/26/ie_factor.html#comment13
- - http://sam-i-am.com/work/sandbox/css/mac_ie5_hack.html
- - http://sovavsiti.cz/css/
- - http://positioniseverything.net/
- - http://quirksmode.org/
- - http://tantek.com/CSS/Examples/boxmodelhack.html
- - http://zeldman.com/misc.html
- Daily Reading
- - http://airbag.ca/
- - http://alistapart.com/
- - http://alistapart.com/
- - http://andybudd.com/
- - http://cssvault.com/
- - http://www.designdojo.ca/
- - http://resource.reh3.com/
- - http://hivelogic.com/
- - http://veen.com/jeff/
- - http://mezzoblue.com/
- - http://shauninman.com/
- - http://37signals.com/svn/
- - http://simplebits.com/
- - http://stopdesign.com/
- - http://telerana.f2o.org/about.html
- - http://zeldman.com/
- - http://typographi.ca/
- - http://www.9rules.com/whitespace/
- - http://yellowlane.com/
- - http://twotallsocks.com

Once again, though - Im glad that you went the way of CSS and web standards. If you ever need more help, feel free to IM me on AIM, MSN, ICQ, or IRC. PM me to get my IM info if you want. Good luck! :D

trhaynes,

I, for one, have benefited from your comment. I'm trying to learn XHTML and CSS and just want to thank you for your post man, it's helpful and I'm checking out the links.

Jiiiizus, man, that was what I call a post... :D

First I have to thank you for that big effort of yours to make such a post. You have valid opinions and you clearify them well, I get the package ;) I have to print that post, tho...remembering all that will make my head explode...

Now, You've made me more interested, actually...I can see that some people would have taken those opinions the other way, but I find it more encouraging.
I have a lot to learn, tho...(and for a guy who begun just three weeks ago with this...wouw ;)..).

Ok, that validating thing, I've done it a cupla times and redone some wich makes the errors you get a lot less than they where from the beginning, I can tell you that ;). I'll get on it again. And I have, as you mention, not intended to publish the site before it's is a'ok...I wanna have a good, perhaps not the best, but good css based site.

So, I'll print this post, and I'll go on the css forum I'm attending, in order to get the css straightened out and the validation to present no errors, but that'll take a while...But as they say...No Pain, No Gain, eh ? ;)

Thanks again, trhaynes...Great post, and real valuable to me (and others)

Patric.

Since we're on the subject of CSS here, I thought I'd throw in this link. I was really impressed to see how this 3D house was built on CSS.

You can view it here: http://www.designdetector.com/tips/3DBorderDemo2.html

Got it at www.cssvault.com

[quote=Patteman]So, I'll print this post, and I'll go on the css forum I'm attending, in order to get the css straightened out and the validation to present no errors, but that'll take a while...But as they say...No Pain, No Gain, eh ? [/quote]

Listen - it'll take forever to get answers on a forum. Get an irc client and go to those channels I mentioned. They're great.

I've got an irc client, and I'll try those out...See you around...if I get it to work, hehe, t'was sometime since I irc'ed ;)

Patric.

Ok, found it. And got it to work...I'll go there if I need urgent assistance ;)

See you all, after the weekend. Now I gotta go have a nice time wiz my kiddies ;)

Patric.