Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

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

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...White space between Menu and pane above!White space between Menu and pane above!
Previous
 
Next
New Post
7/7/2006 7:11 AM
 
Hi,

I hope someone can help with this as I have spent sooo many hours trying to figure it out and I am sure it must be staring me in the face

Anyhow, I modified a skin (from where I can't remember) and I am really happy with it except for this one issue. I wanted to place the top pane (which I renamed "randomimagepane") above the menu so I can use the "linkimage" module to place random images under my logo/banner area, but above the menu area. Everything works well and it is simple to use, but whenever the page is very small in height, the menu moves to the bottom of the page, the panes stay at the top, and there is white space between.

I am just using html and css files. (Hoping this is not too much code to paste...)


html file :

<link href="../Skin/skin.css" rel="stylesheet" type="text/css" />
<table class="pagemaster" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top">
            <table class="skinmaster" width="770" border="0" align="center" cellspacing="0" cellpadding="0">
                <tr>
                    <td id="ControlPanel" runat="server" class="contentpane" valign="top" align="center">
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <table class="searchloginline" cellspacing="0" cellpadding="3" width="100%" border="0">
                            <tr>
                                <td class="searchloginline" valign="middle" align="left" nowrap>
                                    [SEARCH][LANGUAGE]</td>
                                <td width="200" valign="top" align="right" nowrap>
                                    [USER]&nbsp;&nbsp;[LOGIN]</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                   <td valign="top" height="100%">
             <table class="logobanner" cellspacing="0" cellpadding="0" width="100%" border="0">
                 <tr>
                          <td valign="middle" align="left" style="height: 160px">[LOGO]</td>
                         <td valign="middle" align="right" style="height: 160px">[BANNER]</td>
                       </tr>   
                 </table>
                 <table class="randomimage" cellspacing="0" cellpadding="0" width="100%" border="0">
                   <tr>
                     <td class="toppane" colspan="0" id="RandomImagePane" runat="server"
                        valign="top" align="center" style="height: 160px" nowrap></td>
                       </tr>   
                 </table>
                   </td>
            </tr>
                <tr>
                    <td valign="top" height="100%">
                        <table class="menu" cellspacing="0" cellpadding="0" width="100%" border="0">
                            <tr>
                                <td width="100%" valign="top" align="left" nowrap>[MENU]</td>
                            </tr>
                        </table>
                        <table cellspacing="0" cellpadding="3" width="100%" border="0">
                            <tr>
                                <td width="200" valign="top" align="left" nowrap>[CURRENTDATE]</td>
                                <td width="100%" valign="top" align="center">                                                                               <b>..::</b>&nbsp;[BREADCRUMB]<b>::..</b></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top" height="100%">
                        <table cellspacing="3" cellpadding="3" width="100%" border="0">
                            <tr valign="top">
                                <td class="leftpane" id="LeftPane" runat="server" valign="top" align="center">
                                </td>
                                <td class="contentpane" id="ContentPane" runat="server" valign="top" align="center">
                                </td>
                                <td class="rightpane" id="RightPane" runat="server" valign="top" align="center">
                                </td>
                            </tr>
                            <tr>
                                <td class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top"                                     align="center">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <table class="copyprivacy" cellspacing="0" cellpadding="0" width="100%" border="0">
                            <tr>
                                <td valign="middle" align="center">
                                    [COPYRIGHT]&nbsp;&nbsp;[TERMS]&nbsp;&nbsp;[PRIVACY]</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>


css file :

/*
================================
Skin styles for DotNetNuke
================================
*/  

.pagemaster {
    width: 100%;
    height: 100%;   
    background-color: #ffffff;
}
.skinmaster {
    height: 100%;
    background-color: #ffffff;
    border-right: #03699c 1px solid;
    border-top: #03699c 1px solid;
    border-left: #03699c 1px solid;
    border-bottom: #03699c 1px solid;
    moz-border-radius-bottomleft: 15px;
    moz-border-radius-bottomright: 15px;
    moz-border-radius-topleft: 3px;
    moz-border-radius-topright: 3px;
}
.searchloginline {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 30px;
}
.logobanner {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 160px;
}
.randomimage {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 160px;
    clear: both;
}
.menu {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 30px;
}
.copyprivacy {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 30px;
}
.controlpanel {
    width: 100%;
    background-color: #2980ab;
}
.toppane {
    width: 100%;
    background-color: #03699c;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 160px;
}
.leftpane {
    width: 175px;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.contentpane {
    width: 100%;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.rightpane {
    width: 175px;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.bottompane {
    width: 100%;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.MainMenu_MenuContainer {
    background-color: transparent;
}
.MainMenu_MenuBar {
    cursor: pointer;
    cursor: hand;
    height:16px;
    background-color: Transparent;
}
.MainMenu_MenuItem {
    border-left: #1574a4 0px solid;
    border-bottom: #1574a4 1px solid;
    border-top: #1574a4 1px solid;
    border-right: #1574a4 0px solid;
    cursor: pointer;
    cursor: hand;
    color: #000000;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: Transparent;
    font-family: Tahoma, Arial, Helvetica;
}
.MainMenu_MenuIcon {
    background-color: #1574a4;
    border-left: #1574a4 1px solid;
    border-bottom: #1574a4 1px solid;
    border-top: #1574a4 1px solid;
    cursor: pointer;
    cursor: hand;
    text-align: center;
    width: 15px;
    height: 21px;
}
.MainMenu_SubMenu {
    background-color: #1574a4; 
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
}
.MainMenu_MenuBreak {
    height: 1px;
}
.MainMenu_MenuItemSel {
    background-color: #03699c;
    cursor: pointer;
    cursor: hand;
    color: black;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    height: 21px;
}
.MainMenu_MenuArrow {
    border-right: #1574a4 1px solid;
    border-bottom: #1574a4 1px solid;
    border-top: #1574a4 0px solid;
    font-family: webdings;
    font-size: 10pt;
    cursor: pointer;
    cursor: hand;
}
.MainMenu_RootMenuArrow {
    font-family: webdings;
    font-size: 10pt;
    cursor: pointer;
    cursor: hand;
}
.StandardButton {
  background: #1675a3 none;
  color: #ffffff;
  font-family: verdana, sans-serif;
  font-size: 11px;
  font-weight: normal;
}
.TreeViewMenu {
    width: 175px;
    background-color: #73acc9;
    border-right: #1675a3 1px solid;
    border-top: #1675a3 1px solid;
    border-left: #1675a3 1px solid;
    border-bottom: #1675a3 1px solid;
    moz-border-radius-bottomleft: 15px;
    moz-border-radius-bottomright: 15px;
    moz-border-radius-topleft: 3px;
    moz-border-radius-topright: 3px;
}
.TreeViewMenu_Header {
}
.Head {
   font-family: Tahoma, Arial, Helvetica;
   font-size:  18px;
   font-weight: normal;
   color: #333333;
}


I have tried inserting "nowrap" and "clear:both;" lines in either html or css files etc..., but not apt enough at skinning... I am definitely no nina.

Thanks again, anyone who can show me what I am doing wrong etc...
Cheers.

 
New Post
7/7/2006 10:19 AM
 

You don't want to know how long I spent trying to work that out - it drove me mad ... and then I realised it wasn't me - it was the linkimage module - If you have set display to no container - then it uses the elements in the linkimage ascx file which has a setting of 100% forcing the module to be pushed down the page.. I bet if you put a container on it's ok but you don't want to because you're using it to add images...

So, anyways, I emailed Leigh last week about that file and it's just a matter of opening up the ascx file in the desktopmodules/linkimage folder - open in notepad, remove the cellpadding and remove the height=100% and save and upload again - and voila!! fixed...

You see, that's the difference when you've spent a bit more time and you have the confidence to bravely put up your hand and say - um.. I don't think it's me this time.. 

I wish I got a couple of dollars an hour for the time I spent looking at that problem, redoing my skins for hours on end.. and then realising - it only happened when the containers weren't on.  I could have had a weekend away relaxing instead of spending time on things like this.. but it was one of my first experiences that helped me learn to look out of the box when having skin problems.

Is this sounding like it might be a fix for you.  I'll ask Leigh if he's repackaged it for the download if you want to just download and update it. It's a great module - one of those handy must haves!

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
7/7/2006 8:48 PM
 
Thank-you so much nina... .

I did as you said :

1. opened the linkimage.ascx file (after backing it up using an ftp program with access to my hosting server) and modified just one line in this file from ' cellpadding="4" ' to 'cellpadding="0" '.

2. changed my initial html file by deleting the ' height="100%" ' from the LOGO, BANNER and randomimage pane table code.

Now it works as it should. Yippee! I hope this has also helped others that might have this issue with the linkimage module and it is a great module to use as nina has stated.

Thinking outside the box really does work. . Thanks again nina. I can't put into words how much help you have been... have a great weekend.

Cheers.
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...White space between Menu and pane above!White space between Menu and pane above!


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