Help with ul & li elements

stfc_boy · 01-09-2010, 06:35 PM

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

effpeetee · 01-09-2010, 07:06 PM

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

tomws · 01-09-2010, 07:26 PM

Quote:

Originally Posted by effpeetee

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.

effpeetee · 01-09-2010, 08:10 PM

Quote:

Originally Posted by tomws

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.