Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsSkinsSkinsCreating a container that displays background imagesCreating a container that displays background images
Previous
 
Next
New Post
10/5/2010 6:38 AM
 
Hi,

I'm trying to create a container that features a row displaying 3 different background images next to each other. I've tried doing this by having 3 elements, one inside the other with each having a different background image in order to achieve this effect.

This looks fine in visual studio but when I view the container on a dot net nuke website, the elements seem to collapse and I don't see the different background colours. Is anyone able to help me with this? I've included the HTML below, the background images are mentioned in the CSS.

Thanks

<!-- div for whole container -->

<div class="cantarus_module_container">
   
<!-- a row that should display 3 different background images by the 3 div elements there -->
  
 <div class="cantarus_module_title" style="clear:both;">         
    <div class="cantarus_module_title_left">   
    <div class="cantarus_module_title_right" style="clear:both;">
    [ACTIONS]   
    [TITLE]
    </div>     
    </div>   
    </div>      
 
 
 
New Post
10/9/2010 1:40 AM
 
The elements collapsed because there is nothing within the div to have a background.  Try adding "&nbsp;" inside the div (between the opening and closing div..
 
New Post
10/9/2010 2:14 AM
 
The divs can be empty.
This is a CSS issue so we'd need to see it on a page, but try giving the central div some dimensions and the outer ones overflow:hidden
Rob
 
New Post
12/16/2010 9:55 PM
 
It is a CSS issue, you can have a look at the default DNN skins (not containers) "MinimalExtropy", in order to realize that, you should have CSS like this:

.bot_left{padding:0; margin:0; background:url(images/bot_left.png) no-repeat top left;}
.bot_right{padding:0; margin:0; background:url(images/bot_right.png) no-repeat top right; padding:0 39px 0 27px;}
.bot_bg{padding:0; margin:0; background:url(images/bot_bg.png) repeat-x top left; height:41px;}

Eric

 
New Post
12/17/2010 6:03 AM
 
Empty panes (without content) get a class DNNEmptyPane, for which the width is st to 0 in default.css.
If you don't want that you should overwrite this in your skin.css

From default.css:
/* used to collapse panes without any content in them */ 
.DNNEmptyPane { width: 0px; } 
 
Previous
 
Next
HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsSkinsSkinsCreating a container that displays background imagesCreating a container that displays background images


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out