Topic: Site Review

ok here it is:
http://pharotek.xtremeconfusion.com/


i have finished getting all the section except the entire music section started. go through and find what is wrong. the site is fluid from 800x600 and up.

I ay possibly be moving to another site in a couple of days. the link would be http://metal.dfpunk.com

Congratulations!! You have won the following award:


Ghosts of Rock

Hmmm, you have the site as Ghosts of Rock everywhere accept the title of your page where it says "Ghost of Rock."

Mean to do that?

"the site is fluid from 800x600 and up."

You have a funny grasp on the word 'fluid'.

Dracusis, all i was concerned with when making my site is making my site work in IE in a majority of the different resolutions. I feel 640x480 is a waste so i tried my best to atleast get from 800x600 and up. I figured it doesnt look good or even work in other browsers but i have achieved what i have wanted for a while. But thanks for your comments

Hey kretsminsky, thanks for pointing that out. im off to fix it.

[This message has been edited by Patrick (edited 06-04-2002).]

At 1600x1200 it's pretty much off center. At least it's not off the screen.
Nice greens...in the mood for an accent color?

Allewyn

one of my main goals with this site was to make it stay on the screen. I figure if it is on the screen and readable then does it hurt to have it off center. but hey allewyn, thanks for the comments



Come as your are... Ghosts of Rock

Ok. I seriously think you need to re-do your style sheet. I think I've mentioned this to you before.

Your using % values in far too many places which is making your site look and act... err weird.

Setting margin values as a % isn't really a good idea as that % values is a % of the width of the page. When your using this to set the margins and padding values of almost every element it means your basically throwing away a certain amount control over your style. Which kinda goes against the whole idea of style sheets.

I also notice that you've use values like margin-top: -525. You really shouldn't need to specify negative values to that kind of extreme. This is also causing problems in Mozilla and Opera as the 525px, which is the height of the menu yes? Well this is not actually 525px in Mozilla or Opera. It's larger in one, smaller in the other, which meant the resting-place for your content varies from browser to browser.

Did you check how your site renders in NS6/Mozilla or Opera? You should always check CSS designs in Mozilla at least - it's a lot more standards compliant in that field than IE currently is. Opera seems to render just as well as Mozilla with a couple of major exceptions when it comes to dealing with z-values.

I decided to to a little cleaning of your style sheet. Try using this instead:

body {scrollbar-face-color: #336633; margin: 0; scrollbar-highlight-color: #336633; scrollbar-shadow-color: #336633; scrollbar-3dlight-color: #d2d2d2; scrollbar-arrow-color: #cccccc; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #d2d2d2; background-color: #000000}
div.logo {background-image: url(http://pharotek.xtremeconfusion.com/graphix/ghostsofrock.gif); margin-bottom: 5%; width: 500px; height: 130px}
div.menucol {position:absolute; top: 200px; left:50px; width: 150px}
div.news {border-right: #d2d2d2 1px inset; border-top: #d2d2d2 1px outset; border-left: #d2d2d2 1px outset; width: 100%; border-bottom: #d2d2d2 1px inset; background-color: #1e3b26}
div.newscol {position:absolute; top: 200px; padding-left: 250px; padding-right: 50px;}
div.menu {border-right: #d2d2d2 1px inset; border-top: #d2d2d2 1px outset; margin-bottom: 5; border-left: 2d2d2 1px outset; width: 100%; border-bottom: #d2d2d2 1px inset; background-color: #1e3b26}
div.break {margin-top: 40px; margin-bottom: 40px}
div.asylum {border-right: #d2d2d2 1px inset; border-top: #d2d2d2 1px outset; margin-bottom: 5%; margin-left: 5; border-left: #d2d2d2 1px outset; width: 110px; margin-right: 5%; border-bottom: #d2d2d2 1px inset; background-color: #336633}
h1 {font-size: 11px; width: 100%; color: #cccccc; border-bottom: #d2d2d2 1px inset; font-family: arial, verdana, helvetica, sans-serif; letter-spacing: 3px; height: 20px; background-color: #336633}
h2 {border-right: #d2d2d2 1px inset; border-top: #d2d2d2 1px outset; padding-left: 5; font-size: 11px; margin-bottom: 5; width: 75%; color: #cccccc; border-bottom: #d2d2d2 1px inset; font-family: arial, verdana, helvetica, sans-serif; letter-spacing: 3px; height: 20px; background-color: #336633}
h3 {font-size: 11px; width: 100%; color: #cccccc; border-bottom: #d2d2d2 1px inset; font-family: arial, verdana, helvetica, sans-serif; letter-spacing: 3px; height: 20px; background-color: #336633}
p {font-weight: 400; font-style: normal; font-family: arial, verdana, helvetica, sans-serif; text-align: left; font-variant: normal; text-decoration: none}
p {font-size: 12px; margin-left: 5; color: #cccccc}
p.news {font-size: 12px; margin-bottom: 5; margin-left: 5; color: #cccccc; margin-right: 5}
a {font-weight: bold; font-size: 12px; color: #cccccc}
a:hover { color: #ffffff; text-decoration: none}

Although this is buy far finished IMHO. There's still a bunch of cross-browser discrepancies, more that I have time to fix for you so you'll need to do a lot of tweaking. At the very least this should give you an idea of other ways to approach CSS layouts. Also, be sure to check out www.glish.com/css as there's some really nifty layout templates there, which could teach you a lot.

I think that Dracusis covered what need to be covered with the style sheet. I really like your logo, melded the different images well. Played with the scan lines. It works. The color scheme works as well. I love green so I can't complain.

With the logo, I think you might want to fade it into your black on the sides as well. It fades on the top and bottom but is just cut off at the sides. Might flow a bit better.

I also think that you might want to take a really hard look at your white space, because you have a ton of it. White space can be used well, but I don't think you did it quite right. I get large blocks of background and small blocks of content. Maybe adjust this ration a bit.

quote:

---

all i was concerned with when making my site is making my site work in IE in a majority of the different resolutions

---

This is probabally one of the easiest tasks to achomplish. When I started out here I went on a rant about how Netscape sucks, how it should go to the firey pits of hell, and how it totally fuct up on one of the designs I did. A member named F1_Error kindly pointed out to me that if I change my focus from designing for IE to designing for NS that both NS and IE would be accounted for since what works in NS will 95% of the time work the same in IE.

The reasoning for this is that IE is a much more lenient browser. You can make coding mistakes and IE just keeps on chugging without thinking about it twice. This logic was given to me years ago and things have changed slightly, however I still stand by the idea that coding for NS or Mozilla or Opera you will learn to have a far more structured coding style, and be a better web programmer for it.

So where does that leave you?

I would say, take what Dracusis said to heard. Don't just copy the code and use it, but look at it and try to see the differences, if you don't understand something look it up. It will be like pulling teeth but in the end after you have gone through all the tedium you will end up learning something. I do this whenever I see a good looking site. I imediately go to their source code and see how they are working it. Sometimes it confuses the hell out of me but I keep working it until I figure it out. If it really baffles me I send an email off to the webmaster, they are usually good to help me out.

Next, work on some true fluidity. Take a look at bluerobot.com, that is an excellent CSS site for doing similar layouts to what you are trying. The code works on all major browsers as well. Lynx even likes it and that is a really good thing.

Good luck, see you on the next evolution.