white boxes on top of my background

saskiasas / 2009-07-13 12:55:06   

Hello... here i am again...

I'm managed to get a background al thru the site. But the menu and the contant is nog transparant. I've searched the forum over and over. All I could found was to set the background color on tranparant. So I changed it in my css, see below:

  1. #menu {
  2.     text-align: left;
  3.     margin-left: 0px;
  4.     padding-right: 15px;
  5.     width: 230px;
  6.     overflow: visible;
  7.     top: 0;
  8.     bottom: 0;
  9. left: 0px;
  10.     position: absolute;
  11. background: transparent;
  12. }

The same with the content:

  1. #content {
  2.     height: 100%;
  3.     width: 800px;
  4.     margin: 115px 0 0 290px;
  5.     top:0px;
  6.     padding: 0px 0px 0px 0px
  7.     float: left
  8.     background: transparent;
  9. }

What am I doing wrong?

site

Vaska A / 2009-07-13 12:57:16   

I'm not sure what you are trying to do...could you explain a little more what we should see?

saskiasas / 2009-07-13 13:03:50   

Well, I'm trying to put a background (it's an gradient from a light greenish to white) on the background. The background is there... but know there are white boxs around the areas as my menu and the images...

I will change the background for now, so you will see what I mean....

(I just changed the background image and now the white boxes are gone!!)

saskiasas / 2009-07-13 13:06:14   

Do you have a tip on creating a gradient background that scales with the page??
I'm now using jpg...

saskiasas / 2009-07-13 13:13:31   

The old background gives white boxes again. You can see what I mean on this screendumps:

no white boxes

white boxes

I want the gradient one, without the white boxes. Isn't this weird?

lemathieu A / 2009-07-13 14:21:11   

in your #menu, set background to "none"…
I see the background gradiant and the white background menu

saskiasas / 2009-07-13 14:33:32   

That doesn't seem to the thrick... but thanks for thinking with me...

lemathieu A / 2009-07-13 15:33:50   

I see a difference between your "menu" and the post-nav area…
didn't you put a background to this one ?

saskiasas / 2009-07-14 08:10:11   

No not that I am aware of...

I just don't get why its working when my background jpg is a solid color... It's basically the same, both are jpg's and they are even the same size...

it's strange!

Vaska A / 2009-07-14 09:52:08   

What is not working? I still don't even undersetand what is trying to be done.

White boxes around what? The images? Then it's a css issue...and would have nothing to do with the background.

saskiasas / 2009-07-14 12:57:33   

Im trying to put a background image in to the whole site. I've made a jpg which I put in the background. This jpg is contains a gradient... And when I place it white borders show around the menu en the content of the site.

white borders around the menu and content

I don't want that, so I changed the background color to transparent. That doesn't do the trick. But the strange thing is, when I change the jpg and fill it with a solid color. The white boxes are gone...
I really do not understand this...

no white borders

I hope its clear now. I'm really trying... :-(
I searched my css en and the forum if anything isn't correct, but I can seem to find it.

Thank a lot for helping!

cruz / 2009-07-14 13:24:09   

Make your menu { background: transparent; } as well.

saskiasas / 2009-07-14 14:46:57   

well, that's seems to be the thing I don't understand... Because I changed that already in my css. This is the part of my css...

  1. * {
  2. ¬†¬†¬†¬†margin: 0;
  3. ¬†¬†¬†¬†padding: 0;
  4. ¬†¬†¬†¬†background: url(http://www.pirana.nl/test/files/verloop2.jpg) repeat-x;
  5. }

body {
    font-family: Palatino Linotype, Book Antiqua3, Palatino6, serif;
    font-size: 10pt;
    line-height: 17px;
    font-weight: normal;
    background: transparent;
    margin:0px
    
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; color:#4a4a4a;}
a:active { text-decoration: none; color:#eb4f74; }
a:visited { text-decoration: none; color: #4a4a4a; }
a:hover { text-decoration: none; color: #eb4f74; }

a img { border: none; }

#menu {
text-align: left;
margin-left: 0px;
padding-right: 15px;
width: 230px;
overflow: visible;
top: 0;
bottom: 0;
    left: 0px;
position: absolute;
    background: transparant;
}

Vaska A / 2009-07-14 14:56:47   

You can't add a background to *. Period.

Do you even understand what that does? Just add it to the 'body'...

saskiasas / 2009-07-14 15:20:13   

I didn't do that on purpose... I learning a lot, but I'm still making mistakes. :-(
I changed it and it works, thanks a million!

Vaska A / 2009-07-14 15:23:24   

Yes...but...what I'm getting at is keep things logical. You were trying to background the 'body' - then do that. Attaching a style to something you don't understand is confusion.

I tell people all the time that if they can explain things in simple language then they are much more likely to solve or debug problems. It's similar even with graphic design/communications...albeit a little less direct.

saskiasas / 2009-07-14 15:36:07   

yes I agree... communication should be simpel. It is my first time making a site like this. I need to learn what the do's and don'ts are.

But again thanks... I'm learning so much and that's really important for me. And this site is a great platform to create, learn and explore the html/css stuff. And I'm really eager...

thanks!

Vaska A / 2009-07-14 15:58:09   

Great...that is ultimately what the forum is for. If you learn the basics you will be able to push yourself really far...

Congrats!

This thread has been closed, thank you.