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

Thread: styling menu

  1. #1
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts

    styling menu

    hey guys i have this so far
    Code:
    div#navbar2 {
    	height: 30px;
    	width: 100%;
    	border-top: solid #000 1px;
    	border-bottom: solid #000 1px;
    	background-color: #99b3b4;
    text-align:center;
    }
    div#navbar2 ul {
    	margin: 0px;
    	padding: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: small;
    	color: #FFF;
    	line-height: 30px;
    	white-space: nowrap;
    }
    div#navbar2 li {
    	list-style-type: none;
    	display: inline;
    
    }
    div#navbar2 li a {
    	text-decoration: none;
    	padding: 7px 10px;
    	color: #FFF;
    }
    div#navbar2 li a:link {
        color: #FFF:
    }
    div#navbar2 li a:hover {
        font-weight: bold;
        color: #000000;
        background-color: #e4ebeb;
    }
    but what i can figure out is how to show the link they are on as a selected button so having the button be red if they are on that link...

    Code:
    <div id="navbar2">
    <ul>
    <li><a href="index.php?page=update">Basic</a></li>
    <li><a href="link2.html%20">Button 2</a></li>
    <li><a href="link3.html%20">Button 3</a></li>
    </ul>
    </div>

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    create a style that would identify it as an active...

    i usually use a class like so
    Code:
    a .active{style...}

  • #3
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    div#navbar2 li a:active {font-weight: bold;
    color: #000000;
    background-color: #e4ebeb;}

    like this?

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by runnerjp View Post
    div#navbar2 li a:active {font-weight: bold;
    color: #000000;
    background-color: #e4ebeb;}

    like this?

    I believe thats how he meant it, unless you create a class called

    Code:
    .active

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    We had a good thread on this , see Change link text style for current page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    hey thanks i took the website and got it to work... but
    #basic a,
    #test a
    {
    font-weight: bold;
    color: black;
    background-color: #e4ebeb;

    does not make the writing black for some reason its white :S
    Code:
    div#navbar2 {
    	height: 30px;
    	width: 100%;
    	border-top: solid #000 1px;
    	
    	background-color: #99b3b4;
    text-align:center;
    }
    div#navbar2 ul {
    	margin: 0px;
    	padding: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: small;
    	color: #FFF;
    	line-height: 30px;
    	white-space: nowrap;
    }
    div#navbar2 li {
    	list-style-type: none;
    	display: inline;
    
    }
    div#navbar2 li a {
    	text-decoration: none;
    	padding: 7px 10px;
    	color: #FFF;
    }
    div#navbar2 li a:link {
        color: #FFF:
    }
    div#navbar2 li a:hover {
        font-weight: bold;
       
    }
    #basic a,
    #test a
    {
      font-weight: bold;
       color: black;
        background-color: #e4ebeb;
    }

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    is that all of your CSS? Can you post the html also or maybe a link? It may be that something is overwriting it.

  • #8
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    <div id="navbar2">
    <ul>
    <li id="basic"> <a href="index.php?page=update">Basic</a></li>
    <li id="ill"><a href="link2.html%20">Button 2</a></li>
    <li id="i1"><a href="link3.html%20">Button 3</a></li>
    </ul>
    </div>


    thats everything

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    why do you need to set the nav bar <a>

    Code:
    div#navbar2 li a:link {
        color: #FFF:
    }
    When you define the same link with this

    Code:
    #basic a,
    #test a
    {
      font-weight: bold;
       color: black;
        background-color: #e4ebeb;
    }
    Just get rid of the nav2 a:active color. Thats what makes it white.

  • #10
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    ok but i have now done it like this
    Code:
    div#navbar2 {
    	height: 30px;
    	width: 100%;
    	border-top: solid #000 1px;
    	
    	background-color: #99b3b4;
    text-align:center;
    }
    div#navbar2 ul {
    	margin: 0px;
    	padding: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: small;
    
    	line-height: 30px;
    	white-space: nowrap;
    }
    div#navbar2 li {
    	list-style-type: none;
    	display: inline;
    
    }
    div#navbar2 li a {
    	text-decoration: none;
    	padding: 7px 10px;
    	color: #FFF;
    }
    
    div#navbar2 li a:hover {
        font-weight: bold;
       
    }
    #basic a,
    #test a
    {
      font-weight: bold;
       color: black;
        background-color: #e4ebeb;
    }
    but the text is still white

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    That's what you've applied in
    div#navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    ok but what about the other boxes that are not selected... how can i make there text white then ~:S

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Have you followed the link that I've posted in my previous post?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    i did indeed thats how i got the selected llink working...but the problem is making the NON selected links white text to match there background

    like so

    div#navbar2 {
    height: 30px;
    width: 100%;
    border-top: solid #000 1px;
    color: #FFF;
    background-color: #99b3b4;
    text-align:center;
    }

    but it does not work

  • #15
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Have you set any default attributes like this


    Code:
    body {
    color : #fff;
    }
    bazz


  •  

    Posting Permissions

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