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 question

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

    menu question

    Hello.

    I have a question. What is the easies way to get my menu in to a box or make the background in a different color only on the menu.

    i try to put <div style="background-color:white;height:270px;width:450px;float:right;"> arount it but it just make it worst

    And try a lot more things to but i dont get the result i wanted

    <h3>1</h3>
    <ul id="meny">
    <li><span class="style3"><a href="1"></a></span></li>
    <li><strong><a href="1"></a></strong></li>
    <li><strong><a href="1></a></strong></li>
    <li><strong><a href="1"></a></strong></li>
    <li><strong><a href="1"></a></strong></li>
    </ul>
    <ul id="meny">
    <li><strong><a href="1"></a></strong></li>
    <li><strong><a href="1"></a></strong><a href="1">&nbsp;</a></li>
    </ul>

    sorry if my english is bad

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    The easiest way is to put it in a div.

    One of your problems is that you have the id "meny" assigned to two items, which you can't do and will cause problems.

    You say that adding the div around your menu makes it worse, but we need to know what happens and see the actual code in order to help you.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Code:
    <h3>1</h3>
    <div id="navBar">
      <ul id="meny">
        <li><span class="style3"><a href="1"></a>One</span></li>
        <li><strong><a href="1"></a>One</strong></li>
        <li><strong><a href="1"></a>One</strong></li>
        <li><strong><a href="1"></a>One</strong></li>
        <li><strong><a href="1"></a>One</strong></li>
      </ul>
      <ul id="many">
        <li><strong><a href="1"></a>One</strong></li>
        <li><strong><a href="1"></a>One</strong></li>
      </ul>
    </div>
    Code:
    #navBar {
    	background-color: #00F;
    	width: 200px;
    }
    Teed

  • #4
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thx but i want it in a Horizontal and not in vertical

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Gl0rY View Post
    thx but i want it in a Horizontal and not in vertical

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        padding:0;
        margin:0;
    }
    #navi {
        background:#32BE98;
        width:400px;
        margin:10px auto;
        overflow:auto;
        height:1%;
        padding:10px;
    }
    #navi ul {
        list-style:none;
        font:bold 12px Arial, Helvetica, sans-serif;
    }
    #navi ul li {
        display:inline;
    }
    #navi ul li a {
        width:50px;
        float:left;
        background:#1B4983;
        color:#FFF;
        text-align:center;
        padding:5px;
        margin:0 2px;
    }
    </style>
    </head>
    
    <body>
    <div id="navi">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
    </div>
    </body>
    </html>
    Hope this is what you were looking for


  •  

    Posting Permissions

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