close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

remove border on last item?

Thread began 3/18/2010 11:32 pm by pete | Last modified 9/09/2013 3:25 pm by Jamie | 10984 views | 28 replies |

pete

remove border on last item?

I've tried to work with a class to define my last menu item but it's not working. I wonder if my syntax is inaccurate.

HTML: (as generated by CSSMW - I added the class to the last <li>)
<ul class="level-0" id="cssmw">
<li><a href="index.php">Home</a></li>
<li><a href="cart/index.php">Shop</a></li>
<li><a href="yblog/index.php">Eat</a></li>
<li><a href="blog/index.php">News</a></li>
<li class="last"><a href="about.php">About</a></li>
</ul>

CSS: (added to the end of menu.css)
li.last {
border:none;
}

Have I got this right?
Thanks,
Pete

Sign in to reply to this post

Eric Mittman

You would need to define the previous parts of the structure in your css to make it work like this I think.

It might be easier to just add the style inline like this:

<li class="last" style="border:none;"><a href="about.php">About</a></li>

Sign in to reply to this post

pete

Hi Eric,

That didn't work out either... It might be a feature-request for a future update of CSSMW - one could just check off a box to designate an item as "last" in the series.

I'll keep fiddling with it. If anyone has an idea about this, please continue the discussion.

Thanks,
Pete

Sign in to reply to this post

Ray BorduinWebAssist

Do you have a sample page url where I can see it? It is hard to give definitive advice on how to update something on a page out of context.

Sign in to reply to this post

pete

Sure - check out the menu on my prototype:
new/

Thanks,
Pete

Sign in to reply to this post

neilo

If all else fails . . .

If all else fails, you may have to approach this backwards by removing the border (or border-right) property altogether from your menu.css ul#cssmw > li > a { styles.

It seems that by starting with no border at all, you can then add a border-right class to the top-level menu items in your cssmw/menu.php by adding (say):

<style type="text/css">
<!--
.borderright {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #666666;
}
-->
</style>



to that (cssmw/menu.php) page - after the closing ?> php tag and before the beginning of the menu ul.

Then, still on that page, in design view, with the css box selected in the properties inspector, select each of the top-level menu items and apply the 'borderright' class from the 'Targeted Rule' select list to each one (except for your last item).

I'm sure there is a more elegant solution, but this is offered as a 'last resort'.

Sign in to reply to this post

Ray BorduinWebAssist

The border is on the A tag, so:


<li><a class="last" href="about.php">About</a></li>

or

<li><a style="border:0px;" href="about.php">About</a></li>

Sign in to reply to this post

Lon WintersBeta Tester

Another way to do this is to use a separator image inline. I think most people do it that way.

Sign in to reply to this post

pete

Solved

The class/style needs to be on the <A> tag, not the <LI> tag. That worked perfectly.

Thanks to all who had a look.

Pete

Sign in to reply to this post

Jamie

Would the same be the case in a MW created navigation that uses a background image as a border to the left or right?

If it was being created dynamically how would you apply a background-image: none to the last item on the list?

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...