My Cheesy Side

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

My Cheesy Side

Post by s.dot »

Kay so you've guys seen all those offers for free whatever.. tvs playstations ipods cash etc. I always thought they were a joke till this guy i know online started getting lots of stuff.

So I've decided ima try to get some. =]

I did my first all DIV and CSS layout, and I'm unsure of it. I want suggestions/improvements before I design any further.

http://www.freegrabbag.com

I know there's one error in FF & Opera, and that's the body doesn't go all the way to the bottom.
Thoughts?

[EDIT: Yay 2,000 posts]
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Congrats on hitting 2000!Image

As for the design, it works. You're right about the body thing. Easy to fix though. Are there any other colors that you could throw in there, or perhaps something brighter in the header? It just seems like it is missing something. But it is clean.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

The links aren't supposed to work, right?

The picture in the header seems strange... can't exactly place it.

These things actually work? :-/

Ooh, and congrats for 2000 posts!
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Everah wrote:Congrats on hitting 2000!Image

As for the design, it works. You're right about the body thing. Easy to fix though. Are there any other colors that you could throw in there, or perhaps something brighter in the header? It just seems like it is missing something. But it is clean.
Could you erm... point me in the direction of fixing it. :-D
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I think if you put a clear: both; in the footer <div> (if you have one) it might drag that body portion all the way down. Maybe.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

It's not really a simple fix. You will need to create a background image and center it, rather than counting on the color of the div, and ensure that your text is still readable if no images are loaded.

That will give you the effect your looking for without requiring height: 100%;
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Ambush Commander wrote:These things actually work? :-/

Ooh, and congrats for 2000 posts!
I said the same thing. And he showed me pictures of his xbox and ipod. Meh, he could've bought them, but he said they were from these free offers.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I did my first all DIV and CSS layout, and I'm unsure of it. I want suggestions/improvements before I design any further.
So you want comments on the design or on the code as well?
As far as the design: looks good, but could get some finishing touches here and there. Like the logo which is a bit pixelated now. Or the alignment of the content (the way the left ads hug the side. But ads are always ugly, I know, I would just space them a bit).

The code: not bad for a first site. But, the html could be improved. As it is now, it suffers from "classitis". A common disease found in young and old sites. Only cure: some classes filosophy. Learn about the meaning of markup (start here for example).

If you only exchange td for div you could as well use tables all the way.

(hope you don't mind me nitpicking)
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

matthijs wrote:
I did my first all DIV and CSS layout, and I'm unsure of it. I want suggestions/improvements before I design any further.
So you want comments on the design or on the code as well?
As far as the design: looks good, but could get some finishing touches here and there. Like the logo which is a bit pixelated now. Or the alignment of the content (the way the left ads hug the side. But ads are always ugly, I know, I would just space them a bit).

The code: not bad for a first site. But, the html could be improved. As it is now, it suffers from "classitis". A common disease found in young and old sites. Only cure: some classes filosophy. Learn about the meaning of markup (start here for example).

If you only exchange td for div you could as well use tables all the way.

(hope you don't mind me nitpicking)
Not at all, that's what I was looking for. Like I said It's my first site where I've focused on CSS, so I expect the learning curve to be sharp. This is sort of a just for fun site so I can get some CSS skills behind me.

Actually I just realized that huge table with all the product offerings, shouldn't be a table... right? Divs all the way?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

Add this to the DIV you want ot exapand all the way to the bottom.

It should do the trick i think

Code: Select all

.your_div_name_here:after
{ 
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
}
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

@Pimptastic, he's got the div height set to 100%, it's not a float that needs to be cleared.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Here's what to do: Remove all the floats. Re-acheive the centered table effect by setting left and right margins to auto, perhaps also throwing in a text-align:center in the parent div (shouldn't be too much trouble).
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

astions wrote:@Pimptastic, he's got the div height set to 100%, it's not a float that needs to be cleared.
Okay cool, i didnt actually look at the code...i just took a stab in the dark Image
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Actually I just realized that huge table with all the product offerings, shouldn't be a table... right? Divs all the way?
Well, that's the point. It's not about replacing every table with divs. Just a div class="boxiebox" is as meaningless as a td. The point is to mark up the content in a meaningfull way.

Think about what the data is or represents. Is something a paragraph? Mark it up with <p>. Is it a header? h1,h2,h3 etc. Is something a list of things? Make it a <li>. Ordered list? <ol> Etcetera.

Of course, what each piece of content is, is not always black and white. So one developer would think something is a list, while the other would mark the same with a definition list.

In your specific case: what is the data of the goodies in the main content area? It could be a list of stuff. So you would mark it up as a <ul> <li>. Or you could say, it's tabular data. I have a few columns (item, price, id, etc) and some rows with the data in them. It's your choice.

One way to get the html correct is to start without any styles. How does the page 'look' without your stylesheet? The logo is the most important item on the page, the title so to say. So you mark that up with the <h1>. After that comes a navigation list (<ul><li><a href ...). Then the content with maybe several headers <h2>, <p> and <li>. Maybe a table here and there for tabular data. If you mark up the content well, even without your stylesheet the page looks good and is understandable.

There's nothing wrong with a div here and there. You group logical divisions of content together. Just use them sparingly.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

scottayy wrote:Actually I just realized that huge table with all the product offerings, shouldn't be a table... right? Divs all the way?
Tables are fine for tabular data. Displaying tables of information, like what you have, is a perfectly acceptable use of tables.
Post Reply