Forums

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

Home Forums CSS Help with nave block

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #33687
    Casey
    Member

    It looks like this: Photobucket

    I want it looking like this: Photobucket

    HTML:


    And the CSS:

    /*  Nav image set Menu Bar */

    .menu-bar {
    padding-left: 10px;
    padding-top: 50px;}

    /* Shiba Inus */
    #pups
    { display: block; width: 150px; height: 31px;
    background: url('images/Shibainusprite.png') no-repeat 0 0; }
    #pups:hover
    { background-position: 0 -31px; }
    #pup span
    { position: absolute; top: -9999em; }

    /*Services*/
    #service
    { display: block;
    width: 151px;
    height: 54px;
    background: url('images/servicesprite.png') no-repeat 0 0; }
    #service:hover
    { background-position: 0 -54px; }
    #service span
    { position: absolute; top: -999em; }

    /*Photos*/
    #photo
    {
    display: block;
    width: 151px;
    height: 47px;
    background: url('images/photosprite.png') no-repeat 0 0; }
    #photo:hover
    { background-position: 0 -47px; }
    #photo span
    { position: absolute;
    top: -999em;

    /*Home*/
    }#home
    { display: block;
    width: 151px;
    height: 43px;
    background: url('images/homesprite.png') no-repeat 0 0; }
    #home:hover
    { background-position: 0 -43px;}
    #home span
    { position: absolute;
    top: -999em;}

    /* Nav image set Extra Bar */

    .bar2 { padding-left: 100px; padding-top: 10px;}

    /*Blogging rollover */
    #blog
    {
    display: block;
    width: 150px;
    height: 31px;
    background: url('images/blogsprite.png') no-repeat 0 0;
    }
    #blog:hover
    { background-position: 0 -31px; }
    #blog span
    { position: absolute; top: -999em;}

    /* Video link */
    #video
    { display: block;
    width: 150px;
    height: 54px;
    background: url('images/videosprite.png') no-repeat 0 0; }
    #video:hover
    { background-position: 0 -54px;}
    #video span
    { position: absolute;
    top: -999em;}

    /* Poems Rollover */
    #poem
    { display: block;
    width: 150px;
    height: 46px;
    background: url('images/poems.png') no-repeat 0 0; }
    #poem:hover
    { background-position: 0 -46px; }
    #poem span
    { position: absolute;
    top: -999em;}

    /*Portfolio*/
    #portfolio
    { display: block;
    width: 150px;
    height: 43px;
    background: url('images/portfoliosprite.png') no-repeat 0 0; }
    #portfolio:hover
    { background-position: 0 -43px;}
    #portfolio span
    { position: absolute; top: -999em;}

    Help please.. I am such a newb at this.

    #84135
    jamygolden
    Member
    #84137
    Casey
    Member

    not exactly working with images.. :-( maybe I can try to implement what you did to work it out.. ty so far.

    #84143
    jamygolden
    Member

    I can’t open jsfiddle for some reason. But it does work with images. Just give the li’s a width and height.

    #84145
    Casey
    Member

    I got it working with your code.. thanks very much. It took a lot of tweaking. LOL

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