...

View Full Version : Help with ul & li elements



stfc_boy
01-09-2010, 07:35 PM
Hello,

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



<!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, 08:06 PM
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 (http://exitfegs.co.uk/Sources.html).

Frank

tomws
01-09-2010, 08:26 PM
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, 09:10 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum