Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Navigation zooming issue

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #40601
    simman
    Member

    here is css

    /***** menu *****/
    .menu {
    padding:0 0 0 0;
    width:1280px;
    margin-top:-9px;
    position: relative;
    z-index:2;
    }
    .menu li {
    float:left;
    position: relative;
    padding-right:2px;
    background:url(../images/menu-spacer.gif) right top repeat-y;
    }
    .menu li.last {background:none; padding:0}
    .menu li a {
    display:block;
    font-size:22px;
    font-weight:400;
    line-height:2em;
    padding:6px 64px 8px 65px;
    color:#fff;
    text-transform:capitalize;
    letter-spacing:-1px;
    background:#2b2b2b;
    }
    .menu li:first-child a {
    padding:6px 0 8px;
    width:60px;
    text-indent:-9999px;
    background:url(../images/menu-home-icon.png) center center no-repeat #2b2b2b;
    border-radius:9px 0 0 9px;
    -moz-border-radius:9px 0 0 9px;
    -webkit-border-radius:9px 0 0 9px;
    }
    .menu li.last a {
    padding:6px 64px 8px 62px;
    border-radius:0 9px 9px 0;
    -moz-border-radius:0 9px 9px 0;
    -webkit-border-radius:0 9px 9px 0;
    }
    .menu li a.active,
    .menu > li > a:hover {background-color:#222}

    #113308
    simman
    Member

    /***** menu *****/
    .menu {
    padding:0 0 0 0;
    width:1280px;
    margin-top:-9px;
    position: relative;
    z-index:2;
    }
    .menu li {
    float:left;
    position: relative;
    padding-right:2px;
    background:url(../images/menu-spacer.gif) right top repeat-y;
    }
    .menu li.last {background:none; padding:0}
    .menu li a {
    display:block;
    font-size:22px;
    font-weight:400;
    line-height:2em;
    padding:6px 64px 8px 65px;
    color:#fff;
    text-transform:capitalize;
    letter-spacing:-1px;
    background:#2b2b2b;
    }
    .menu li:first-child a {
    padding:6px 0 8px;
    width:60px;
    text-indent:-9999px;
    background:url(../images/menu-home-icon.png) center center no-repeat #2b2b2b;
    border-radius:9px 0 0 9px;
    -moz-border-radius:9px 0 0 9px;
    -webkit-border-radius:9px 0 0 9px;
    }
    .menu li.last a {
    padding:6px 64px 8px 62px;
    border-radius:0 9px 9px 0;
    -moz-border-radius:0 9px 9px 0;
    -webkit-border-radius:0 9px 9px 0;
    }
    .menu li a.active,
    .menu > li > a:hover {background-color:#222}

    #113321
    JohnMotylJr
    Participant

    I wish i could help but you are being too specific!! Nicely formatted code as well :)

    #113325
    Paulie_D
    Member

    It would be helpful if you could put your HTML & CSS in Codepen and provide us with a link instead of just trying to post your code remembering that any images will have to be hosted on a webserver.

    Also, although you’ve told us you are having trouble…you haven’t said what the trouble IS….I’m assuming this was cut off.

    One final point…from my experience, the vast majority of viewers don’t zoom OUT of a page…they are much more likely to zoom in.

    #113327
    simman
    Member

    [here is the temp link for the page ](http://bigtrade.co.in/dev/jain/index.html “sam”)

    #113328
    simman
    Member

    problem is this when i m tring to zoom out its menu bar is geting apart ..

    i can email u the files if some can help me i am new in this field just learning
    thanks

    #113329
    simman
    Member

    [link for code](https://gist.github.com/4011032 “link”)

    #113330
    Paulie_D
    Member

    I see, you mean the little gap that appears between the list items?

    There is not much you can do to stop that happening but it looks to me as though it’s because you are using an image as a spacer.

    You can get the same effect using CSS…

    #113331
    simman
    Member

    can u pls let me the code for that

    #113332
    Paulie_D
    Member
    #113360
    simman
    Member

    thanks a lot paulie

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.