first total css design! only one problem i'm having...

benj posted this at 06:01 — 23rd May 2008.

Joined: Apr 2007

Hey everyone, I'm currently working on my first web site design that is totally css based...actually for my design business website. I'm surprised by how easy it is compared to table based designs.

SO...one problem I'm having and can't figure out... You'll see on my site right below the nav bar there is a bit of black space. I don't want this there and have tried almost everything to make everything fit together. Maybe someone with a bit of experience can shed some light on this?

Here's my URL:

http://www.benjisa.com/draft/

Here's my CSS:

http://www.benjisa.com/draft/stylesheet.css

Thanks in advance! Any other comments about how I do my CSS are welcome. Please remember this work is in progress!

benjisa.com

Megan posted this at 12:48 — 23rd May 2008.

She has: 11,421 posts

Joined: Jun 1999

Those links aren't working - is your site down? I'll check back later.

Megan posted this at 15:41 — 23rd May 2008.

She has: 11,421 posts

Joined: Jun 1999

Okay, now I can see it. It's not the navcontainer, it's the promo area and the image inside it creating that gap. Aha! No, it's the paragraph around the image tag in the #main div. Get rid of that p around the image and you're golden (or the margins on the p). What I don't really get is why the margin on the paragraph is going outside the #main div. That doesn't make sense...

For some reason I can fix it by applying some padding to the #main div and adjusting the width. I also put the image into the background so I could see what's going on:

.main {
 background-image: url(images/homebody_10.jpg);
 height: 303px;
 padding: 10px 35px;
 width: 770px;
}

By the way, you really shouldn't need that div class=nav inside the nav container - it's totally not needed. This is happening quite a lot in your code. Try to reduce extra div's as much as possible. It looks like your header div isn't closed properly but it's easy to get confused with 4 nested divs in there. Nesting divs is as bad as nesting tables.

Also re-visit the difference between id's and classes. Classes are for things that may be used multiple times. Id's are for things that exist only once. So your main div is something that only occurs once on the page. It should be an id not a class. Same with navcontain and footer etc.

Megan
Connect with us on Facebook!

benj posted this at 03:40 — 27th May 2008.

They have: 36 posts

Joined: Apr 2007

Thanks very much for the help, Megan! I knew it was probably something simple...

I did clean up my code a bit...I know there were some unneeded elements. There are some circumstances though when I have to use 2 divs when I think I should be able to use one. For example, with my div "headerright", I had to make another div for the text that goes in it (rightheadertext). When I put the text directly in the "headerright" div and applied padding, it made the background image all wonky. Do you know anything about why that's happening?

Thanks again. I appreciate the help greatly!

benjisa.com