PDA

View Full Version : Help With New Css Web Site


richcodesign
11-23-2009, 04:25 PM
Im wanting to create my website in a much better way now that I have a clearer understanding of CSS (compared to 6 months ago).
Im happy with the layout of my site, but now want to create the curved boxes with CSS and not images.

I just want to see what people opinions are in regards to this.

I am going to start from scratch and re-create all the divs and classes etc.
I have hand drawn my layout on paper that now consists of:
a container with rounded corners - all CSS, then a header that sits in that, then my animation that sits under the header, then my navigation bar, then another rounded corner box for body text and last is my footer info.
This is quite straight forward, but the two column layout is where i get stuck.
It is layed out as you can see by my attached image. Im not sure if the content to the right should be 2 divs or one (like it is at the moment) - so this is where any pointer would be blessed.

Thanks for everyones time and i look forward to your replies.

link:

www.richcoproducts.co.uk

gentleone
11-23-2009, 09:31 PM
want to create the curved boxes with CSS and not images
This can be only done with CSS3, but only Safari and Google Chrome support this. The other browsers will just render 90 degrees corners.

http://www.the-art-of-web.com/css/border-radius/

Regarding your 2 column layout (I don't do the header and menu here, because that stays the same I assume). Only the content part:
<div id="content">
<div class="left">
<div class="bodytext"></div>
</div>
<div class="right">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
</div>

CSS:
The content div you give of course the same width as your header and menu, but lets say it is 900px width and a fixed height of 700px:
#content {width:900px}
.left {float:left;width:550px}
.right {float:right;width:350px}
.bodytext {height:700px} /* furthermore style with border-radius property */
.box1 {height:300px}
.box2 {height:400px}

For the rest you have to position it with margins, paddings, etc. and I took a fixed height (700px), but you can also give no heights so that the content will stretch the height itself.

d a v e
11-24-2009, 03:09 AM
genttleone - css3 rounded corners are supported by firefox too if you scroll down a little on that page you linked to ;)

gentleone
11-24-2009, 05:49 AM
css3 rounded corners are supported by firefox too

Of course... thanks for correcting me, D A V E ;)

richcodesign
11-24-2009, 08:02 AM
Thanks so much, i really appreciate your feed back. I will work with the rounded corner boxes - and have it ready to go when other browser catch up to CSS3!

richcodesign
11-24-2009, 08:04 AM
Thanks for your help

richcodesign
11-24-2009, 08:19 AM
<div id="content">
<div class="left">
<div class="bodytext"></div>
</div>
<div class="right">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
</div>

CSS:
The content div you give of course the same width as your header and menu, but lets say it is 900px width and a fixed height of 700px:
#content {width:900px}
.left {float:left;width:550px}
.right {float:right;width:350px}
.bodytext {height:700px} /* furthermore style with border-radius property */
.box1 {height:300px}
.box2 {height:400px}


Thanks for doing this code for me. As you would have seen, i set the current site up very different to your code. I can see how you have done this and will use it to improve my current site.
Thanks again.

gentleone
11-24-2009, 09:04 AM
I just gave you a head start ;) The rest is up to you to improve things and to explore what you all can do with CSS. Check out sites like w3schools, cssplay, csstricks, listamatic and blogs like smashing magazine, web designer wall, six revisions and so on.... there are tons of good sites with tons of useful information.