Page 1 of 2
My Cheesy Side
Posted: Sun Aug 06, 2006 8:22 pm
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]
Posted: Sun Aug 06, 2006 8:43 pm
by RobertGonzalez
Congrats on hitting 2000!
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.
Posted: Sun Aug 06, 2006 8:52 pm
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!
Posted: Sun Aug 06, 2006 8:59 pm
by s.dot
Everah wrote:Congrats on hitting 2000!
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.

Posted: Sun Aug 06, 2006 9:18 pm
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.
Posted: Sun Aug 06, 2006 9:39 pm
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%;
Posted: Mon Aug 07, 2006 12:13 am
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.
Posted: Mon Aug 07, 2006 2:52 am
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)
Posted: Mon Aug 07, 2006 4:00 am
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?
Posted: Mon Aug 07, 2006 4:25 am
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;
}
Posted: Mon Aug 07, 2006 5:55 am
by Benjamin
@Pimptastic, he's got the div height set to 100%, it's not a float that needs to be cleared.
Posted: Mon Aug 07, 2006 7:22 am
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).
Posted: Mon Aug 07, 2006 8:03 am
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

Posted: Mon Aug 07, 2006 9:25 am
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.
Posted: Mon Aug 07, 2006 3:04 pm
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.