The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Div background not showing up
timmygrover
post Nov 19 2010, 05:13 PM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 25-October 10
Member No.: 13,001



ref. URL:

http://www.monmount.com/Default_preview.as...templatename=60

screenshot:

what it currently looks like
IPB Image
a photoshopped approximation of what it should look like

explanation:

Basically I've laid the top nav. bar and the search box inside one div together (div id="nav_search_div") and I want the background of the nav. bar to display behind both of them.

This is a Volusion cart store so I'm somewhat limited b/c I have to keep the content required to keep their auto-fill-in junk able to auto-fill-in.

I can change the background image for the nav menu in one of the .css files provided with the volusion template, but if I use that then it applies it only to the nav. bar, not to the search box.

Setting the nav. and the search field into a div together was supposed to be my work-around for this problem, but for some reason the background simply isn't displaying.

Any help or explanation would be appreciated.

p.s. I know that the page doesn't pass validation, but all the errors generated are from volusion code that I can't change and which shouldn't have any impact on this particular problem.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
timmygrover
post Nov 22 2010, 02:17 PM
Post #2


Newbie
*

Group: Members
Posts: 17
Joined: 25-October 10
Member No.: 13,001



I followed some advice from another forum in which I was told to apply clear:both; styles to those div in which I'd used floated elements, I did so but it didn't change anything. This more or less the same advice referenced by Darin in a previous post I made with a similar problem. (He referenced http://www.quirksmode.org/css/clearing.html)

Any help would be appreciated!

This post has been edited by timmygrover: Nov 22 2010, 02:35 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 22 2010, 03:09 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,319
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



It looks like you've got the "clear:both" in the wrong place, or in not enough places.

Your div#header_div element contains the div#logo_div and div#button_div elements. Both of these elements are floated, so you need "clear:both" after the </div> tag for div#button_div but before the </div> tag for div#header_div

Later, your div#nav_search_div element contains the div#display_menu_1 and an anonymous div that contains the search form. Both these elements are floated, so you need "clear:both" after the </div> tag for the anonymous div that contains the search form but before the </div> tag for div#nav_search_div

Then, you need to specify a background for div#nav_search_div
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 22 2010, 03:52 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,505
Joined: 9-August 06
Member No.: 6



There's something fishy going on also. I put a border on the DIV in question to be able to see it, and it is in the top right corner, because of the misplaced clear maybe, I looked at this yesterday and I don't remember the structure now. But fact is that the background doesn't show up. On a whim I changed background-image to background and then it showed. Maybe you have a contradicting rule somewhere. I didn't get around to fetch all the linked style sheets.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
timmygrover
post Nov 22 2010, 04:23 PM
Post #5


Newbie
*

Group: Members
Posts: 17
Joined: 25-October 10
Member No.: 13,001



I appreciate your help Darin, your advice was right on the money!

There's another problem however. I've now been able to set a background color into the div#nav_search_div and it works properly. (i.e. style="background:#000000;" works as expected) Yet when I set the background as an image it still refuses to display.

I'm using,

style=background-image: url("http://www.monmount.com/v/vspfiles/templates/60/images/menu_bar.gif");

within the <div id=nav_search_div> tag (for some reason when i put the background into the header css, not even the solid color background works.)

So if anyone can see why the image wouldn't be working I'll email them a cookie.

Thanks

p.s. to pandy, I tried setting a border with the rectified clearing issue and it displayed as expected.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
timmygrover
post Nov 22 2010, 04:27 PM
Post #6


Newbie
*

Group: Members
Posts: 17
Joined: 25-October 10
Member No.: 13,001



QUOTE(timmygrover @ Nov 22 2010, 02:23 PM) *

I appreciate your help Darin, your advice was right on the money!

There's another problem however. I've now been able to set a background color into the div#nav_search_div and it works properly. (i.e. style="background:#000000;" works as expected) Yet when I set the background as an image it still refuses to display.

I'm using,

style=background-image: url("http://www.monmount.com/v/vspfiles/templates/60/images/menu_bar.gif");

within the <div id=nav_search_div> tag (for some reason when i put the background into the header css, not even the solid color background works.)

So if anyone can see why the image wouldn't be working I'll email them a cookie.

Thanks

p.s. to pandy, I tried setting a border with the rectified clearing issue and it displayed as expected.



smile.gif Just answered my own question by replacing the " inside the parenthesis with '

thanks again for your help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 22 2010, 05:21 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,505
Joined: 9-August 06
Member No.: 6



I'm still wondering why the background didn't show originally. Oh well, mysteries, mysteries.
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 January 2020 - 09:26 PM