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
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)
From: A graveyard of dreams Insane since: Mar 2001
posted 06-24-2004 22:33
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 -
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.
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.
From: Rochester, New York, USA Insane since: May 2000
posted 06-25-2004 04:31
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.
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?
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)
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?
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
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.
From: Rochester, New York, USA Insane since: May 2000
posted 06-28-2004 22:49
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.
From: Rochester, New York, USA Insane since: May 2000
posted 06-28-2004 23:11
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.
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. =)
posted 06-24-2004 05:31
