SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I make the botton menu of a drop down box have a corner

    If I use a radius, then with the CSS I have, it gives all of the rungs a curved ending


    This the CSS I am using


    #nav a {
    margin:0 4px 0 4px;
    float:left;
    padding:16px 14px;
    text-transform:uppercase;
    color: #ffff00;
    font-weight: bold;
    font-size: 12px;
    }
    /* Just sub menu links */
    #subMenusContainer a, #nav li li a {
    font-size: 12px;
    text-align:left;
    background-color:#000000;
    padding:10px 20px;
    color: #ffff00; ;




    This is the page. www.c5d.co.uk



    I have tried also giving the bottom line an ID, or a clas to no effect

    Thanks

    Antony

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi Antony,

    Add the following CSS to your stylesheet:

    Code CSS:
    .sub-menu li:last-child a{
      -webkit-border-bottom-right-radius: 10px;
      -webkit-border-bottom-left-radius: 10px;
      -moz-border-radius-bottomright: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    Useful links:
    HTH

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)

    Menu-related notes.

    Hi, Antony,

    On the stylesheet, c5ddropdownmenu.css, there are a couple of items that could be cleaned up a bit.

    1) The property, #nav li {height:90px}, is unnecessary and should be deleted. It is causing the clickable area for the horizontal menubar items to extend about 50px below the menubar. (You can tell by the pointy finger cursor.)

    2) #nav li:last-child only needs to contain those items that are different from the ones already listed in #nav li. In this case, the only one that is different is {background:none}. The other properties can be deleted from this selector.

    Code:
    #nav li {
        /*great place to use a background image as a divider*/
        cursor: pointer;
        float: left;
        margin: 0 ;
        padding: 1px;
        height: 90px;       /* DELETE.  Unnecessary. */
        display: inline;
        background: url(../images/nav-separator.png) right center no-repeat;
    }
    #nav li:last-child {
        /*remove divider from last menu item*/
        cursor: pointer;    /* DELETE.  Unnecessary duplication. */
        float: left;        /* DELETE.  Unnecessary duplication. */
        margin: 0 ;         /* DELETE.  Unnecessary duplication. */
        padding: 1px;       /* DELETE.  Unnecessary duplication. */
        height: 90px;       /* DELETE.  Unnecessary. */
        display: inline;    /* DELETE.  Unnecessary duplication. */
        background: none;
    }
    3) The sixth list item, "P R Es", has a left-over id of "dummy7". You can safely delete that id.

    4) Finally, the list item, "NZ" > "Order Form", contains what I presume is a test id="radius". Don't forget to delete it, too.

    Noteworthy... you have done a smashingly nice job of cleaning out the unnecessary classes and ids from the c5dmenu.php menu file. It's actually easy to read, now!

    Cheers

  4. #4
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, did you mean it as simply as it sounds ? Copy and Paste that CSS into the stylesheet ? I did that and it didn't work. The corners are still square at the bottom.

    Ron Pat, I have deleted the test IDs.

    Thanks

    Antony

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Antony, find the following code on your cd5dropdownmenu.css file. (The following code assumes that you deleted the unnecessary styles from your css page as I mentioned earlier. If you did not, you can copy and paste these lines between the top and bottom reference comments on your page.)

    Notice where Pullo's styles are added. They work very nicely.

    Line 85
    Code:
    /* All submenu OLs and ULs */
    #nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
        /*border around submenu goes here*/
        background: none;
        left:0;
    }
    /* List items in main menu --[for non-javascript users this applies to submenus as well]  */
    #nav li {
        /*great place to use a background image as a divider*/
        cursor: pointer;
        float: left;
        margin: 0 ;
        padding: 1px;
        display: inline;
        background: url(../images/nav-separator.png) right center no-repeat;
    }
    #nav li:last-child {
        /*remove divider from last menu item*/
        background: none;
    }
    #subMenusContainer li {
        list-style: none;
    }
    .sub-menu li:last-child a {                /* PULLO's styles are ADDED HERE */
        -webkit-border-bottom-right-radius: 7px;
        -webkit-border-bottom-left-radius: 7px;
        -moz-border-radius-bottomright: 7px;
        -moz-border-radius-bottomleft: 7px;
        border-bottom-right-radius: 7px;
        border-bottom-left-radius: 7px;
    }
    /* main menu ul or ol elment */

  6. #6
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I had deleted what you said, but had posted the new CSS in the wrong place.

    It works fine now

    Thanks

    Antony

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Excellent! Glad to hear it's working now.

    Ron

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    As an aside, I was glad to read recently that it's now recommended that vendor prefixes be removed on some CSS3 style attributes, such as border-radius, because of their full implementations in browsers:

    http://generatedcontent.org/post/379...updateyourcss3

    I guess you could argue that keeping them supports older versions of modern browsers, but as they tend to auto update these days, I doubt that's really much use any more.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •