The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Background image is overprinting white table background
jsdevore
post Feb 17 2007, 11:28 AM
Post #1





Group: Members
Posts: 4
Joined: 17-February 07
Member No.: 1,935



I have created this site mostly using css. However, to center the site, I have placed everything inside a table and centered the table. I would like to add a background-image to the site, but have the white background in the table override the background-image. I have successfully validated my css page. I believe the problem may be related to my use of absolute positioning in my #copy div; when I remove it, the white background shows through but my copy appears at the top of the page.

Any help you can provide will be greatly appreciated!

Here is a link to the page that I am tinkering with:
http://www.plgaladies9.com/aboutus.html

Here is a direct link to my style sheet:
http://www.plgaladies9.com/menupl9.css

Thank you.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 6)
pandy
post Feb 17 2007, 02:45 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(jsdevore @ Feb 17 2007, 05:28 PM) *

I have created this site mostly using css. However, to center the site, I have placed everything inside a table and centered the table.

Why did you do that if you use CSS? wink.gif

QUOTE

I would like to add a background-image to the site, but have the white background in the table override the background-image. I have successfully validated my css page. I believe the problem may be related to my use of absolute positioning in my #copy div; when I remove it, the white background shows through but my copy appears at the top of the page.

I'm known to miss the obvious, but all boxes with text except the top menu have a white background in the browsers I tried (IE6, FF). unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jsdevore
post Feb 17 2007, 04:35 PM
Post #3





Group: Members
Posts: 4
Joined: 17-February 07
Member No.: 1,935



QUOTE(pandy @ Feb 17 2007, 02:45 PM) *

QUOTE(jsdevore @ Feb 17 2007, 05:28 PM) *

I have created this site mostly using css. However, to center the site, I have placed everything inside a table and centered the table.

Why did you do that if you use CSS? wink.gif

QUOTE

I would like to add a background-image to the site, but have the white background in the table override the background-image. I have successfully validated my css page. I believe the problem may be related to my use of absolute positioning in my #copy div; when I remove it, the white background shows through but my copy appears at the top of the page.

I'm known to miss the obvious, but all boxes with text except the top menu have a white background in the browsers I tried (IE6, FF). unsure.gif



Thanks for your response. Good question regarding the use of the table for centering. I was trying to center it using a wrapper tag and it just wasn't working. I threw the contents into a table and it was centered in seconds. Probably not the right answer, but I'm pressed for time and I knew that would work.

The boxes themselves are on a white background, but the striped image is showing through all other places. I want the site itself to sit entirely on white with just the striped background showing to the left and right edges. If eliminating the table and working through my problems with the wrapper tag would solve this problem, I'm game for changing it. Thanks for your input!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2007, 07:16 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh, I thought that looked nice. tongue.gif

You have positioned almost everything absolute. AP elements doesn't take up any space, thus doesn't affect the height of the element that contains them. Put a border on the table and you can see that all the boxes stick out of it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jsdevore
post Feb 18 2007, 02:45 AM
Post #5





Group: Members
Posts: 4
Joined: 17-February 07
Member No.: 1,935



QUOTE(pandy @ Feb 17 2007, 07:16 PM) *

Oh, I thought that looked nice. tongue.gif

You have positioned almost everything absolute. AP elements doesn't take up any space, thus doesn't affect the height of the element that contains them. Put a border on the table and you can see that all the boxes stick out of it.


Yes, I see what you mean about the boxes sticking out of the table. I decided to remove the table and try working with the wrapper div instead. However, I am doing something wrong - it's still not providing the white background that I'm looking for.

At this point, I'm still trying to center the site using the wrapper tag, but I would be just as happy going with a left alignment as long as I can have the site sit on a white background and be surrounded on the right with the background-image tag. Here is a link to my css style sheet. Any ideas on why wrapper isn't working?

http://www.plgaladies9.com/menupl9.css

Thanks for your input.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 18 2007, 05:28 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You don't have a div with a class="wrapper" in your html code. Put one around all your content (between the <body> and </body> tags). Then the page does what you want.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jsdevore
post Feb 18 2007, 08:09 AM
Post #7





Group: Members
Posts: 4
Joined: 17-February 07
Member No.: 1,935



QUOTE(Frederiek @ Feb 18 2007, 05:28 AM) *

You don't have a div with a class="wrapper" in your html code. Put one around all your content (between the <body> and </body> tags). Then the page does what you want.



Actually I do on the /aboutus page: http://www.plgaladies9.com/aboutus.html. I am only working with one page instead of site-wide until I get things adjusted properly. However, your post made me realize that on my style sheet last night, I listed div.wrapper as a class when in my html I had div="wrapper." I was so busy looking for other problems and missed that obvious one. I got it working now - centered on white with a background using a wrapper.

Thanks so much for everyone's help!


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:26 AM