SITE REVIEW: update

I have been updating my site to CSS which has cleaned up my code a lot and I have also made some minor design changes. I wanted to get some input from more of you coders on the efficiency of the new site. I know that it runs fairly quick on as low as a 36k modem ( someone still has one!)

A lot of you had input on my first site review-I hope to see your input on this revision too. I especially want you coders to tear apart the technical aspects of the site. I'm more of a graphic designer, not a programmer so it's my weak point. RTM & Carnix, come & get it I know you'll find something wrong but I know it is a hell of a lot cleaner than the old one. Let me know where to tweak.

FYI-I'm changing the CSS over in stages so it is not all done yet, but most of the pages are. That is the only part I am looking for critiques on. Thanks in advance.

Hey, not bad!
I'd suggest pulling the STYLE attributes into your .css files and using CLASS attributes instead to avoid redundancy. Also, it means the CSS defs are downloaded and cached, so the user doesn't have to download a link's definition each time as part of the HTML...

The page loaded very quickly for me (FireFox 0.9.1). The only thing that took a second was the flash movie, but that was only a second or two delay.

Otherwise, you graphics are kept to a minimum, and are optimized (apparently) for web, so they're not 80K files, but yet they also look clean

You're learning my young padawan! The Net is strong with you. =]

.c


Um... just as I finished up this... I clicked reload and got a directory listing.. That's bad... you shouldn't allow directory listings... Did someone accidently delete your site? All you're files seem to be... gone...

heh:
http://www.vsssleep.com/BlahImages/Avat ... ng_Pig.gif

Yes, I wiped everything from the server to get rid of all the leftovers from the old site-then got zapped by lightning before I could get it re-uploaded.

I plan to try to put as much as I can into the CSS and have a minimal amount in the HTML. One thing that I want to do that I don't know how yet is to have my layout totally dynamic so that if one page has more content it will just push the elements below it down. (I assume it can be done)

Thanks for your input

No problem,

Are you talking about using a CMS of some sort? Or are you talking about the layer positions?

You can use relative position instead of absolute. That makes the layer's top left corner (the 0,0 position) relative to it's container. Technically, it's ALL relative, even absolute, it's just that absolute forces the element's container to be the window, not the DOM element it's called in (the table cell, for example)...

So, if you have a div inside a TD, and make it's position be relative, making it be positioned top=0 and left=0 will make it sit at the top left of that particular cell... see what I mean?

This way, you can have other items above it push it downward as they expand.

Be real careful to test though, because relative positions can cause some pretty weird results between browsers... CSS is still a little different from brower to browser and platform to platform, though it's getting much better these days.

.c

Sorry to disagree, but position:relative does not work in this way. It puts the object where it would be normally, and then displaces it <b>from that position.</b> So
Will do diddly-squat.

To achieve what you are looking for is a bit complicated in your case, because you have columns that split in two further down and stuff like that. You will need to create a container div for the center column and then float the two "sub-columns" inside. It's rather complicated to explain, but <i>reasonably</i> easy to impliment, but uses quite a lot of techniques. If you go to my site its all the tutorials that are crossed out as not ready yet

You should always aim build your columns to accomodate changes in text, including text-zoom.

About position:absolute. It is only really useful for columns that have nothing underneath them. Otherwise you have to use floating and floating really can get buggy, mostly in IE.

A few general pointers are:
should really be: Or h2 or whatever. Most markup has meaning attached to it, which means nothing to most of us, but for text and aural browsers it is important.

You also seem to have used a lot of p's with classes. All your one's are in the same div, so you can use:

Which will select any p that is within the div of class vssnewsoc. This sort of thing is really handy for trimming down code.

Try to put links into lists, for the exact same reason. Your navigation is a <b>list</b> of contents, so put it in a list

Try to use id's instead of classes where appropriate, it's not necessary but it will help make the CSS more understandable when you come back to it in a couple of months.

Overall it is an admirable effort for a first try. CSS is a big, complicated thing and there is a lot to learn. Well done for taking the plunge and getting started.

Semantic difference, but you're right. I should have added "based on the formatting properties of the container" That is, cellpadding="2" would make the relatively positioned element's 0,0 coord at 2,2 from the top left of the cell... and if the cell has ALIGN="right" assigned to it... heh... you're on you're own... As such, relative positioning can be tricky.

.c

No, seriously, it has <b>nothing</b> at all to do with the parent element. I did a little eg to demonstrate. A div with some text. And some of the words have been put into spans:

http://www.caffeinefuelled.net/richard- ... os_rel.htm

The spans are coloured red for your conveinience

Now we apply

to all of the spans and we get:

http://www.caffeinefuelled.net/richard- ... s_rel2.htm

Each of the spans, shifts 10px right, and 10px down <b>from their original position</b>


It's this line I am disagreeing with.
It's actually more complicated than this. I love the way they word the specs BTW So simple and easy to understand:


Now, just to make it even more complicated, the w3c decided that for a position:absolute element, the "containing block" is defined as the "nearest parent element that is positioned". If no parent element is positioned, it defaults to the viewport (window)

Maybe we're arguing the same point... but I added to your examples to illustrate what I mean. The use the same styles you created. Below your example, I added a table.

Example 1: Table has CELLPADDING="0"

http://www.project151.com/test/test1.php

Example 1: Table has CELLPADDING="50"

http://www.project151.com/test/test2.php

You'll notice that the only thing different is the padding of the cells is increased. The offset of the text stays the same, since it's relative. I threw in a graphic in a table below the text to further illustrate.

I really think we're arguing semantics and differences in the what we call the thing, not the way the thing works... =]

.c

Oh yeah, I understand that, but I just don't get the point about them being the same thing. They really are <b>very</b> different. I'm not at all sure you can make columns with position:relative. I cant think of any way to pull it off effectively.

You also have to bear in mind that a position:relative element will affect other elements on the page, but position:absolute will not.
If you make those spans position:absolute, the space where they normally exist will collapse down, like they don't exist at all:

http://www.caffeinefuelled.net/richard- ... os_abs.htm

My point is that you cannot make columns with pos:relative, and pos absolute is not pos relative from but at the edge of the window.

Columns? No, I don't really see how that would be possible either... I was talking about emulating rows per the original question:



Push elements down, not sideways. I think you and I just like running in circles =] It's good excercise!

.c

lol sleep systems. should have found this site before i bought my futon damn.. very plain yet efficient site. U do have the html down now lets jsut get some text.. Minimum of 250 words per page id suggest. Have u index yet? how are u ranking,. Id imagine its tought to compete with all the other mattress company

Well, it's not too late to return your futon

There is well over 250 words on most pages.

#1 in Google, #2 in Yahoo & MSN-adjustable air beds