PDA

View Full Version : How can I turn this into a horizontal menu?



957
Apr 11th, 2010, 05:35 AM
How can I turn this into a horizontal menu? I need 2 lines. Thanks in advance.


<!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 TAGS-->
<meta http-equiv="content-type" content="text/html/javascript;charset=utf-8" />
<meta name="description" content="Bookmarks are convenient again" />
<meta name="keywords" content="Bookmark, Bookmarks, Bookmarking, Favorite, Favorites, Bokkmark, Bokkmarks, Bokkmarking, NineFiveSeven, NinFiveSeven, 957, 947," />
<meta name="author" content="Matthew Chatterton, 957" />
<meta name="google-site-verification" content="cgXAnSRuoISyTbxJZvCVHlSdyQO1t6-0ENPaaHzlmj0" />
<!--STOP META TAGS-->

<!--EXTERNAL FILES-->
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="IEcompensate.js"></script>
<!--STOP EXTERNAL FILES-->

<title>957 Bookmarks</title>

<!--CSS INTERNAL-->
<style type="text/css">.center { text-align:center; } table {width: 100%;} form { text-align:center; }</style>
<!--STOP CSS INTERNAL-->

<!--JAVASCRIPT INTERNAL-->
<script type="text/javascript">
function show_alert()
{
alert("XHTML 1.0 Validated");
}
</script>
<!--JAVASCRIPT INTERNAL-->

</head>

<body onload="startTime()">

<a href="info.html"><img style="position: absolute; top: 0px; left: 0px; z-index=-1" src="http://ninefiveseven.99k.org/957logo.gif" alt="957logo" /></a>

<h4 class="center">Favorites</h4>

<form style="text-align:center" method="get" action="http://www.google.com/search">
<input type="text" name="q" size="30"
maxlength="255" value="" />
<input type="submit" value="Google search" />
</form>

<div>
<ul>
<li><b>eMail</b>
<ul>
<li><a href="http://www.mail.com">Mail.com</a></li>
<li><a href="http://www.yahoo.com/mail">Yahoo mail</a></li>
<li><a href="http://www.hotmail.com">Hotmail</a></li>
<li><a href="http://mail.google.com">Gmail</a></li>
</ul>
</li>
<li><b>File Sharing</b>
<ul>
<li><a href="http://www.flickr.com">Flickr</a></li>
<li><a href="http://imageshack.us">ImageShack</a></li>
<li><a href="http://photobucket.com">PhotoBucket</a></li>
<li><a href="http://www.rapidshare.com/">RapidShare</a></li>
</ul>
</li>
<li><b>Financial</b>
<ul>
<li><a href="http://www.businessweek.com/">Businessweek</a></li>
<li><a href="http://www.nasdaq.com/">NASDAQ</a></li>
<li><a href="http://www.nyse.com/">NYSE</a></li>
</ul>
</li>
<li><b>Jobs</b>
<ul>
<li><a href="http://www.craigslist.org">Craigslist</a></li>
<li><a href="http://www.jobcorps.gov/home.aspx">JobCorp</a></li>
</ul>
</li>
<li><b>Linguistics</b>
<ul>
<li><a href="http://www.dictionary.com">Dictionary</a></li>
<li><a href="http://www.rhymezone.com">RhymeZone</a></li>
<li><a href="http://thesaurus.com">Thesaurus</a></li>
<li><a href="http://www.anagramsite.com">Anagrams</a></li>
<li><a href="http://www.spanishdict.com/">SpanishDict</a></li>
</ul>
</li>
<li><b>Literature</b>
<ul>
<li><a href="http://www.poetry.com">Poetry.com</a></li>
<li><a href="http://www.ebooks.com">eBooks</a></li>
<li><a href="http://www.reviewsofbooks.com">Book Reviews</a></li>
</ul>
</li>
<li><b>Maps</b>
<ul>
<li><a href="http://www.mapquest.com">MapQuest</a></li>
<li><a href="http://maps.google.com">Google Maps</a></li>
<li><a href="http://www.sky-map.org">SKY-MAP.ORG</a></li>
</ul>
</li>
<li><b>Music</b>
<ul>
<li><a href="http://www.playlist.com">Playlist</a></li>
<li><a href="http://www.azlyrics.com">Lyrics</a></li>
<li><a href="http://www.hamienet.com">Hamienet</a></li>
<li><a href="http://www.music-sites.net">Music-Sites</a></li>
</ul>
</li>
<li><b>News (general)</b>
<ul>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.cbsnews.com/">CBSnews</a></li>
<li><a href="http://www.msnbc.msn.com/">MSNBC</a></li>
<li><a href="http://www.bbc.co.uk">BBC</a></li>
<li><a href="http://www.npr.org">NPR</a></li>
</ul>
</li>
<li><b>Politics</b>
<ul>
<li><a href="http://www.politico.com">Politico</a></li>
<li><a href="http://www.c-span.org">C-Span</a></li>
<li><a href="http://www.democrats.org">DNC</a></li>
<li><a href="http://www.gop.com">GOP</a></li>
</ul>
</li>
<li><b>Pro Wrestling</b>
<ul>
<li><a href="http://www.tnawrestling.com">TNA</a></li>
<li><a href="http://www.wwe.com">WWE</a></li>
<li><a href="http://corporate.wwe.com">WWE Corporate</a></li>
<li><a href="http://www.ewrestlingnews.com">eWrestling news</a></li>
<li><a href="http://www.wrestlinginc.com">WrestlingINC.</a></li>
</ul>
</li>
<li><b>Science</b>
<ul>
<li><a href="http://www.sciencedaily.com/">ScienceDaily</a></li>
<li><a href="http://www.nasa.gov">NASA</a></li>
<li><a href="http://www.scirus.com">Scirus</a></li>
</ul>
</li>
<li><b>Shopping</b>
<ul>
<li><a href="http://www.amazon.com">Amazon</a></li>
<li><a href="http://www.ebay.com">eBay</a></li>
<li><a href="https://www.paypal.com">PayPal</a></li>
</ul>
</li>
<li><b>Social/Networking</b>
<ul>
<li><a href="http://www.myspace.com">MySpace</a></li>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.Twitter.com">Twitter</a></li>
<li><a href="http://www.skyrock.com">Skyrock</a></li>
<li><a href="https://www.blogger.com">Blogger</a></li>
<li><a href="http://www.friendster.com">Friendster</a></li>
<li><a href="http://www.linkedin.com">LinkedIn</a></li>
<li><a href="http://www.orkut.com">Orkut</a></li>
<li><a href="http://www.hi5.com">hi5</a></li>
</ul>
</li>
<li><b>Sports</b>
<ul>
<li><a href="http://espn.go.com/">ESPN</a></li>
<li><a href="http://www.nfl.com">NFL</a></li>
<li><a href="http://www.nba.com">NBA</a></li>
<li><a href="http://www.ufc.com">UFC</a></li>
<li><a href="http://www.nhl.com">NHL</a></li>
<li><a href="http://www.mlb.com">MLB</a></li>
<li><a href="http://www.mlsnet.com">MLS</a></li>
</ul>
</li>
<li><b>TV/Movies/Video</b>
<ul>
<li><a href="http://www.hulu.com">Hulu</a></li>
<li><a href="http://www.youtube.com">Youtube</a></li>
<li><a href="http://www.youtube.com/movies">Youtube Movies</a></li>
<li><a href="http://www.dailymotion.com">Dailymotion</a></li>
<li><a href="http://www.netflix.com">Netflix</a></li>
<li><a href="http://www.imdb.com">IMDb</a></li>
</ul>
</li>
<li><b>Misc.</b>
<ul>
<li><a href="http://www.accuweather.com">Weather</a></li>
<li><a href="http://www.timeanddate.com/worldclock">TimeZones</a></li>
<li><a href="http://www.wikipedia.com">Wikipedia</a></li>
<li><a href="http://www.yellowpages.com">YellowPages</a></li>
<li><a href="http://wordpress.com">WordPress</a></li>
<li><a href="http://citysearch.com">CitySearch</a></li>
<li><a href="http://en-us.nielsen.com/">Nielson</a></li>
</ul>
</li>
</ul>
</div>

<center><a class="center" href="mailto:[email protected]">feedback and suggestions.</a></center>

<img style="position: absolute; bottom: 0; right: 0;" src="http://www.e-zeeinternet.com/count.php?page=396298&amp;
style=LED&amp;nbdigits=9&amp;reloads=1" align="right" alt="Hit Counter" border="0" />

<b><big><a style="position: absolute; top: 0; right: 0;" id="time"></a></big></b>

<input style="position: absolute; bottom: 0; left: 0; width: 110px;" type="button" onclick="show_alert()" value="Don't click here!" />

</body>
</html>


/*BASICS*/
a { cursor: crosshair; display: block; }
body { background-color: #7A5015; }
a:link { color: #000000; }
a:visited { color: #191816; }
a:hover { color: #B38103; }
form { text-align: center; }
table { border: groove 5px; background: #6B5531; }
/*STOP BASICS*/

/*MENU*/
ul { margin: 0; padding: 0; list-style: none; width: 150px; position: float; left }
ul li { position: relative; }
li ul { position: absolute; left: 125px; top: 0; display: none; }
ul li a { background: #6B5531; text-decoration: none; padding: 3px; border: 1px solid #000000; border-bottom: 0; }
ul { background: #6B5531; margin: 0; padding: 0; list-style: none; width: 130px; border: 1px solid #000000; }
li:hover ul { display: block; }
b:hover { color: #B38103; cursor: crosshair; }

/*FIX IE. HIDE FROM IE MAC\*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/*STOP FIX IE. HIDE FROM IE MAC*/

/*STOP MENU*/

abduraooft
Apr 11th, 2010, 02:47 PM
Try changing
ul { margin: 0; padding: 0; list-style: none; width: 150px; position: float; left }
ul li { position: relative; } to

ul { margin: 0; padding: 0; list-style: none; width: 150px; position: }
ul li { position: relative; float; left ;}

btw, your CSS selectors are very general and thus it'll affect the display of all <ul>, <li> tags anywhere in your document. Make them a little more specific (http://www.htmldog.com/guides/cssadvanced/specificity/)!

957
Apr 11th, 2010, 06:06 PM
I still can't get it to display horizontally

957
Apr 11th, 2010, 06:09 PM
wait nvmd. but can someone help me put vertical lines between categories to separate them?

957
Apr 11th, 2010, 06:11 PM
wait nvmd. lol

abduraooft
Apr 11th, 2010, 06:12 PM
Umm.. I'd recommend you to follow http://www.htmldog.com/articles/suckerfish/dropdowns/, which is an easy and good titorial to follow.