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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Help with ul & li elements

    Hello,

    I'm struggling with something. I've put together a video player and it all works fine.

    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>
    <title>Test</title>
    
    <style type="text/css">
    	#vidcontainer{width:642px; margin:0px auto; background-color:#FFffff; padding:20px;overflow:auto}
    	#video-holder {width:320px; height:248px; display:block; border:#000 1px solid; float:left;}
    	ul.the_menu {margin-top:0px;}
    	li.the_menu{width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;}
    	li.the_menu{width:265px;list-style-type:none; border:#888 1px solid; padding:4px; margin:0 0 4px 0; background:#eee;}
    	li:hover.the_menu {background:#0066CC}
    	#listing{float:left;}
    </style>
    
    </head>
    
    <body>
    <div id="container">
    
    <!-- Video Holder --> 
            <div id='video-holder' rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'></div>
    		
            <div id="listing">
            <ul class="the_menu">
           <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The First Video'>video 1<br />Quick Title</li>
         <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Second Video'>video 2<br />Quick Title</li>
    
        <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Third Video'>video 3<br />Quick Title</li>
        <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The First Video'>video 4<br />Quick Title</li>
        <li rel='http://www.youtube.com/v/0Bmhjf0rKe8&amp;hl=en&amp;fs=1' title='The Second Video'>video 5<br />Quick Title</li>
          <li rel='http://www.youtube.com/v/tgbNymZ7vqY&amp;hl=en&amp;fs=1' title='The Third Video'>video 6<br />Quick Title</li>
            </ul>
    
    </div>
    
    </div>
    
    </body>
    </html>
    Now my question is how do I make the UL and LI elements belong to a div element called the_menu? as I have other UL & LI elements a on the page which overwrites the styles.

    Thanks

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Code:
    li.the_menu{
      width: 265px;
      list-style-type: none;
      border: #888 1px solid;
      padding: 4px;
      margin: 0 0 4px 0;
      background: #eee;
    }
    
    li:hover.the_menu {
      background: #0066CC;
    }
    I would have expected to see.

    the_menu li{

    The overall id goes first followed progressively by the later ones.

    There is a wealth of help here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by effpeetee View Post
    I would have expected to see.

    the_menu li{
    Forgot the dot for the class: .the_menu li{

    And to the OP, your div isn't called the_menu - that's the ul.
    Are you a Help Vampire?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by tomws View Post
    Forgot the dot for the class: .the_menu li{

    And to the OP, your div isn't called the_menu - that's the ul.
    Thanks for picking that up. My sight is poor. I didn't notice the missing dot.

    Frank.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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