Nav bar text spacing
Last Post 02/11/2009 3:56 PM by Blunda. 13 Replies.
Author Messages
Blunda
Nuke Newbie
Nuke Newbie
Posts:7


--
02/09/2009 7:50 AM  
Hello

I am in desperate need of help. I am new to web programming and dotnet nuke and have nearly finished my fist skin but I have come across a couple of issues and I have no Idea how to fix them.

The first issue I have is with the nav bar. It has a button effect background, each button is equal in length but obviously the text links are not. So how can I get them spaced so they all fit in the middle of each button? Also the hover image will need to be the same length as the button in the background. please see the website to see what I mean:

www.gw-webdesign.co.uk/bardoc

My second problem is that IE cuts off the right hand side of the website. This dosent happen when I load the local html file in ie, just when I have uploaded the skin. View the link above in ie to see what I mean. The content table which holds the content panel etc seems to be fine though, it appears to just affect the divs. I have no problems viewing this in firefox at all.

I hope this makes sence?

I would appreciate any help at all as I dont know what to do otherwise.
Joseph Craig
DNN MVP
Posts:11667


--
02/09/2009 11:31 AM  
The "Nav bar" is the menu.  You'll need to tell us which menu you are using.  If you haven't done anything special, then it's likely that you are using either SOLPART or the never DNN Nav Menu. 

The Nav menu does use similar styles to SOLPART, but there are differences.

In the meantime, you might want to undertake a quick study of DotNetNuke skinning using the tutorials that are on this site.  There are a LOT of skinning tutorials, but ... look at these first:


And, don't forget the Skinning Toolkit that Lee has created.


Joe Craig, Patapsco Research Group
Complete DNN Support
Blunda
Nuke Newbie
Nuke Newbie
Posts:7


--
02/09/2009 2:59 PM  
How can I tell what menu I am using?

I beleive it is dnn menu because isnt solpart only used in older versions of dnn?

Did you check my link? can you explain why it is cutting off the right in ie? and why it is only doing it once I have uploaded the skin?

thanks
Joseph Craig
DNN MVP
Posts:11667


--
02/09/2009 7:46 PM  
Check in the skin file to see which menu is registered or used.  Also look especially in the manifest file if you are using the HTML version of the skin.

I haven't had an opportunity to check your site in IE.  But, you'll want to make sure that your site is running in "standards compliance mode" with an appropriate skin.

Joe Craig, Patapsco Research Group
Complete DNN Support
Blunda
Nuke Newbie
Nuke Newbie
Posts:7


--
02/10/2009 1:47 AM  
Right, I have checked and i am using the dnn nav menu

So does anyone know of a way of

a) spacing the menu items so they each fit within the button background
b) moving the admin and host menu as the nav bar will be full of other menu items.
Joseph Craig
DNN MVP
Posts:11667


--
02/10/2009 6:15 AM  
Lee posted some classes here.

Joe Craig, Patapsco Research Group
Complete DNN Support
Blunda
Nuke Newbie
Nuke Newbie
Posts:7


--
02/10/2009 1:08 PM  
You will be getting annoyed with me soon!

Looking at the class list (which will help alot by the way, I will bookmark it for future reference, thanks!) I would imagain that the best one to use would be cssseperator. but looking into it people have been having problems implementing it. I am still also fiinding it difficult to work out how I can put in a different sized spacer between each menu item?
Joseph Craig
DNN MVP
Posts:11667


--
02/10/2009 4:14 PM  
The size of the tabs should expand to hold the tab name (page title), within limits.  I think that you want to try to style things with tab in the name.

My personal preference is to use Snapsis' Nav Menu.  Among it's other great features is documentation.

Check Troubleshooting DotNetNuke Skins for information on using the Web Developer's Toolbar to examine and edit CSS files.  There's also FireBug, and something for IE.


And ... no ... I won't be getting annoyed ... 

Joe Craig, Patapsco Research Group
Complete DNN Support
Blunda
Nuke Newbie
Nuke Newbie
Posts:7


--
02/10/2009 5:51 PM  
sorry, im probably being dense but what do you mean by styling things with tabs in the name?

I was just looking at the class list and was thinking if I added NodeLeftHTMLRoot and NodeRightHTMLRoot and just put HTML spaces in them, would this space be applied to all menu items or would i be able to put more or less spaces next to other menu items? I know this is just a bodge but I am just trying to understand how it works.
Joseph Craig
DNN MVP
Posts:11667


--
02/11/2009 8:05 AM  
Sorry, that was me being even denser.  I was thinking of some css class names that were tabthis and tabthat.    I just looked at a typical skin, that those weren't even close to the class name.

In one site, and I think that the skin was based on a DotNetNuke skin, the classes are not named that way.

Could you upload a screen shot of your page, and your skin.css file?

Joe Craig, Patapsco Research Group
Complete DNN Support
Joseph Craig
DNN MVP
Posts:11667


--
02/11/2009 8:08 AM  
Looking again ...

Since your "buttons" are of unequal width, I think that you are heading in the right direction.

Have you tried "slicing" your buttons up so that each has a left side, a right side, and a middle part.  You could try using the right and left parts of the button image as background images for the left and right separators.  The middle image would be very thin, and you'll use it, too, as a background image, but also with a repeat.

Joe Craig, Patapsco Research Group
Complete DNN Support
Blunda
Nuke Newbie
Nuke Newbie
Posts:7


--
02/11/2009 2:07 PM  
that was essentaily what I was thinking but being new to dnn I was unsure how to implement it.

I was looking at the CSSLeftSeparatorSelection and CSSRightSeparatorSelection classes but I have seen that people have been having problems using them, see here:

http://www.dotnetnuke.com/Community...fault.aspx

Are you aware of any problems with these classes?

If it does work I still dont understand how would I implement it? because each menu item would need a different left and right seperator. Do I just list the seperators as they would appear in each class?

ie cssleftseperator {leftseparator1 leftseperator2 leftseperator3}

Thanks so much for your patience with this! it is very much appreciated.
Joseph Craig
DNN MVP
Posts:11667


--
02/11/2009 2:44 PM  
I'd seriously recommend that you take a look at Snapsis Nav Menu.  You've already spent more time on this than the price of the Snapsis menu.

Joe Craig, Patapsco Research Group
Complete DNN Support
Blunda
Nuke Newbie
Nuke Newbie
Posts:7


--
02/11/2009 3:56 PM  
Thats exactly why i am still trying to get this way to work, otherwise it would have been all for nothing!

thanks for all your help though. i will take a look at snapsis


---