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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Oct 2008
    Location
    Essex
    Posts
    22
    Thanks
    2
    Thanked 1 Time in 1 Post

    help needed with Css styling a horizontal menu

    Hi

    I'm trying to build a menu with html/css. This menu will be dynamic based on a user that is logged in so the menu could change and display a different list but as a starter I've done just the very basic html and some css.

    The HTML
    Code:
    <html>
    <head>    
      <link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
      <!--<script type="text/javascript" src="jquery.js"></script> -->
      <!-- <script type="text/javascript">
          // Your code goes here
      </script> -->
    </head>
    <body>
      <div id"wrapper">
        <ul>
          <li>Data</li>
           <ul>
             <li>Manual Entry</li>
             <li>Month End Returns</li>
             <li>Surveys</li>
           </ul>
          <li>Reports</li>
          <li>Admin</li>
        </ul>
      </div>
    </body>
    </html>
    the css
    Code:
    ul li{
      float: left;
      list-style: none;
      border:1px solid #888
      }
    ul li ul li {
      list-style: none;
      float:none;
    }
    I want the second li to be displayed in is own block and not have the "Data" li's border extend to disply the second li.

    Hope this makes sense if not I'll try and expand on it.

    Thanks in advanced

  • #2
    New Coder
    Join Date
    Oct 2008
    Location
    Essex
    Posts
    22
    Thanks
    2
    Thanked 1 Time in 1 Post
    Forgot to mention that it needs to be IE5 + compatiable. I tried it in firefox + IE7 and it displays exactly the same.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I don't think you'll get it to be backwards compatible as far as ie5. we're lucky to have it back as far as ie6 and even then, it needs JS.

    You could probably do it with JS alone but, then, people with JS disabled will not be able to get around your site.

    As far as fixing the border issue, are you 'speaking' of the Reports and Admin "li's"?

    Then use a class like this

    Code:
    <ul>
      <li class='data'>Data</li>
      <ul>
        <li>Manual Entry</li>
        <li>Month End Returns</li>
        <li>Surveys</li>
      </ul>
      <li>Reports</li>
      <li>Admin</li>
    </ul>
    Now that you have differentiated between the default li and the data li, you can then style them separately.

    Code:
    ul li {
      float: left;
      list-style: none;
      border:1px solid #888
      }
    
    ul li.data {
      float: left;
      list-style: none;
      border:2px solid #444
      }
    
    ul li ul li {
      list-style: none;
      float:none;
    }
    I hope that gets you started. Take a look also at the htmlcss forum for the last few days. There are three other poeple who have been asking similar questions so the answers are sitting there for you - wihtout a delayed reply.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    New Coder
    Join Date
    Oct 2008
    Location
    Essex
    Posts
    22
    Thanks
    2
    Thanked 1 Time in 1 Post
    I realise that it would be hard to make it up to ie5 as I dont think ie6 recognises hover selectors etc.
    I was hoping to use jQuery and mouseovers to show/hide my sub-menu's but to get the general layout.

    Sorry about the confusing when I said second li's it should have been the second ul's
    which is "Manual Entry","Month End Returns","Surveys"

    What I want is for my top lever menu to have is "Data","Reports","Admin" then when a user hovers over the "Data" li it would then show/hide the sub-menu "Manual Entry","Month End Returns","Surveys" which should be directly under "Data".


    Thanks for the quick response.

  • #5
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    I'd just like to point out that this might give you validation problems (and maybe some rendering issues across browsers):
    Code:
        <ul>
          <li>Data</li>
           <ul>
             <li>Manual Entry</li>
             <li>Month End Returns</li>
             <li>Surveys</li>
           </ul>
          <li>Reports</li>
          <li>Admin</li>
        </ul>
    The inner UL should be a child of an LI, like:
    Code:
    <ul>
      <li>Something</li>
      <li>
        <ul>
          <li>another thing</li>
        </ul>
      </li>
      <li>Something Else</li>
    </ul>
    If you want that inner UL to have a title or something of the sort, you can always make use a P or a DIV inside the parent LI like so:
    Code:
    <li>
      <p>Something about the list below:</p>
      <ul>
        <li>another thing</li>
      </ul>
    </li>
    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by Samhain13 View Post
    I'd just like to point out that this might give you validation problems (and maybe some rendering issues across browsers):
    Code:
        <ul>
          <li>Data</li>
           <ul>
             <li>Manual Entry</li>
             <li>Month End Returns</li>
             <li>Surveys</li>
           </ul>
          <li>Reports</li>
          <li>Admin</li>
        </ul>
    good catch Sahmain.

    OK FunckyOracle, if you want the flyout lists to be style differently from the parent li's then assign a class to the child ul

    Code:
    <ul>
      <li>Data
        <ul class='second_level'>
          <li>Manual Entry</li>
          <li>Month End Returns</li>
          <li>Surveys</li>
        </ul>
      </li>
      <li>Reports</li>
      <li>Admin</li> 
    </ul>
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #7
    New Coder
    Join Date
    Oct 2008
    Location
    Essex
    Posts
    22
    Thanks
    2
    Thanked 1 Time in 1 Post
    well spotted Sahmain. I've now updated my code.

    Bazz I've did what you suggested but I'm still seeing the inner UL as part of "Data"

    This is my amended HTML
    Code:
    <html>
    <head>    
      <link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
      <!--<script type="text/javascript" src="jquery.js"></script> -->
      <!-- <script type="text/javascript">
          // Your code goes here
      </script> -->
    </head>
    <body>
      <div >
        <ul id="nav">
          <li>Data
           <ul id="nav_second_level">
             <li>Manual Entry</li>
             <li>Month End Returns</li>
             <li>Surveys</li>
           </ul></li>
          <li>Reports</li>
          <li>Admin</li>
        </ul>
      </div>
    </body>
    </html>
    and my css file

    Code:
    #nav li{
      float: left;
      list-style: none;
      border:1px solid #888
      }
    #nav_second_level li{
    	list-style: none;
    	float:none;
    	background-color: #00CCFF;
    }
    #nav ul li.data {
      float: left;
      list-style: none;
      border:2px solid #444
      }
    I've attached a pic what I want is to have the inner ul directly under data for not to look like it is inside the same table cell.

    Thanks again and thanks for helping a newbie.
    Attached Thumbnails Attached Thumbnails help needed with Css styling a horizontal menu-menu.jpg  

  • #8
    New Coder
    Join Date
    Oct 2008
    Location
    Essex
    Posts
    22
    Thanks
    2
    Thanked 1 Time in 1 Post
    bump it up...

  • #9
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    Try adding this to your CSS:

    Code:
    #nav_second_level {
        margin-left : 0px ;
        padding-left : 0px ;
    }
    That should take care of the default left margin/padding that browsers put on lists. You can adjust the values as you see fit.

    If that doesn't work, try changing "#nav_second_level" to "#nav li.data ul".
    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **

  • Users who have thanked Samhain13 for this post:

    FunkyORACLE (10-29-2008)

  • #10
    New Coder
    Join Date
    Oct 2008
    Location
    Essex
    Posts
    22
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thank you thank you thank you Sahmain. The navigation bar is coming a long nicely. However, How can I make the length of my outter ul's independed of the inner ul's? I've attached a pic of what I have now. I hat the out ul's to stay the same legth as they originally were before the submenu appeared.

    Thanks agin for your help.

    This is my HTML:
    Code:
    <html>
    <head>    
      <link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
      <!--<script type="text/javascript" src="jquery.js"></script> -->
      <script type="text/javascript">
          // Your code goes here
      function ShowSubmenu(){
    	subMenuObj = document.getElementById('nav_second_level');
    	subMenuObj.style.left ='0px';
    	subMenuObj.style.display = 'block';
    	subMenuObj.style.bottom='0px';
      }
      function HideSubmenu(){
    	subMenuObj = document.getElementById('nav_second_level');
    	subMenuObj.style.left ='-10000px';
    	subMenuObj.style.display = 'none';
      }
      </script> 
    </head>
    <body>
        <ul id="nav">
          <li onmouseover="ShowSubmenu();" onMouseOut="HideSubmenu();">Data
           <ul id="nav_second_level">
             <li>Manual Entry</li>
             <li>Month End Returns</li>
             <li>Surveys</li>
           </ul></li>
          <li>Reports</li>
          <li>Admin</li>
        </ul>
     </body>
    </html>
    My CSS:
    Code:
    #nav li{
    	float: left;
    	list-style: none;
    	border:1px solid #888
    	margin-left : 0px ;
    	padding-left : 0px;
    	margin-left: 0px;
    }
    #nav_second_level {
        margin-left : 0px ;
        padding-left : 0px ;
    }
    #nav_second_level li{
    	list-style: none;
    	float:none;
    	background-color: #00CCFF;
    	margin-left : 0px ;
    	  padding-left : 0px ;
    }
    Attached Thumbnails Attached Thumbnails help needed with Css styling a horizontal menu-menu2.jpg  
    Last edited by FunkyORACLE; 10-29-2008 at 04:32 PM.

  • #11
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    By default a div fits the content. You can specify widths to change that. If your outter div is 100&#37; and your inner div is 50% of that (or with absolute numbers), then the outter is bigger than the inner.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #12
    New Coder
    Join Date
    Oct 2008
    Location
    Essex
    Posts
    22
    Thanks
    2
    Thanked 1 Time in 1 Post
    Sorry these are UL's I have removed the DIV now. Jerry I think the inner will be bigger than the outer. How could I get this type of effect?

    I need my sub-menu to "float" above my page content as well instead of shiftting my page.

  • #13
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Just an idea. Go to http://www.cssplay.co.uk/ and take one of the free menus he has there instead of reinventing the wheel. If you go to my site, (see link below) you will see exactly what you are after. I happened to chose the grahpical menu, but he has tons of choices available.

    There are some things I don't care for, but not enough that I bother to change them. Just leave his tag line in the code and it's yours.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #14
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    One method I know of (and often use) is to make the inner UL "position: absolute". That way, the dimensions of that UL will be independent of its parent's dimensions (and vice-versa). If you give #nav_second_level "position: absolute", give it a width like, 300px and not give it a left and a top definition; it will stay right at the bottom of "data".

    So you'll get something like this:

    Code:
    #nav_second_level {
        margin-left : 0px ;
        padding-left : 0px ;
        position : absolute ;
        width : 300px ;
    }
    If that UL appears too close to the word "Data" above it, you can add "margin-top: 10px ;" to separate that UL a bit.

    Again, do not use top and left. Just adjust your margin-top and margin-left as necessary.

    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **

  • #15
    New Coder
    Join Date
    Oct 2008
    Location
    Essex
    Posts
    22
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thanks Sahmain but the inner ul does not display under the "Data" Li.

    My HTML
    Code:
    <html>
    <head>    
      <link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
      <!--<script type="text/javascript" src="jquery.js"></script> -->
      <script type="text/javascript">
          // Your code goes here
      function ShowSubmenu(){
    	subMenuObj = document.getElementById('nav_second_level');
    	//subMenuObj.style.left ='0px';
    	subMenuObj.style.display = 'block';
    	//subMenuObj.style.bottom='0px';
      }
      function HideSubmenu(){
    	subMenuObj = document.getElementById('nav_second_level');
    	//subMenuObj.style.left ='-10000px';
    	subMenuObj.style.display = 'none';
      }
      </script> 
    </head>
    <body>
        <ul id="nav">
          <li onmouseover="ShowSubmenu();" onMouseOut="HideSubmenu();">Data
           <ul id="nav_second_level">
             <li>Manual Entry</li>
             <li>Month End Returns</li>
             <li>Surveys</li>
           </ul>
          </li>
          <li>Reports</li>
          <li>Admin</li>
        </ul>
      <br />
      <p> just some text</p>
    </body>
    </html>
    My CSS
    [CODE]#nav li{
    float: left;
    list-style: none;
    border:1px solid #888
    margin-left : 0px ;
    padding-left : 0px;
    margin-left: 0px;
    }
    #nav_second_level {
    margin-left : 0px ;
    padding-left : 0px ;
    position : absolute ;
    width : 300px ;
    }
    #nav_second_level li{
    list-style: none;
    float:none;
    background-color: #00CCFF;
    margin-left : 0px ;
    padding-left : 0px ;
    }[[/ICODE]

    I'll need to do some reading up on the "Absolute" property.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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