Forums

Chris Enloe

Hey,

I am quite new to CSS, still in the process in learning what everything does. So I was designing, and I have gotten to a problem. Why is the white space at the bottom, and how may I fix it? I have included my CSS so far, and no it's not complete yet. I have a live link on a test server, but for some reason the background isn't showing up as well, but if you have the Editor Toolbar for Firefox then just "Edit CSS", and then you can see it. Can anyone help me with these two problems?

http://atest1.vistapanel.net/chrisperso ... onal2.html

/*
    By: Chris Enloe
*/

*   {
   margin: 0;
   padding: 0;
}

body {
    background: url(images/bodyBG.jpg) repeat-x;
    color: #f0f0f0
}

#page-wrap {
    margin: 0 0 0 320px;
    position: relative;
}

a img {
    border: 0;
}

.clear {
    clear: both;
}

h2 {
    font: 30px \"Georgia\";
}

p {
    font: 14px \"Georgia\";
}

#content-wrap {
    float: left;
    width: 826px;    
}

#content-area {
    float: left;
    width: 590px;
    background: #1f1f1f;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 16px;
    position: relative;
    z-index: 100;
    min-height: 600px;
}

#content-area a {
    color: #f0f0f0;
}

#content-area a:hover {
    color: #7a7c7c;
}

ul#nav {
    float: left;
    list-style: none;
    font: 35px \"Georgia\";
}

ul#nav a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-style: 
}

#header {
    height: 110px;
    margin-left: 30px;
}

#header a {
   border: 0px;
}

WildSpirit

Hi Chris,
I'm also newer to CSS and building websites in general but I actually think I know what is happening!
I don't think your background image (bodyBG.jpg) is tall enough and that is why you are seeing the white.

You could go back into photoshop (or wherever you created that image) and make it much taller OR the easier way would be to add a background color that is the same color as the bottom of your bodyBG.jpg image (that dark gray color).

So the CSS for that would look something like this:

body {
background: url(images/bodyBG.jpg) color:#thatdarkgraycolor; repeat-x;
color: #f0f0f0
}

As for the image not showing up unless I "edit css" from firefox web developer, make sure the image is really uploaded and has the correct filepath.

Hope that helps! :)
~Lyle

Chris Enloe

I fixed the Background issue, but I am still having the issue of the background actually coming up without the Designer Toolbar.... :| I hope that I can figure this out.

virtual

WildSpirit wrote
I don't think your background image (bodyBG.jpg) is tall enough and that is why you are seeing the white.

which is correct.

WildSpirit wrote

So the CSS for that would look something like this:

body {
background: url(images/bodyBG.jpg) color:#thatdarkgraycolor; repeat-x;
color: #f0f0f0
}

That is incorrect, the way to write the background code is
body {
background: #313131 url(../images/bodyBG.jpg) repeat-x;
color: #f0f0f0
}
The color usually comes first in background shorthand, which is what you are using. Also note the ../ before the call to the image. Your css file (which is in a folder) is looking for a jpg in a folder called images, so you have to add the ../ to tell the css file to look outside its own folder.

You also have several other errors which you should correct by running through the validator to find them.

Chris Enloe

Thanks for the help so far! :) I think that I have come pretty far in two months now. But right now, I really don't care if things validate or not, I just want to get things where I want them to be, but nevertheless, thanks!

virtual

Who cares if your site validates? A lot of people don't, but let me just tell you from experience that the validator catches all the little errors and typos that you and even experienced coder miss, and which can cause all sorts of problems in different browsers. The validator is your friend, not your enemy, you should use it. There is even a Post at the beginning of this forum viewtopic.php?f=2&t=3716 suggesting that you do this before posting your problem.

Chris Enloe

I just did that code for the background, just like you posted. When I opened it up in the browser it worked just fine! Thanks for that!

treehouse : what would you like to learn today?

Forums

New to CSS