menu float problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • smartic
    New Member
    • May 2007
    • 150
    #1

    menu float problem

    hi i'm having problem with designing css layout i'm not expert so i need any one good in css help me in this page, my problem in this page i need to make menus to be displayed in one line beside each other how can i do that?

    [HTML]<head>
    <style type="text/css">
    <!--
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #333333;
    color: #FFFFFF;
    }
    span, div, body {
    margin: 0px;
    padding: 0px;
    }
    #mubody {
    width: 800px;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
    }
    #logoban {
    background-color: #000000;
    overflow: auto;
    }
    #logoban img {
    float: left;
    }
    #logoban #loged {
    color: #666666;
    background-color: #FFFFFF;
    float: right;
    padding: 5px;
    margin-top: 3%;
    margin-right: 30px;
    margin-bottom: 10px;
    margin-left: 10px;
    }
    #btns {
    background:#005 0D5;
    }
    #btns .btn {
    width:150px;
    text-align:center;
    margin:3px;
    }
    #btns .btn:hover .subbtn {
    display:block;
    }
    #btns .btn .btntxt {
    background:#000 066;
    padding:5px;
    font-weight:bold;
    }
    #btns .btn .subbtn {
    display:none;
    }
    #btns .btn .subbtn a {
    display:block;
    background:#003 366;
    color:#FFFFFF;
    padding:5px;
    margin:0px;
    text-decoration:none ;
    }
    #btns .btn .subbtn a:hover {
    background:#333 333;
    color:#FFFFFF;
    text-decoration:unde rline;
    }
    #main {
    background-color: #FF9900;
    padding: 5px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="mubody">
    <div id="btns">
    <div class="btn">
    <div class="btntxt"> Menu1</div>
    <span class="subbtn"> <a href="#">Sub1</a><a href="#">Sub2</a><a href="#">Sub3</a><a href="#">Sub4</a><a href="#">Sub5</a><a href="#">Sub6</a></span></div>
    <div class="btn">
    <div class="btntxt"> Menu2</div>
    <span class="subbtn"> <a href="#">Sub1</a><a href="#">Sub2</a><a href="#">Sub3</a><a href="#">Sub4</a><a href="#">Sub5</a><a href="#">Sub6</a></span></div>
    <div class="btn">
    <div class="btntxt"> Menu3</div>
    <span class="subbtn"> <a href="#">Sub1</a><a href="#">Sub2</a><a href="#">Sub3</a><a href="#">Sub4</a><a href="#">Sub5</a><a href="#">Sub6</a></span></div>
    <div class="btn">
    <div class="btntxt"> Menu4</div>
    <span class="subbtn"> <a href="#">Sub1</a><a href="#">Sub2</a><a href="#">Sub3</a><a href="#">Sub4</a><a href="#">Sub5</a><a href="#">Sub6</a></span></div>
    </div>
    <div id="main">txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt </div>
    </div>
    </body>[/HTML]
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Float the button class .btn left.

        Comment

        • smartic
          New Member
          • May 2007
          • 150
          #3
          i tried this way but it warp the div tag beneath it i don't know why it do this?

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              To your #main in CSS, add "clear:left "

                Comment

                • smartic
                  New Member
                  • May 2007
                  • 150
                  #5
                  when i do that it bush the main under the menu in opera or firefox but in ie the menu disappear beneath it, any other solution ?

                    Comment

                    Previous template Next
                    Working...