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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Need Help with CSS Navigation

    I am new to the web world and in need of assistance.

    How do you make the button stay in the "down" or "clicked" position using this template in dreamweaver?

    Any suggestions are very welcome!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.citrusskies.co.uk/notes/centered-tabs

    give that a read.

    You basically can add an "active" class to each tab on the page in which they should be in the down state.

    There's more ways to do it but, with just HTML and CSS this is a good start.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks the link helps but is not working for me. I am sure I am doing it wrong since I am new to the web world.

    style type="text/css">
    #nav *{font:1em Georgia, serif;text-decoration:none;color:#fff;list-style:none;margin:0;padding:0; line-height:1em} /*Reset browsers and apply basic formatting*/
    #nav li{display:inline}
    #nav li *{height:39px;float:left;cursorointer;cursor:hand}
    #nav a{background:url(images/1/left.jpg) left no-repeat;cursorointer;padding-left:27px;border-bottom:solid 3px #bbb} /*Applys the left segment of the image and adds the grey bottom border*/
    #nav .right{padding-right:27px}
    #nav .center{background:url(images/1/center.jpg) repeat-x;margin-right:-27px;min-width:30px;height:39px;padding-top:12px;voice-family: "\"}\"";voice-family:inherit;height:27px;} /*Applys the seamless background*/
    #nav .start{background:url(images/1/farleft.jpg) left no-repeat} /*Applys the far left corner*/
    #nav .end{background:url(images/1/farright.jpg) right no-repeat;padding-right:54px;} /*Applys the far right corner*/
    /*The following controls the hover states of the individual image slices. It's important to remember that IE6 will only recognise :hover when applied to a link element*/
    #nav a:hover{background:url(images/1/right.jpg)}
    #nav a.start:hover{background:url(images/1/farlefthover.jpg)}
    #nav a:hover .end{background:url(images/1/farrighthover.jpg) right}
    #nav a:hover .center{background:url(images/1/centerhover.jpg);color:#000}
    #nav a:hover .right{background:url(images/1/lefthover.jpg) right;padding-right:54px;margin-right:-27px;position:relative}

    #nav a.active { url(images/1/homes.jpg); /* should change the home link to the homes.jpg*/
    }

    #nav a.active span { background# {url(images/1/homes.jpg);
    }
    a.active {
    }
    * html ul#nav a, * html ul#nav a.active {
    padding: 0;
    }


    Help!!!

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Can somene help me with a.active

    http://fzares.com/index1.html
    The site should have "hover" state stay on when you click on the tab. I am using a.active for the tabbed CCS nav but is not working.


    Please help!


  •  

    Posting Permissions

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