horizontal "nested" list question -...

Jan 15th, 2010 at 01:09 PM
User 107145 Photo

pk
Registered User
88 posts

I am trying to make a 2 line horizontal menu using CSS nested listed instead of using tables tables. It's a list of songs that when you click on the 'play' button under the song's name the song plays. I can make it work by using tables but rather use CSS. Is using nested lists the way to go? If so, I need some help please.

Here is a sample of what I am trying to do... http://perau.com/practicepage/horimenutest1.html

Thanks
pk
... so much to learn!!
Jan 15th, 2010 at 04:38 PM
User 476017 Photo

Dave Butler
Ambassador
375 posts

pk wrote:
I am trying to make a 2 line horizontal menu using CSS nested listed instead of using tables tables. It's a list of songs that when you click on the 'play' button under the song's name the song plays. I can make it work by using tables but rather use CSS. Is using nested lists the way to go? If so, I need some help please.

Here is a sample of what I am trying to do... http://perau.com/practicepage/horimenutest1.html

Thanks
pk


Hi PK
You could do something like this with just html coding

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>



</head>
<body id="shophome">
<div id="header_wrapper">
<div id="header">
<h1>List your songs</h1>
<ul id="navigation">
<li><a href="home.mp3">Song 1</a></li>
<li><a href="song2.mp3">Song 2</a></li>
<li><a href="song3.mp3">Song3</a></li>
</ul>

</div>
</div>
<div id="wrapper">
<div id="content">
<h2>Welcome to the ????? website</h2>


</div>
</div>
</body>
</html>

include these lines in your css
you can change things like font ,colour weight etc

#navigation {margin-top:15px; font-size:1.0em; font-weight:bold; color:#ffffff;}
#navigation li {display:inline; margin-right:6px}
#navigation li a {color:#ffffff}

hope that gives you some help
Dave Butler
Yorkshire
England

Old Rishworthians Rugby Union Football club http://www.orrufc.co.uk
Tuxedo Junction Yorkshire Function Band http://www.riley-tuxedojunction.co.uk
The Commons Guest House http://www.thecommons-guesthouse.co.uk
all created with Coffee Cup html editor
Jan 15th, 2010 at 05:27 PM
User 107145 Photo

pk
Registered User
88 posts

Thanks Dave. We really want to have the "play" button under the song but I didn't see it in the code you wrote. Any suggestions on how to do this?

Thanks
pk
... so much to learn!!
Jan 15th, 2010 at 05:45 PM
User 476017 Photo

Dave Butler
Ambassador
375 posts

pk wrote:
Thanks Dave. We really want to have the "play" button under the song but I didn't see it in the code you wrote. Any suggestions on how to do this?

Thanks
pk


Hi
OK wasn't sure how experienced you were at css/html
just add a line break to create a second line see below

<ul id="navigation">
<li>Play</li>
<li>&nbsp;&nbsp;Play 2</li>
<li>&nbsp;&nbsp;Play 3</li>
<br/>
<li><a href="home.mp3">Song 1</a></li>
<li><a href="song2.mp3">Song 2</a></li>
<li><a href="song3.mp3">Song3</a></li>

</ul>
Dave Butler
Yorkshire
England

Old Rishworthians Rugby Union Football club http://www.orrufc.co.uk
Tuxedo Junction Yorkshire Function Band http://www.riley-tuxedojunction.co.uk
The Commons Guest House http://www.thecommons-guesthouse.co.uk
all created with Coffee Cup html editor
Jan 15th, 2010 at 05:49 PM
User 476017 Photo

Dave Butler
Ambassador
375 posts

Dave Butler wrote:
pk wrote:
Thanks Dave. We really want to have the "play" button under the song but I didn't see it in the code you wrote. Any suggestions on how to do this?

Thanks
pk


Hi
OK wasn't sure how experienced you were at css/html
just add a line break to create a second line see below

<ul id="navigation">
<li>Play</li>

Sorry PK
I put the text the wrong way round perhaps you require it like this .
Concept is there just have a tinker with the code.

<ul id="navigation">
<li>Song 1</li>
<li>&nbsp;&nbsp;Song 2</li>
<li>&nbsp;&nbsp;Son 3</li>
<br/>
<li><a href="song1.mp3">Play</a></li>
<li><a href="song2.mp3">Play</a></li>
<li><a href="song3.mp3">Play</a></li>

<li>&nbsp;&nbsp;Play 2</li>
<li>&nbsp;&nbsp;Play 3</li>
<br/>
<li><a href="home.mp3">Song 1</a></li>
<li><a href="song2.mp3">Song 2</a></li>
<li><a href="song3.mp3">Song3</a></li>

</ul>
Dave Butler
Yorkshire
England

Old Rishworthians Rugby Union Football club http://www.orrufc.co.uk
Tuxedo Junction Yorkshire Function Band http://www.riley-tuxedojunction.co.uk
The Commons Guest House http://www.thecommons-guesthouse.co.uk
all created with Coffee Cup html editor
Jan 15th, 2010 at 06:47 PM
User 463058 Photo

Cary
Ambassador
1,086 posts

You can also try this approach:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css">
#songs {
margin:0;
padding:0;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
}
#songs li {
text-align:center;
width:5.5em;
float:left;
}
</style>
</head>
<body>
<ul id="songs">
<li>SONG 1<br /><a href="#">play</a></li>
<li>SONG 2<br /><a href="#">play</a></li>
<li>SONG 3<br /><a href="#">play</a></li>
</ul>
</body>
</html>
Jan 15th, 2010 at 07:24 PM
User 463058 Photo

Cary
Ambassador
1,086 posts

This styling works better:
#songs li {
text-align:center;
float:left;
padding:0 1em;
}
Jan 16th, 2010 at 08:02 AM
User 107145 Photo

pk
Registered User
88 posts

Thanks Dave and Cary. With your info I got it the way we want it....or at least for now! I think it was so straight forward an answer that I totally missed it! Like I say... so much to learn.

Thanks
pk
... so much to learn!!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.