Dear all,

I'm quite a DNN novice and struggling with the NAV menu in a skin I'm trying to build (I want that skin CSS-based as much as possible).
I used the standard Blue skin (horizontal menu, fixed width) that came with DNN 04.08.04 and adapted it to my needs.

I'm using a header composed of several images; some of which are positioned using "position: relative;". The NAV menu is positioned in the 'bottom' of the header.

The NAV menu itself is not the problem, but the submenu's (Admin, Host etc.) are. They are seriously mis-aligned ... I think because of using "position: relative;" in the header part before the NAV menu.

But ... I can't figure out where de NAV submenu's are build and what properties are used ...

So if anyone has experienced something like this ans has a solition, or knows where the NSV submenu's get their properties and would like to share ... I't appreciate it BIG time!

Thanks in advance,

IcyK

NB: the site currently exists only on my Visual Web Developer 'server', so unfortunately I can't provide a link ...


[edit]
It seems that the submenu inherits the offset from the main menu.
Say I have the NAV menu positioned 100 px from the top and 50 px from the left, then the Admin submenu gets positioned 100 px below and 50 px to the right of the Admin link ...
[/edit]

Am I really the only one experiencing this challenge .... ;-)

Hello,

apologies for the delayed response, I could do with viewing the actual skin to make a comment, you can attach zip files to forum posts if you wish. However, if you wish to create a pure CSS skin I would recommend you use the housemenu or snapsis CSS Menu.

Both of these menus will create an unordered list for the menu which the search engines will find easy to index and will ensure that your page sizes are small. For the details you have here, I would recommend you check out the Snapsis menu - a discount is available to subscribers

Well, of all the people on this forum you should be one of the very last to apologize I think ... considering the time and effort you put in helping others.

I have attached a skin.zip that shows the problem. I stripped it down a bit to reduce the file size.
I'm sorry I can't point you to an actual 'live' site yet ...

The problem shows in the admin and the host submenu. I guess it'll show in other submenu's too, once they are in use.

If you (or someone else) could find the time to take a look, I'd appreciate it very much ...

Thanks in advance,

IcyK

Hello,

Ok, going through the code I have found the problem:

.VillaHeaderNavmenuContainer {
   clear: both;
    top: -13px;
    left: 79px;     
    margin: 0 auto;      
    background-color: aabbcc;   

}

removing position: relative; fixes the problem


I would also recommend you set a background colour for this class:
.VillaHeaderNavmenuBackground

- so if a user is viewing with images disabled then the text in the menu is still readable

Also, I've noticed you have used a script in your skin to specify the doc type, are you aware that you can add a doc type file with your skin to set the doc type? checkout this tutorial:
How to select DOC TYPES in DotNetNuke 4.4

I troubleshooted this skin by using the methods outlined in this tutorial:
Troubleshooting DotNetNuke Skins

Thanks,