html Seperators ?

Rate this topic:

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.

Author

Messages

packrat

Posts:64

02/05/2007 8:49 AM
Hi John, Is there a way to add an html seperator (i think this is the right language?) to the menu. I would like to add the "pipe effect" and the double angle(») at different places in my menu. I have tried using borders for the pipe but IE doesn't remove the left border when I use the following css #TopMenuli { border-right: 1pxsolid#fff; } #TopMenuli.first { margin-left: 0; border-left: none; } Any suggestions would be appreciated. Paul

John Mitchell
Posts:3478

02/05/2007 9:16 AM
Hi Paul, you should be able to edit your own posts now. I think you can use the CSS "content" property to do what you want. Let me play with it a few minutes here, and I'll post back. Also, the TopTabsRY sample skin in the package has an example of putting seperators with an image (it's on the child menu).

packrat

Posts:64

02/05/2007 10:41 AM
sorry John...hadn't gotten to that skin example yet. I'll look it over and see if I can make some progress. Thanks.

packrat

Posts:64

02/05/2007 12:32 PM
Hi John, Using the following selector from the RedTabs menu example #ChildTabsLevel1 .LinkLeft gives me almost what I want. But I still need to control where in the order of links the sperator is placed. In other words, in my horizontal menu I don't want the pipe seperator to come before the first link and I don't want it to appear after the last link.

John Mitchell
Posts:3478

02/05/2007 12:41 PM
There is an Id on each of those List Items that will let you override the class of any individual one explicitly. So if you use the .LinkLeft class selector, you could also make another rule with #LinkLeft0 id selector to explicitly set that one to something else or nothing.

packrat

Posts:64

02/05/2007 4:00 PM
Hi John, I was able to remove the border from the left side of the menu but could not remove it from the right side end of the menu. I know my css is wrong. You stated that I would need an id selector but I can't figure out how this gets picked up by the menu. #TopMenu.LinkLeft { margin-left: 0; border-left: none; } #TopMenu.LinkLeft3 { (This should be an id selector?) margin-left: 0; border-right: none; } Also, would this same approach apply if I wanted to use images for the seperators instead of borders? Thanks, Paul

John Mitchell
Posts:3478

02/05/2007 4:06 PM
Yes, LeftLink3 should be an ID selector, try it with a number sign in front. #TopMenu #LinkLeft3 { margin-left: 0; border-right: none; } And yes, this will work using background images also.

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.