PDA

View Full Version : Need help with scroll down menus

The Reverend
03-01-2006, 07:55 AM
I got this code off of a javascript help site, but after I put all my stuff in it I realized how hard it is to manipulate the way I want it. I'm a rookie at this stuff so I'm not sure how to do these things.

I want to center it for one thing, this is part of a file that is refered to by php all over my site but it won't align in the center no matter where I place center tags, I tried to do it via the CSS and failed, also tried manipulating it in dreamweaver and could not get it to do it right. Any help with this would be much appreciated.

The other problem I'm having is that I want it to be exactly 800 pixels wide to match the rest of my site, and I have no idea how to do this.

<html>
<head>
<style type="text/css">

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
align: center;
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 2px solid gold;
border-left-width: 0;
background-color: #800000;
}

.headerlinks a{
margin: auto 25px;
font-weight: bold;
font-size: 14;
color: gold;
}

.submenus{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #800000;
border: 1px solid gold;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
color: gold;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: gold;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type="text/javascript">

// CSS Top Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep this credit intact

startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>
</head>
<body>

<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="index.html">Home</a></div>
</li>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://forum.ninercaphell.com">Forum</a></div>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="resources.html">Resources</a></div>
<ul class="submenus" style="width: 8em">
<li><a href="resources.html">49ers Resources</a></li>
<li><a href="resources.html">Statistical Resources</a></li>
<li><a href="resources.html">49er fansites</a></li>
<li><a href="resources.html">49ers Gear</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="salarycap.html">Salary Cap</a></div>
<ul class="submenus">
<li><a href="salarycap.html">Salary Cap 101</a></li>
<li><a href="salarycap.html">2006</a></li>
<li><a href="salarycap.html">2007</a></li>
<li><a href="salarycap.html">2008</a></li>
<li><a href="salarycap.html">2009</a></li>
<li><a href="salarycap.html">2010</a></li>
<li><a href="salarycap.html">2011</a></li>
<li><a href="salarycap.html">2012</a></li>
<li><a href="salarycap.html">Sources</a></li>
<li><a href="salarycap.html">Disclaimer</a></li>
<li><a href="salarycap.html">Staff Analysis</a></li>
</ul>
</li>


<li class="mainitems">
<div class="headerlinks"><a href="draft.html">The Draft</a></div>
<ul class="submenus">
<li><a href="draft.html">Niners Draft History</a></li>
<li><a href="draft.html">Draft Prospects</a></li>
<li><a href="draft.html">Staff Analysis</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="about.html">About Us</a></div>
<ul class="submenus">
<li><a href="about.html">Site Information</a></li>
<li><a href="about.html">Staff</a></li>
<li><a href="about.html">Contact Us</a></li>
</ul>
</li>


</ul>

</body>
</html>
Pennimus
03-01-2006, 01:28 PM
Have you tried


#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0 auto;
list-style: none;
}



?
The Reverend
03-02-2006, 01:20 AM
No, that didn't work.
_Aerospace_Eng_
03-02-2006, 01:47 AM
<html>
<head>
<style type="text/css">

#csstopmenu {
margin:0 auto;
padding:0;
list-style:none;
width:780px;
}
#csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 2px solid gold;
border-left-width: 0;
background-color: #800000;
width:127px;
}

.headerlinks a{
font-weight: bold;
font-size: 14px;
color: gold;
width:100%;
display:block;
text-align:center;
}

.submenus{
display: none;
width:100%;
position: absolute;
top: 1.2em;
left: 0;
background-color: #800000;
border: 1px solid gold;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
color: gold;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: gold;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type="text/javascript">

// CSS Top Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep this credit intact
startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>
</head>
<body>

<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="index.html">Home</a></div>
</li>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://forum.ninercaphell.com">Forum</a></div>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="resources.html">Resources</a></div>
<ul class="submenus" style="width: 8em">
<li><a href="resources.html">49ers Resources</a></li>
<li><a href="resources.html">Statistical Resources</a></li>
<li><a href="resources.html">49er fansites</a></li>
<li><a href="resources.html">49ers Gear</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="salarycap.html">Salary Cap</a></div>
<ul class="submenus">
<li><a href="salarycap.html">Salary Cap 101</a></li>
<li><a href="salarycap.html">2006</a></li>
<li><a href="salarycap.html">2007</a></li>
<li><a href="salarycap.html">2008</a></li>
<li><a href="salarycap.html">2009</a></li>
<li><a href="salarycap.html">2010</a></li>
<li><a href="salarycap.html">2011</a></li>
<li><a href="salarycap.html">2012</a></li>
<li><a href="salarycap.html">Sources</a></li>
<li><a href="salarycap.html">Disclaimer</a></li>
<li><a href="salarycap.html">Staff Analysis</a></li>
</ul>
</li>


<li class="mainitems">
<div class="headerlinks"><a href="draft.html">The Draft</a></div>
<ul class="submenus">
<li><a href="draft.html">Niners Draft History</a></li>
<li><a href="draft.html">Draft Prospects</a></li>
<li><a href="draft.html">Staff Analysis</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="about.html">About Us</a></div>
<ul class="submenus">
<li><a href="about.html">Site Information</a></li>
<li><a href="about.html">Staff</a></li>
<li><a href="about.html">Contact Us</a></li>
</ul>
</li>


</ul>

</body>
</html>
The Reverend
03-02-2006, 06:04 AM
Thanks, it's the correct width now, but it's still not centered.
_Aerospace_Eng_
03-02-2006, 06:34 AM
My bad, was testing in FF only. Try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">

#csstopmenu {
margin:0 auto;
padding:0;
list-style:none;
width:780px;
}
#csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 2px solid gold;
border-left-width: 0;
background-color: #800000;
width:127px;
}

.headerlinks a{
font-weight: bold;
font-size: 14px;
color: gold;
width:100%;
display:block;
text-align:center;
}

.submenus{
display: none;
width:100%;
position: absolute;
top: 1.2em;
left: 0;
background-color: #800000;
border: 1px solid gold;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
color: gold;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: gold;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type="text/javascript">

// CSS Top Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep this credit intact
startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>
</head>
<body>

<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="index.html">Home</a></div>
</li>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://forum.ninercaphell.com">Forum</a></div>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="resources.html">Resources</a></div>
<ul class="submenus" style="width: 8em">
<li><a href="resources.html">49ers Resources</a></li>
<li><a href="resources.html">Statistical Resources</a></li>
<li><a href="resources.html">49er fansites</a></li>
<li><a href="resources.html">49ers Gear</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="salarycap.html">Salary Cap</a></div>
<ul class="submenus">
<li><a href="salarycap.html">Salary Cap 101</a></li>
<li><a href="salarycap.html">2006</a></li>
<li><a href="salarycap.html">2007</a></li>
<li><a href="salarycap.html">2008</a></li>
<li><a href="salarycap.html">2009</a></li>
<li><a href="salarycap.html">2010</a></li>
<li><a href="salarycap.html">2011</a></li>
<li><a href="salarycap.html">2012</a></li>
<li><a href="salarycap.html">Sources</a></li>
<li><a href="salarycap.html">Disclaimer</a></li>
<li><a href="salarycap.html">Staff Analysis</a></li>
</ul>
</li>


<li class="mainitems">
<div class="headerlinks"><a href="draft.html">The Draft</a></div>
<ul class="submenus">
<li><a href="draft.html">Niners Draft History</a></li>
<li><a href="draft.html">Draft Prospects</a></li>
<li><a href="draft.html">Staff Analysis</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="about.html">About Us</a></div>
<ul class="submenus">
<li><a href="about.html">Site Information</a></li>
<li><a href="about.html">Staff</a></li>
<li><a href="about.html">Contact Us</a></li>
</ul>
</li>


</ul>

</body>
</html>