Please critique layout

[djpete]

Hi guys,
Constructive feedback greatly appreciated on this rough layout.
Go easy! I'm learning!!

My reasoning for doing what I have done.

I wanted a fixed width 960 wide website.
I found out that to have the grey column go all the way down I had to do a faux mod. Have I done it correctly?

I have 5 sections with the icons. I did these as classes and then padded the text itself rather than the id so it wouldn't push all the othe other divs out/ recalculate sizes etc etc.
Is this shortcut acceptable and correct?

The footer text needs to be vert centred and as css can't do this simply what is the best and simplest way to get this to happen?

I have read that its good practice to have the *reset margins which I have added for *body. Is this correct?

Any general advice please...

The site...
http://fornofood.com.au/testsite/

[Rayzur]

Hi dj,
Let me take a look at it and I'll post back.

[djpete]

Thank you Rayzur.
You'de probably given up on me.
I've been doing my head in reading all this CSS
:-)

[Rayzur]

I found out that to have the grey column go all the way down I had to do a faux mod. Have I done it correctly?

Yes, you have set your faux image up correctly. You could have used the shorthand background property to set your repeat and position all in one rule.

background: url(images/greybg.gif) repeat-y right;

I have 5 sections with the icons. I did these as classes and then padded the text itself rather than the id so it wouldn't push all the othe other divs out/ recalculate sizes etc etc.
Is this shortcut acceptable and correct?

I would have been tempted to do that with a UL and set those images as BG images on the list items. The images are really just for decoration so they do not need to be in the html. You would just set a width (as you have it now) on the list items and float them left. You would need to set some top padding on the li also to keep the text out of the BG image.

The footer text needs to be vert centred and as css can't do this simply what is the best and simplest way to get this to happen?

That can be done easily by setting the line-height for the #footer p the same height as your footer div. Then just reset the footer p margins to zero.

Most all of my demos are set up like that and you can see how it works by viewing the page source here.
http://www.css-lab.com/demos/2col/2col-fixed-soc.html

I have read that its good practice to have the *reset margins which I have added for *body. Is this correct?

*body {
	margin: 0px;
	padding: 0px;
}

No, that is not correct. Either use the universal selector by itself to zero out all elements or just reset your margins as you go along. The universal reset looks like this.

*{margin: 0;padding: 0;}

It can cause problems with form elements though so use with caution. Personally I have gotten to where I don't use it anymore. I just set zero out my default body margin/padding and reset all others as I go along. You wind up setting your own margins anyway so it is redundant. But it can be helpful for beginners as they don't always know which elements get default margin/padding.

If you look at the css from that link I gave above you will see my "Typography" styles at the bottom. Then on the body element at the very top I set the margins and padding there as I choose.

[djpete]

Fantastic thanks Rayzur.
I had been using the line height tip re vert centering but thought it was not the right way. It seemed to work fine.

And I will try the UL suggestion and see how I go.

One more...
The note I put... re padding text instead of the id.
Is that the done thing?
Seems so much easier than padding an ID and then having to adjust everything else because of the blowout.
?

[Rayzur]

I had been using the line height tip re vert centering but thought it was not the right way. It seemed to work fine.

It only works correctly when there is just one line of text, if the text wraps to another line then there is a large line-height gap between them. It works well for short footers such as yours. Vertical-Centering with css is a difficult subject and there are some threads running around here about it. You could probably pull them up with a forum search.

And I will try the UL suggestion and see how I go.

If I get a chance later I will make an example of what I had in mind. Just don't set a height on the "ul" or the "li" and they can expand. You will want to set overflow:hidden; on the "ul" to contain the floated "li".

One more...
The note I put... re padding text instead of the id.
Is that the done thing?
Seems so much easier than padding an ID and then having to adjust everything else because of the blowout.?

Yes, I often avoid calculating paddings into my container widths. It makes it hard to adjust your text spacing later if you need to since you have to go back to the parent and correct both width and padding. Setting it on the text gives you the freedom to change it in one spot.

[djpete]

Yes, I often avoid calculating paddings into my container widths. It makes it hard to adjust your text spacing later if you need to since you have to go back to the parent and correct both width and padding. Setting it on the text gives you the freedom to change it in one spot.

Well that's great news a s that's a big issue for me. The text way just makes it so much easier...

I'm having a play now with the UL option so will compare when I see yours.

Thanks again.
At last some of this is making a little sense for me.

[djpete]

Rayzur,
The images in each of those divs will be different and there will be extra ones also in there. Would I still use the unordered list method?
Thanks

[Rayzur]

Originally Posted by djpete

Rayzur,
The images in each of those divs will be different and there will be extra ones also in there. Would I still use the unordered list method?
Thanks

Hi,
If you are going have additional images in there along with separate BG images it could go either way. You can use divs, though I would go ahead and set up an ID to go along with each of those servicesbox classes. That will allow you to use individual BG images via the css and then you can set the other images in the html.

I got the code going in that direction for you and set up some "p" and "h'' styles also. You will see where I set up ID's for the service BG images, just change them accordingly. I have them all set with that same image now.

Hope that helps

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
* {margin:0;padding:0;}

body {
    margin:0;
    padding:0;
    background:#AAA;
    font:100% Arial, Helvetica, sans-serif;
}
#container {
    width:960px;
    margin:20px auto;
    overflow:hidden;/*contain inner floats*/
    background:#FFF url(images/greybg.gif) repeat-y right;
}
#header {
    height:150px;
    text-align:center;
    background:#8ECDFA;
}
#nav {
    height:40px;
    line-height:40px;
    background:#000;
    color:#FFF;
}
.service {
    float:left;
    width:154px;
    text-align:center;
    padding-top:70px; /*BG image height*/
}
#a {background:#CDF url(images/hosting.jpg) no-repeat 50% 10px;}
#b {background:#BBF url(images/hosting.jpg) no-repeat 50% 10px;}
#c {background:#CDF url(images/hosting.jpg) no-repeat 50% 10px;}
#d {background:#BBF url(images/hosting.jpg) no-repeat 50% 10px;}
#e {background:#CDF url(images/hosting.jpg) no-repeat 50% 10px;}

.service p{color:red;}

#rcol {
    float:right;
    width:180px;
    padding-top:.5em;
}
#content {
    float:left;
    width:780px;
    padding-top:.5em;
    text-align:justify;
}
#footer {
    clear:both;
    height:50px;
    line-height:50px;
    background:#333;
    text-align:center;
    font-weight:bold;
    color:#FFF;
}

/*=== Demo Typography ===*/
h1,h2,h3,p{margin:0 .5em .5em; font-size:1.5em;}
h1{padding-top:.3em; margin-bottom:.15em}
h2{font-size:1.2em;}
h3{font-size:1.1em;}
p{font-size:1em;}

#nav p,
#footer p{
    margin:0;
    font-weight:bold;
    text-align:center;
}

</style>
</head>
<body>

<div id="container">
    <div id="header">
        <h1>Webpage Title Here</h1>
    </div>
    <div id="nav">
        <p>Nav Links Here</p>
    </div> 
    
    <div class="service" id="a">
        <p>Service div id=a</p>
        <p>Service div id=a</p>
        <p>Service div id=a</p>
    </div>
    <div class="service" id="b">
        <p>Service div id=b</p>
        <p>Service div id=b</p>
        <p>Service div id=b</p>
    </div>    
    <div class="service" id="c">
        <p>Service div id=c</p>
        <p>Service div id=c</p>
        <p>Service div id=c</p>
    </div>    
    <div class="service" id="d">
        <p>Service div id=d</p>
        <p>Service div id=d</p>
        <p>Service div id=d</p>
    </div>   
    <div class="service" id="e">
        <p>Service div id=e</p>
        <p>Service div id=e</p>
        <p>Service div id=e</p>
    </div>

    <div id="rcol">
        <p class="textpadding">Lorem ipsum dolor sit amet consectetuer nisl vitae porttitor id ut. Habitasse 
        In aliquam magna consectetuer Quisque lorem Nam et sapien et. Ut vitae ac venenatis malesuada id ipsum 
        nibh mattis Vestibulum orci.</p>
    </div>

    <div id="content">
        <p>Lorem ipsum dolor sit amet consectetuer sit metus orci ultrices elit. Dictum pretium pretium Nulla 
        parturient lacinia Duis augue pede nec id. Dui wisi nulla tellus et sem Vestibulum convallis et Phasellus 
        cursus. Lorem semper at at senectus Fusce elit vitae mattis nibh tincidunt. Lacinia leo dolor Integer 
        pretium et sit mauris tincidunt Donec pellentesque.</p>
        <p>Id Vestibulum pellentesque sem aliquet lorem Fusce velit Vestibulum Morbi leo. Pretium mauris tincidunt 
        cursus ac montes id convallis quis tristique ac. Et mauris porta gravida interdum pretium eu Phasellus 
        ridiculus semper sem. Vitae ante nascetur ipsum et justo amet malesuada hac malesuada lacus.</p>
        <p>Main content here</p>
        <p>Main content here</p>
        <p>Main content here</p>
    </div>

    <div id="footer">
        <p>Footer Stuff Goes Here</p>
    </div>
</div><!--end container-->

</body>
</html>

[djpete]

Thanks Rayzur.
Have to study what you have done there.
Very tidy and short!