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: menu

  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    menu

    hello.

    What is the code to move this menu into the middle of the window.
    and hove do i change the color of the link that i are in?
    i know that i need to change it for ewery site thet i whant it to have a diffrent color in

    <style type="text/css">
    <!--
    body {font: 80% Verdana, Arial, Helvetica, sans-serif;}
    a:link{color: #000000; text-decoration: none;}
    a:visited{color: #000000; text-decoration: none;}
    a:hover{color: #0000ff;}
    a:active{text-decoration: underline;}

    #meny li{display: inline; list-style-type: none;}

    -->
    </style>
    </head>
    <body>
    <ul id="meny">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    </ul>
    </body>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 588 Times in 587 Posts
    Wrap your menu in a div and position to div
    Code:
    div{margin-left: 0 auto; margin-right: 0 auto;}
    Your hover and visited declares will color them. If you want them all different at the start you need to color each one. Or do you want them colored differently when selected?

  • Users who have thanked sunfighter for this post:

    Gl0rY (07-01-2011)

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok do you meen im going to do

    <ul id="meny">
    <div{margin-left: 0 auto; margin-right: 0 auto;}
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    </div>
    </ul>

    or do you meen in a diffrent way?

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    ul.nav {
     width: 400px; /* Add the # of lis x width (100px)
     height: 40px; /* Set height to fix float */
     margin: 0 auto; /* Centers - only if parent div is > 400px, sets an EQUAL margin left and right */
    }
    
    ul.nav li {
     height: 40px; /* Set height to fix float */
     float: left;
    }
    
    ul.nav li a {
     width: 100px;
     float: left;
     height: 40px;
     line-height: 40px; /* Centers a vertically */
    
     /* Unnecessary */
     background-color: #333; 
     text-align: center;
     font-weight: bold;
     font-shadow: 1px 0px 0px #FFF;
    } 
    
    ul.nav li a:hover {
     background-color: #E2E2E2;
    }
    Code:
    <ul class="nav">
       <li><a href="#">Rada</a></li>
       <li><a href="#">Rada</a></li>
       <li><a href="#">Rada</a></li>
       <li><a href="#">Rada</a></li>
    </ul>
    If you have borders on the nav, then you have to take them into account when regarding the width of the ul.

    ------------

    You can set an "active" class to a specific "a" to make it change color:
    Code:
    a.active {
     color: #FFF;
     background-color: #444;
    }
    Code:
    <ul>
     <li><a href="#" class="active">rada</a></li>
     <li><a href="#">rada</a></li>
    </ul>
    Then you have to change the ACTIVE link for each page (since its different). An easier solution is to use java.
    Last edited by Sammy12; 07-01-2011 at 05:05 AM.

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello ,

    Provide width to ul and then use margin 0auto to center the Div.


  •  

    Posting Permissions

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