Topic: Review My Website (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=22301" title="Pages that link to Topic: Review My Website (Page 1 of 1)" rel="nofollow" >Topic: Review My Website <span class="small">(Page 1 of 1)</span>\

 
zavaboy
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Jun 2004

IP logged posted posted 06-24-2004 05:31 Edit Quote

I have a website which I have put a lot of time and effort in, some of which I don't think was worth it. Not all pages are HTML 4 standard due to my lazy self.
http://www.zavaboy.com

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

IP logged posted posted 06-24-2004 12:16 Edit Quote

Welcome to the Asylum, zavaboy.
That's a nice site you've got there, but you could really save space if you used CSS divs instead of tables...
It's not hard to learn, and once you convert, you won't go back, I promise!
Anyway, to each his own, but I do like your layout.




...Of all the things I've lost, I miss my mind the most (ozzy osbourne)

zavaboy
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2004

IP logged posted posted 06-24-2004 18:50 Edit Quote

Ok, I didn't know about making layouts with CSS and divs.
I googled it, and found:
http://www.alistapart.com/articles/practicalcss/
Are there any other place(s) you would recommend?

Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

IP logged posted posted 06-24-2004 22:33 Edit Quote

Our very own CSS FAQ seems to be good place to start the journey.

A couple of notes on the page:
- The green used in the menu while hovering doesn't really fit in with the rest of the theme. I would try only changing the hue of the background a little bit instead of using a completely new color.
- On the hover effect on 'friends' and 'recommended sites' the dotted border sits too tight to the text. Why not have it extend the whole width like you have done with the menu?
- You should add more white-space to the page. For example; the body-text is too close to the border around it, add more padding/margin there.
- You use blue for links and for the text under a news item. You should reserve blue text for links alone, and use another color for the other text, for example gray.

The general feel of the site is good. Unusual design, but still looks clean and sharp. Nice work!

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio - Vim Tutorial -

(Edited by Veneficuz on 06-24-2004 22:34)

zavaboy
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2004

IP logged posted posted 06-24-2004 23:46 Edit Quote

Thanks!
I'll see what I can do about those pointers you gave. Right now I'm busy on another (more important) project.

Another thing... What would you recommend about when someone changes the color of the page (located below the "friends" links)? I mean, I was thinking on removing those options. Or should I make entire color schemes? Hold on, I just had a splash of ideas.

(Edited by zavaboy on 06-24-2004 23:49)

zavaboy
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2004

IP logged posted posted 06-25-2004 04:20 Edit Quote

In response to Veneficuz's pointers:
- Green replaced with white.
- I'm using tables and JavaScript fot the menu. Is there a good way to stretch links?
- I thought I had enough padding. I find it a little challenging having how little space my layout gives.
- Blue replaced with dark gray.

I changed a few other things, you might want to take another look.

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-25-2004 04:31 Edit Quote

Shit, JS for that menu? You are wasting a whole lot of space and time coding how you currently are doing it. Time to learn a bit about CSS and CSS design. Your site is a simple three column, which could easily be created using the Faux Column method described over at ALA. You could then use the three column code that is presented over at bluerobot or glish. Oh yeah and your menu could be done with just CSS using the techniques provided at the end of Taming Lists.

Dan @ Code Town

(Edited by WarMage on 06-25-2004 04:33)

zavaboy
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2004

IP logged posted posted 06-25-2004 16:40 Edit Quote

As I said, I have put a lot of time and effort in, some of which I don't think was worth it.

Is this good as a start?
http://www.zavaboy.com/lay_test01.html

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-25-2004 21:15 Edit Quote

Getting there. You should go to the W3's HTML Validator and then to the CSS Validator to make sure that your code is valid.

Font tags are depricated, so you shouldn't use these at all. If you are using XHTML you need to close all tags, this means that <br> becomes either <br></br> or you use the sorthand (recommended) or <br /> The same goes for <img> it should become <img />. The validators will spit these errors out to you.

I would modify the code for your calendar program to not use the font tags and instead use some CSS. It would cut out a whole lot of redundant font tags, and save a good deal of space.

Up front it does take a little more time. Might I ask what program you are using to code in?

Dan @ Code Town

zavaboy
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2004

IP logged posted posted 06-25-2004 22:42 Edit Quote

I'll see what I can do to my calendar script. When I made it, I made a mess of things, I think it's time to clean it up.

I'm useing 1st Page 2000 as my editor (even for PHP). Never really could get a hang of any other program.

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

IP logged posted posted 06-26-2004 07:26 Edit Quote

if you go over to htmldog.com they have a [ CSS ] tutorial on how to repeat images on a vertical or horizontal, so you can still use your [ side images ]. also, I would suggest using an external style sheet, that way you can get rid of some more redundant code.

but, it's your site and it's up to you

the test page is looking good, congrats

[edits in brackets]




...Of all the things I've lost, I miss my mind the most (ozzy osbourne)

(Edited by I X I on 06-26-2004 08:11)

zavaboy
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2004

IP logged posted posted 06-26-2004 20:08 Edit Quote

Yeah, I had that idea for the backround images anyway. Tutorial helped.
I do use external style sheets, but for pages that I may change alot before it's done, I use internal style sheets so I can change them and the content in the same document. So internal style sheets are a temporary thing for me.

It all looks good in IE, but in Mozilla...

How do I fix that?

zavaboy
Bipolar (III) Inmate

From:
Insane since: Jun 2004

IP logged posted posted 06-27-2004 01:27 Edit Quote

Eveything looks good except for that one problem, which I'm trying to fix.

Valid!
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.zavaboy.com%2Flay_test01.html
http://jigsaw.w3.org/css-validator/validator?uri=http://www.zavaboy.com/lay_test01.html

zavaboy
Bipolar (III) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 06-28-2004 03:52 Edit Quote

Ok, fixed the probem!
Is there any other tips you wish to give?

http://www.zavaboy.com/lay_test01.html

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-28-2004 16:19 Edit Quote

There are a couple of next steps that should occur. First you should now pull your style sheet out of the main page and make is external.

<style type="text/css" media="screen">@import "/s/style.css";</style>

The other thing I don't like is your classitis. You are using both classes and inline styles way to much when they are not needed, and by doing this you are providing some additional "stucture" in your document that is not needed.

The huge perpetrator in this is your calendar. You have repeated class="cal" some 30 times. What you should do instead is to give your calendar table an id attribute of calendar. You can then manipulate the td elements via #calendar td and you don't have to worry about the class. If you need to have some special style on some of the random elements, then specify a class for them. Specifying inline the color of the calendar elements is terrible. Using the calendar id set on your table you could then do the following

#calendar td { color: #666 }
#calendar a { color: blue; text-decoration:none }
#calendar a:hover { text-decoration:underline }

That there would get rid of a whole lot of extra code. This type of extra code is what CSS aims to remove. By putting it in your are defeating the reason for using CSS, which is to make your life easier.

By having all of these inline styles it makes your style switcher a real pain in the ass to work with. In the end to use the style switcher you should only have to change the style sheet and the look and feel of the entire website should be able to completely change.

Some more issues.

You should change all <b> elements to <strong>, you should change all <i> elements to <em> these are the new elements that replace the meaningless old ones. You should also look into using headers. There is no reason you should have anything resembling <font size="5"><b>News/Blog</b></font> This should be replaced with <h1>News/Blog</h1> and then manipulate the style sheet for that particular <h1> attribute (based on what it is a sub element of). You should have a number of levels of header tags. Using this attribute gives you page lot more powerful structure. Try using the "outline" feature of the HTML validator. If you want to know what the outline should look like you might try getting it for my site http://www.codetown.org, this just gives you a little example. The real reason for doing this other than it makes things easier to code, is that search engines put more importance on elements in the header tags. So if you are trying to get indexed as a "news/blog" site type thing, google will play up the "news/blog" angle because it is in a header attribute.

Finally, I don't know how the heck this site is validating. You should at least be running into errors due to the use of the "font" tag. This elements has been depricated, which means that you should not be using it anymore.

I know I put down a whole big number of issues here. Don't think you are doing everything wrong. The oposite is true, you are making some great headway, when you are this close to having something really good, that is the time when you start getting hammered.

Dan @ Code Town

zavaboy
Bipolar (III) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 06-28-2004 22:44 Edit Quote

I did everything but the headings, which I'm currently working on.

The validator cries when I have the header tags in:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.zavaboy.com%2Findex.php&outline=1
What am I doing wrong?

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-28-2004 22:49 Edit Quote

I don't know the correct semantics for this ( I am sure there is a cool phrase like two block level elements can't be inside one another ) but you can not have a <h*> tag inside a <p> tag, or vice-versa.

Dan @ Code Town

zavaboy
Bipolar (III) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 06-28-2004 22:59 Edit Quote

Ok, thanks!
Is there anything else while I'm at it?

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-28-2004 23:11 Edit Quote

Looks pretty good.

You will learn more about using CSS as you use it more and more. You still use a whole lot of class attributes and inline styles. Ultimately you would want to get your design down so that you don't need to use that many classes, you also would want to make more use of different level headers. But that is really all secondary. From here I would sugest that you take a look at the code to some of the really well designed sites.

http://www.alistapart.com
http://www.zeldman.com
http://www.weeklystandards.com

The above sites will give you a ton of links to other really well designed CSS sites. After spending a good deal of time looking at how the standards activists design you will start to develope these good habits yourself.

So your site is looking really good, it has some pretty good code. Take a bit of a break and then start working on version 2. =)

Dan @ Code Town



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu