Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: css nav problem

  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css nav problem

    I'm a newby and I'm trying to put together a nav bar in css. The 2 end graphics need to have rounded corners so I've created a different graphic for both ends that has a roll over state. Currently the end li are still pulling the non rounded corner graphics that are being used by the middle li. How do I assign the rounded corner graphic to the ends.

    here is the html:

    <div class="nav">
    <ul class="cssmenu">
    <li class="vision"><a href="#" title="Vision">Vision</a> </li>
    <li class="showcase"><a href="#" title="At a Glance">Brand Showcase</a></li>
    <li class="videos"><a href="#" title="Videos">Videos</a></li>
    <li class="guidelines"><a href="#" title="Guidelines" >Guidelines</a></li>
    <li class="assets"><a href="#" title="Assets" >Assets</a></li>
    <li class="template"><a href="#" title="Template">Templates</a></li>
    <li class="faqs"><a href="#" title="faqs">FAQs</a></li>

    </ul>
    </div>


    and here is the css:

    /*
    * Nav Setup
    */
    #nav {
    width:925px;
    height: 38px;
    margin: 80px 0 0 21px;

    }

    ul.cssmenu {
    list-style: none;
    padding: 0px;
    margin-left: 25px;
    font: 15px 'DINBold', Helmet, Freesans, sans-serif;
    }


    ul.cssmenu li {
    float: left;
    text-align:center;

    }

    ul.cssmenu li a {
    display: block;
    height: 30px;
    background-image:url(../images/nav_bk.png);
    background-repeat:repeat-x;
    text-align:center;
    padding-top: 8px;

    }
    ul.cssmenu vision li a {
    display: block;
    height: 30px;
    background-image:url(../images/nav_lft.png);
    background-repeat:none;
    text-align:center;
    padding-top: 8px;
    }
    ul.cssmenu faqs li a {
    display: block;
    height: 30px;
    background-image:url(../images/nav_rght.png);
    background-repeat:none;
    text-align:center;
    padding-top: 8px;
    }

    /*
    * Normal Links
    */
    ul.cssmenu li.vision {
    width: 106px;
    border-right: 1px solid #ccc;
    border-image:url(../images/nav_lft.png);

    }
    ul.cssmenu li.showcase {
    width: 189px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    }
    ul.cssmenu li.videos{
    width: 118px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    }
    ul.cssmenu li.guidelines {
    width: 144px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    }
    ul.cssmenu li.assets {
    width: 118px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    }
    ul.cssmenu li.template {
    width: 142px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    }
    ul.cssmenu li.faqs {
    width: 100px;
    background-image:url(../images/nav_rght.png);

    }

    /*
    * hover Links
    */
    ul.cssmenu li.vision a:hover {
    width: 106px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_lft.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.showcase a:hover{
    width: 189px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.videos a:hover{
    width: 118px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.guidelines a:hover {
    width: 144px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.assets a:hover {
    width: 118px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.template a:hover {
    width: 142px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.faqs a:hover {
    width: 100px;
    background-image:url(../images/nav_rght.png);
    background-position: 0 -38px;
    color:#FFF;

    }

    /*
    * clicked Links
    */
    ul.cssmenu li.vision a:active {
    width: 106px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_lft.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.showcase a:active{
    width: 189px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.videos a:active{
    width: 118px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.guidelines a:active {
    width: 144px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.assets a:active {
    width: 118px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.template a:active {
    width: 142px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.faqs a:active {
    width: 100px;
    background-image:url(../images/nav_rght.png);
    background-position: 0 -38px;
    color:#FFF;

    }

    /*
    * clicked Links
    */
    ul.cssmenu li.vision a.selected{
    width: 106px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_lft.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.showcase a.selected{
    width: 189px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.videos a.selected{
    width: 118px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.guidelines a.selected {
    width: 144px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.assets a.selected {
    width: 118px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.template a.selected {
    width: 142px;
    border-right: 1px solid #ccc;
    background-image:url(../images/nav_bk.png);
    background-position: 0 -38px;
    color:#FFF;
    }
    ul.cssmenu li.faqs a.selected {
    width: 100px;
    background-image:url(../images/nav_rght.png);
    background-position: 0 -38px;
    color:#FFF;

    }


    /* nav end */


    any help greatly recieved.

    Kotoman

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you would set the ul to position: relative and absolute the images. However you can also just use border-radius: 8px; webkit-border-radius: 8px; -moz-border-radius: 8px;

    border-radius is the default
    -webkit-border-radius opera? and chrome
    -moz-border-radius: ff

    Don't really need them all, but I just use them anyways
    Last edited by Sammy12; 07-04-2011 at 06:17 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the quick replay, but I'm using a png graphic to create the radius, is there any way I can amend the css to pull the different graphic in for the ends. Also, would it be possible to demonstrate the amends using full code as I wouldn't know how to implement it.

    many thanks

    kotoman

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    so you want the radius on each li or just for the ul?

    btw you used border-image on li.vision

    Code:
    ul.cssmenu li.vision {
      width: 106px; 
      border-right: 1px solid #CCC;
      border-image: url(../images/nav_lft.png);
    }
    Last edited by Sammy12; 07-04-2011 at 07:07 PM.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    At present when I rollover vision, it shows the nav_lft.png image but in the inactive state the nav_bk.png shows. I'm guessing that I need the nav_lft.png image to be on li. vision (?)
    and the nav_rght.png image on the li faqs (?) ...

    Thanks for pointing out the border error.....that's been causing all sorts of loading issues in Dreamweaver.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    go with what you feel in your heart.

    Im so lost, I really have no idea what you are trying to do. Maybe a screenshot would help. I'm really lost.

  • #7
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello ,

    it will be better for me to check if you provide the url of your site .

    i hope below solution will solve the problem clear the cache and then check .please provide the class name where you have provided the round corner ?? in the code you have provided .


  •  

    Tags for this Thread

    Posting Permissions

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