make site a certain height

[RIKennedy]

Hello! I'm pretty new to web design and I still have trouble with the css part of everything. I hope someone can help.

Here is the problem, I put a logo in the bottom left corner of the main layout of the page. This logo goes further down the page as the content gets longer but on pages without a lot of content the logo cuts into the navigation bar.

Here is an example: http://www.naturejoes.com/education-programs/k-12.html

I don't know what to do... can I make the page body div a minimum height so the logo will be visible at all times but the body area will still expand when there is more content.

or is there a better way?

Thanks in advanced for any help,
I also appreciate any comments or tips on the design and layout of the site.

- Ryan

 

[wbmstrz]

I'm very new at this but want to try to help. Maybe you know more than me but have you tried adjusting the image padding? I will play with that first. Hope this helps.

 

[RIKennedy]

No, thats not working. I'm pretty sure I need to Add a height to the css for one of the container div's but I'm not quite sure how to do it.

please help

 

[PixelPusher]

Ryan, to fix your issue you can just use "min-height: *px" and set the minimum amount of pixels for a given div (in this case "main").

Couple comments about your css and html:

1. Remove the div called "content", there is no need for it.
2. Just set the width for "banner", "tagline" and "main" to 800px and and use auto settings for left and right margins
3. Then add the unique styles for each one after
4. Make div "banner" a H1 tag this way you have a main title to each page
5. Make div "tagline" just an H2 tag, sub-title to each page
6. Don't use empty P tags for spacing, use margins or padding instead
7. No need to set the cursor on the list items (LI)
8. No need to set the cursor on the anchor/links (A) this is default behaviour

Here is some cleaned up css and markup for your site. Let me know if you have any questions. Feel free to pm me, will get faster response.

CSS

h1.banner, h2.tagline, div.main {
width:800px;
margin:0 auto;
position:relative;
}
h1.banner {
display:block;
height:143px
line-height:130px;
font:bold 17pt "Century Gothic",Arial,serif;
color:#000;
background-color:#97BF3F;
border:3px solid #0378A6;
margin-top:40px;
text-align:center;
}
h1.banner span {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:transparent url(../images/naturejoesbanner.jpg) 0 0 no-repeat;
}
h2.tagline {
display:block;
font:bold 16px "Century Gothic",Arial,serif;
line-height:30px;
color:#000;
text-align:center;
}
div.main {
background:#97BF3F url("images/naturejoesmalllogo.jpg") left bottom no-repeat;
border:3px solid #0378A6;
margin-bottom:60px;
}

HTML

<h1 class="banner"><span></span>Nature Joe's</h1>
<h2 class="tagline">
   Live Animal Shows, Custom Animal Habitats...</h2>
<div class="main">...</div>

NOTE
It is very important to have a heading 1 tag for each page, because it is semantically correct and two it improves general seo for your site and creates a logical breakdown of content. Never use only a graphical representation of text when that text is a vital part of your sites content.