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 5 of 5

Thread: CSS Nav help

  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts

    CSS Nav help

    Can someone make a nav that rolls over like the existing one,

    http://elite-rangers.com/WGH/

    only reason why i need to change it is because its not valid and i want it to be valid.

    I got 2 buttons navbut1.jpg is when they are off and navbut2.jpg is when they hover over it. any assistance would be appreciated.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I have never heard of "over"... Is that real? Just old and deprecated?

    Have a look at a rollover menu using a href instead of a ul at http://nopeople.com/CSS/h_menu_with_images/index.html


    Since you only have the normal and hover state images, instead of a seperate button for each link, you could consolidate by not using seperate divs for each button.
    Last edited by Excavator; 02-23-2009 at 02:24 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    ok well i started doing it in CSS, but now its giving me a stairs effect on each button i do.

    Code:
    /* -- top navigation style -- */
    .nav {
    	background: url(../images/navigation/nav_bg.jpg) repeat-x;
    	width:100%;
    	height:30px;
    	text-align:center;
    }
    
    a#home {
        display:block;
    	width:118px;
    	height:30px;
        background:url(../images/navigation/homeoff.jpg);
    }
    a#home:hover {
        background:url(../images/navigation/homeon.jpg);
    	width:118px;
    	height:30px;
    }
    
    a#support {
        display:block;
    	width:118px;
    	height:30px;
    	margin-left:120px;
        background:url(../images/navigation/supportoff.jpg);
    }
    a#support:hover {
        background:url(../images/navigation/supporton.jpg);
    	width:118px;
    	height:30px;
    	margin-left:120px;
    }
    
    a#demo {
        display:block;
    	width:118px;
    	height:30px;
    	margin-left:240px;
        background:url(../images/navigation/demooff.jpg);
    }
    a#demo:hover {
        background:url(../images/navigation/demoon.jpg);
    	width:118px;
    	margin-left:240px;
    	height:30px;
    }
    Code:
    			<div class="nav">
    				<a href="#" id="home"></a>
    				<a href="#" id="support"></a>
    				<a href="#" id="demo"></a>
    			</div>
    Also can u help me get it centered
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    .nav a{
    float:left;
    }
    PS: add some text to your anchors and then apply a large text-indent(to hide from normal users), which may help search bots, like
    Code:
    .nav a{
    float:left;
    text-indent:-9999px
    }
    Last edited by abduraooft; 02-23-2009 at 07:27 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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