Menu Question - Skins, Themes, and Templates

DOWNLOAD

FORUMS

BLOGS

FORGE

HELP

MARKETPLACE

You are here > >

DotNetNuke Forums

Search Forum Home All Forums

11/11/2007 10:08 PM

vapser

Joined: 10/18/2007

Posts: 3

Menu Question

Hi there

I am pretty new to DNN so please go easy on me :)
I was wondering if there is any way to make a horizoltal menu where it displays 2 rows instead of 1.

I need this because I am working on a site where a vertical menu wont work and a regular horizontal will take to much space across the screen, but if I can break it into two rows it will solve my problems (also im not interested in haveing the regular sub dropdown) I want all points displayed as mainsites which gets to be quite a few points and again leads back to why I ask if I can do this menu in two rows,

I hope some of you can be of help with clearing this up for me :)

Regards Nakia

11/11/2007 11:04 PM

peter schotman

www.dotnetnuke-websites.nl
Joined: 5/4/2004

Posts: 435

Re: Menu Question

You can do that in the dnn:NAV menu by making the top level menu items (which are spans) display as a block element and then give them a width and let them float (left or right). Specify the size of the containing block so they will end up in two rows.

Peter

Peter Schotman
Cestus Websites voor DotNetNuke oplossingen in Nederland
Contact us for your custom design and skinning work.

11/12/2007 5:18 AM

vapser

Joined: 10/18/2007

Posts: 3

Re: Menu Question

peter schotman wrote

Peter

Hi again,

SInce I am a webdesigner whom has mainly worked with pure old fashion html sites and started DNN about 2 weeks ago im still pretty new with css too.
ive made some standart solpartmenus but most out from some base code, and a housemenu.
anyone willing to give some example css code for this ? or know where I can find the info I need to get this done :)

11/12/2007 5:48 AM

Timo Breumelhof

www.timo-design.nl
Joined: 2/9/2006

Posts: 3178

Re: Menu Question

If you use a regular unordered list menu (like Housemenu) and make it horizontal, it will show a double row automatically if you limit the menu's conainer width.

I'l give an axample with Divs for LIs it's the same, and I use inline styles because that's all I can do in the editor

Example floating width not limited:

example

Code:
<div style="padding: 3px; float: left; background-color: rgb(221, 221, 221);">
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="clear: both; height: 0px;"> </div>
</div>

Example fixed width for container:

example

Code:
<p>Example width fixed width for container:</p>
<div style="padding: 3px; float: left; background-color: rgb(221, 221, 221); width: 400px;">
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="margin: 1px; padding: 3px; background-color: rgb(255, 136, 0); width: 100px; float: left;">example</div>
<div style="clear: both; height: 0px;"> </div>
</div>

Timo Breumelhof
Timo Design -- DotNetNuke Custom Skinning
SearchDotNetNuke.Com -- Extended DNN (forum) search
Codeplex page -- Token Replace plugin for FCK -- Free Skin Objects -- Example Skins

Page 1 of 1

Forum Policy

These Discussion Forums are dedicated to the discussion of the DotNetNuke Web Application Framework.

For the benefit of the community and to protect the integrity of the project, 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 DotNetNuke.
2. Discussion or promotion of DotNetNuke product releases under a different brand name are strictly prohibited.
3. No Flaming or Trolling.
4. No Profanity, Racism, or Prejudice.
5. Site Moderators have the final word on approving/removing a thread or post or comment.
6. English language posting only, please.

DotNetNuke Forums

Forum Policy

Networks

Sponsors