Feedback on my first CSS designed page

sirichmond

sirichmond

sirichmond

Associate
Joined
25 Apr 2007
Posts
139
Afternoon all,

Just a quick one, I am working on a design for version 4 of our website see here

http://www.allthegearnoidea.net/version4/

Now the previous 3 versions of the site have been designed using tables to control the layout of the site, after a beating from this forum I have got off my back side and started to get my head around CSS, also Flash. So any comments on the look/coding would be great and also any pointers.

One other questtion is I have split the content up into separate boxes (Flash in one at top, table in another below) as seen on the design, now they basically have the same parameters so do I need to name then separate for example content 1, content 2 etc etc or can I use content 1 several times in one page depending on how many splits I want in the content.

Many Thanks
Simon
 
I havent looked at the code but a couple of points on the design itself if you don't mind:

- Background is too in-your-face. Try dulling it down, with less colour and less contrast? Why not make it a bit more subtle, it's distracting from your content. The blue also clashes with the blue in your header image.

- Where is the content aligned? It seems to be in the middle of nowhere for me; not central and not to the left.

- I don't mind your black content boxes but the header needs some work. I think the picture is stretched, it's pretty soft/compressed, and the harsh edge on the left is a bit 'strict'.

I hope that helps with the aesthetics anyway :)
 
Thanks for the reply, to answer some of your points.

The header is just sat there at the moment as a filler while I wait for a friend with far more graphic design expierence than me to deisgn a logo for us.

The positioning of the content I like, not centred or to the left just slightly indented so that will stay unfortunately, its 200px from the left.

The background again not finalised and I know its a bit much at the moment and does want dulling down a touch.

Mainly wanting feedback on the CSS seen as though I got so much grief for using tables before, plus its my first time ;)

Cheers
 
Looks good, always great to make the step to CSS.

Quick tip, make a container div that goes around your entire site, position that where you need it to be, now you don't have to repeat all that CSS on the divs inside it. For instance

Code: 
CSS
#container { 
  margin: 0 auto; // Center my site
  width: 960px;
}

HTML
<div id="container">
    <div id="banner"></div>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

This will also fix that issue where if you expand your site really wide, divs start moving onto the same line.

When using an image like you have, I find it best to center the site because the bg image is centered too. Then move the container div margin-left: -#px; to get it where you want it to be.

Another way to address that issue where divs move on to a single line if you make the site really wide, is a clearfix div.

Code: 
CSS
.clearfix { clear: both; }

HTML

<div class="floated">This div is floated left.</div>
<div class="clearfix"></div>
<div class="floated">This div is floated left.</div>
<div class="clearfix"></div>
<div class="floated">This div is floated left.</div>
<div class="clearfix"></div>

And a non-CSS/HTML related tip, if you want your site to be a resource people visit... shorten the URL. ATGNI.com People like shorter urls. Or do allthegear-noidea.com. But I really have no professional background on that sort of thing.
 
Last edited:
FabienO said:
Looks good, always great to make the step to CSS.

Quick tip, make a container div that goes around your entire site, position that where you need it to be, now you don't have to repeat all that CSS on the divs inside it. For instance

Code: 
CSS
#container { 
  margin: 0 auto; // Center my site
  width: 960px;
}
Click to expand...

No need for a container div, just use the body. :)

Code: 
body{
  width:960px;
  margin:0 auto;
}
 
Muel said:
No need for a container div, just use the body. :)
Click to expand...

The container div is almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.

You also sometimes want to put things outside the container div, can't do that with body.

Though using the body is fine, it's probably better practice to use a container div.
 
FabienO said:
The container div is almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.

You also sometimes want to put things outside the container div, can't do that with body.

Though using the body is fine, it's probably better practice to use a container div.
Click to expand...
Having built stuff using the body tag for a year or so, I agree. It can be used but you need to be careful with it. Opera (I think) for instance doesn't support using a margin on the body.

I use it currently on my portfolio site, but that's because it was a quick theme for Wordpress, the next version will need a page container.

I was just thinking for a quick fix, he could copy that block into the stylesheet and not have to bother editing the pages, of which there may be many. :)
 
Just spent 5 mins on the high resolution issue by setting the container to a specified width so the boxes dont stack up on the right, not the most elegant solution but works for now. Also set the background to stay left whatever the screen res and that seems to work too at the moment though I may try centre the page and background on screen so it looks better.
 
You can have the centered background on the body....

Code: 
body {
  background: #000000 url('images/backgrounds/bkg1.jpg') no-repeat fixed top center;
}

#container {
  float: left;
  margin: 0 auto; // Centers div.
  width: 620px;
}

Now you can remove all those

Code: 
width: 620px;
float: left;

From the other divs.
 
Last edited:
Sorted all that now so removed all unwanted code. Next thing is should I add most of my CSS to my external stylesheet to save repeating code at the top of all pages through the site. All route pages will be of the same layout, other sections may be layed out seperately but all pages for that section will be the same. So if I just have one stylesheet that is called by all pages that includes all the div's for all pages, obviously only the ones metioned on that page will run?

Does that make sense?
 
One problem after setting my contaner div to 650px I have lost my facebook group button which used to float in the centre of the page vertically and on the far left. Any ideas?
 
You must log in or register to reply here.
Back
Top Bottom