SITE REVIEW: update

  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

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 ( :shock: 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 :D 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.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

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
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

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 :D
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

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
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Carnix wrote:
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?


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
Quote:
position:relative;
left:0px;
right:0px;
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 :roll:

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:
Code: [ Select ]
<p class="head3">Other Products</p>
should really be:
Code: [ Select ]
<h3>Other Products</h3>
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:
Code: [ Select ]
div.vssnewsoc p{
  /*styles*/
}
  1. div.vssnewsoc p{
  2.   /*styles*/
  3. }

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.
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

rtm223 wrote:
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>


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
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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
Code: [ Select ]
position:relative;
left:10px;
top:10px
  1. position:relative;
  2. left:10px;
  3. top:10px

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.
Quote:
Technically, it's ALL relative, even absolute, it's just that absolute forces the element's container to be the window
It's actually more complicated than this. I love the way they word the specs BTW :roll: So simple and easy to understand:
Quote:
<b>relative</b>: The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

<b>absolute</b>: The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.


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)
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

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
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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.
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

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

Quote:
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.


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

.c
  • phatgalaxy
  • Novice
  • Novice
  • phatgalaxy
  • Posts: 32

Post 3+ Months Ago

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
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

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

There is well over 250 words on most pages.

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

Post Information

  • Total Posts in this topic: 12 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 4 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.