JavaScript and client side scripting.
Moderator: General Moderators
Straterra
Forum Regular
Posts: 527 Joined: Mon Nov 24, 2003 8:46 am
Location: Indianapolis, Indiana
Contact:
Post
by Straterra » Tue Feb 03, 2004 5:10 pm
I currently have this code that creates drop down menu's for my website. The problem is, when a user with a smaller moniter visits it, the items are underneith each other...So, the person can't use the top-most menu item. I was wondering if there was a way to automatically space the items so that they always fit on 1 line.
Code: Select all
<style type="text/css">
body {
font-family: arial, helvetica, serif;
bgcolor: #000000
text: #FFFFFF
link: #0000FF
vlink: #0000FF
alink: #0000FF
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 8.7em;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
color: red;
display: block;
}
#content {
clear: left;
}
#changecolor a:hover {
color:red;
}
</style>
<script type="text/javascript"><!--//--><!їCDATAї//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodesїi];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
newwindow=window.open(href, windowname, 'width=400,height=100,scrollbars=no,toolbar=no,status=no,resizable=yes');
return false;
}
//-->
</SCRIPT>
<title>East Coast Killers - EcK</title>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="15">
<td width="100%"><center>East Coast Killers</center></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="15">
<td width="100%"><cetner><DIV id=changecolor><ul id="nav">
<li><a href="index.php">Home</a>
</li>
<li>Upload
<ul>
<li><a href="musicupload.php">Music</a></li>
<li><a href="imageupload.php">Pictures</a></li>
</ul>
</li>
<li>Forum
<ul>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=general">General</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=Wars">Matches</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=challenge">Challenge</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=site">Website</a></li>
</ul>
</li>
<li>Music
<ul>
<li><A HREF="addmusic6.php" onClick="return popup('addmusic6', 'eckmusic')">Popup</A></li>
<li><a href="pickmusic.php">Selector</a></li>
<li><a href="allmusic.php">List</a></li>
<li><a href="searchform.php">Search</a></li>
</ul>
</li>
<li>Video
<ul>
<li><a href="listvideo.php">List</a></li>
<li><a href="searchvideoform.php">Search</a></li>
</ul>
</li>
<li>Bios
<ul> <li><a href="loginform.php">Log In</li>
<li><a href="pro.php?user=main">Index</a></li>
<li><a href="biosend2.php">Modify Bio</a></li>
<li><a href="members.php">Members</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a href="contact.php?page=challangeform">Challange</li>
<li><a href="contact.php?page=joinform">Join</a></li>
<li><a href="contact.php?page=adminform">Contact Webmaster</a></li>
</ul>
</li>
</ul>
</div>
</center></td>
</tr>
</table>
Unipus
Forum Contributor
Posts: 409 Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA
Post
by Unipus » Tue Feb 03, 2004 7:07 pm
screenshots of what you want to accomplish vs. how it is now?
Straterra
Forum Regular
Posts: 527 Joined: Mon Nov 24, 2003 8:46 am
Location: Indianapolis, Indiana
Contact:
Post
by Straterra » Tue Feb 03, 2004 7:24 pm
Um..I can't get a screenshot of how it is now, because for my resolution, its perfect. But for the URL to the website that has the menu, go to
http://eckclan.sytes.net
Unipus
Forum Contributor
Posts: 409 Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA
Post
by Unipus » Tue Feb 03, 2004 7:34 pm
I see. You've defined an explicit width for your LIs. What you probably need to do is give the UL a percentage width. If you also give it a height and an overflow: none, that should guarantee it never spills onto two lines.
Of course, I haven't tried this out, but it sounds good in my head.
Straterra
Forum Regular
Posts: 527 Joined: Mon Nov 24, 2003 8:46 am
Location: Indianapolis, Indiana
Contact:
Post
by Straterra » Tue Feb 03, 2004 7:45 pm
Would the overflow by its self work?
Unipus
Forum Contributor
Posts: 409 Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA
Post
by Unipus » Tue Feb 03, 2004 7:58 pm
It wouldn't change the spacing between the items, which means they would simply disappear off the side of the screen for people with lower res. Not ideal.
Straterra
Forum Regular
Posts: 527 Joined: Mon Nov 24, 2003 8:46 am
Location: Indianapolis, Indiana
Contact:
Post
by Straterra » Tue Feb 03, 2004 10:13 pm
Eeek! I changed the li css thingy to this
Code: Select all
li { /* all list items */
float: left;
position: relative;
width: 14%;
}
But now, the submenu's are like all on the same line!
http://eckclan.sytes.net
Unipus
Forum Contributor
Posts: 409 Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA
Post
by Unipus » Wed Feb 04, 2004 1:50 pm
Really? Looks fine to me in IE and Firebird.
Straterra
Forum Regular
Posts: 527 Joined: Mon Nov 24, 2003 8:46 am
Location: Indianapolis, Indiana
Contact:
Post
by Straterra » Wed Feb 04, 2004 5:48 pm
Here is a screenshot of what it looks like to me in I.E.
The lines should be as follows
Challange
Join
Contact Webmaster
Unipus
Forum Contributor
Posts: 409 Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA
Post
by Unipus » Wed Feb 04, 2004 6:37 pm
I see it now. Try adding this to your li definition:
display: block;
It looks like they're trying to display inline. If that's not it, I'm really not sure what it might be. You might try
li ul li {
margin-bottom: 2px; (or any value, really)
}
although I'm really not sure if you can do multi-tiered subselectors like "li ul li." I guess you'll find out!
Finally, it's "Challenge," not "Challange."
Straterra
Forum Regular
Posts: 527 Joined: Mon Nov 24, 2003 8:46 am
Location: Indianapolis, Indiana
Contact:
Post
by Straterra » Wed Feb 04, 2004 7:20 pm
Darn, doesn't work..I'm tempted to just say "Screw you lower resolution peeps!"...Does anyone else feel this way about these kinds of issues?
Straterra
Forum Regular
Posts: 527 Joined: Mon Nov 24, 2003 8:46 am
Location: Indianapolis, Indiana
Contact:
Post
by Straterra » Thu Feb 05, 2004 6:43 pm
I have discovered that when I use percentages instead of em, it does that. So..does anyone have a remedy for this problem?
no_memories
Forum Contributor
Posts: 145 Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City
Post
by no_memories » Fri Feb 06, 2004 12:40 am
Some of your CSS was wrong and using some fixed pixels helped. But it centers and will work under 640x480. Just copy and paste this whole thing into a new document and try it out to get the feel for it.
You can adjust the margin from the top by editing the #container CSS
Hope this helps.
Code: Select all
<!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>Menu</title>
<style type="text/css">
body {
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #fff;
background: #000;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #00f;
background: transparent;
}
a:visited {
color: #00f;
background: transparent;
}
#container {
margin-top: 20px;
width: 480px;
}
a:hover {
color: #f90;
background: transparent;
}
ul { /* all lists */
text-align: left;
font-size: 120%;
font-weight: bold;
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 80px;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 15px;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodesїi];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<table width="100%">
<tr><td>
<center>
<div id="container">
<ul id="nav"><!-- 1st UL -->
<!-- <li><a href="index.php">Home</a></li> -->
<li>Upload<!-- Col 1 -->
<ul>
<li><a href="musicupload.php">Music</a></li>
<li><a href="imageupload.php">Pictures</a></li>
</ul>
</li>
<li>Forum<!-- Col 2 -->
<ul>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=general">General</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=Wars">Matches</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=challenge">Challenge</a></li>
<li><a href="http://eckclan.proboards19.com/index.cgi?board=site">Website</a></li>
</ul>
</li>
<li>Music<!-- Col 3 -->
<ul>
<li><a HREF="addmusic6.php" onClick="return popup('addmusic6', 'eckmusic')">Popup</a></li>
<li><a href="pickmusic.php">Selector</a></li>
<li><a href="allmusic.php">List</a></li>
<li><a href="searchform.php">Search</a></li>
</ul>
</li>
<li>Video<!-- Col 4 -->
<ul>
<li><a href="listvideo.php">List</a></li>
<li><a href="searchvideoform.php">Search</a></li>
</ul>
</li>
<li>Bios<!-- Col 5 -->
<ul>
<li><a href="loginform.php">Log In</li>
<li><a href="pro.php?user=main">Index</a></li>
<li><a href="biosend2.php">Modify Bio</a></li>
<li><a href="members.php">Members</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a href="contact.php?page=challangeform">Challange</li>
<li><a href="contact.php?page=joinform">Join</a></li>
<li><a href="contact.php?page=adminform">Contact Webmaster</a></li>
</ul>
</li>
</ul>
</div>
</center>
</td></tr>
</table>
</body>
</html>