PDA

View Full Version : css menu help

esthera
06-13-2006, 06:38 PM
below is my html and css code. this is for a css dropdown menu.
My problem is I want the whole menu to be a witdh of 775 and I can't seem to get it that width. (it's not going wide enough)
Please advise what I have to do to set it that width. I tried to set the width of each li but if I go any larger then it is then it just pushes one of th li to the next line.

thanks




<html>
<link href="s.css" rel="stylesheet" type="text/css">
<script type="text/javascript">

startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("dmenu");
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>

<body>


<ul class="topmenu" id="dmenu">
<li class="topmenuli"><a href="default.asp" class="topmenutitle">Home</a>
</li>
<li class="topmenuli"><a href="aboutus.asp" class="topmenutitle">About Us</a>
</li>

<li class="topmenuli"><a href="" class="topmenutitle">Our Services</a>
<ul class="submenuul">
<li class="submenuli"><a href="services.asp">Services</a></li>
<li class="submenuli"><a href="funds.asp">Fundraising /a></li>

</ul>
</li>
<li class="topmenuli"><a href="fund.asp" class="topmenutitle">Fundraising Tools</a>
</li>
<li class="topmenuli"><a href="contact.asp" class="topmenutitle">Contact Us</a>
</li>
<li class="topmenuli"><a href="sitemap.asp" class="topmenutitle">SiteMap</a>
</li>
</ul>

<br><br>
<div class="content">
everthi els here


</div>

</body>
</html>





/* minimum menu requirements for functionality */

.topmenuul{
list-style-type:none;
margin:0;
padding:0;

}

.topmenuli{
list-style-type:none;
float:left;
}

.topmenutitle{
display:block;
width:122px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #000000;
}

.topmenutitle2{
display:block;
width:130px;
}

.submenuul{
list-style-type:none;
position:absolute;
margin: 0;
padding:0;
display:none;
}

.submenuli a{
display:block;
width:250px;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
display: block;
}

#dmenu li>ul {
top: auto;
left:auto;
}

#content {
clear: left;

}
/* menu design */

#dmenu {
font-family: Arial, Helvetica, Sans-Serif;
font-size:12px;
padding-left:0px;
}

.topmenuul {

}

.topmenutitle {
/*text-indent:3px;*/
text-decoration: none;
border:1px solid #000000;
/*padding:3px;*/
line-height:14px;
}

.submenuul {
margin-top:-1px;
background-color:#E7F7FF;
background-position: top left;
background-repeat: repeat-x;
border-top:1px solid #000000;
border-bottom:2px solid #000000;
border-right:2px solid #000000;
border-left:7px solid #FF0000;

}

.submenuli a{
padding:3px;
text-decoration: none;
color: #000000;

}

.submenuli a:hover{
text-decoration: none;
background:#336699;
color: #FFFFFF;
}
esthera
06-14-2006, 06:27 AM
does anyone have any idea on what i can do for this?
_Aerospace_Eng_
06-14-2006, 07:07 AM
Does anyone have any patience? You didn't even wait a day. Others need help too. 775 / 6 doesn't divide too well. 780 / 6 does. 780 is the max you can go if you don't want a horizontal scrollbar on an 800x600 resolution. Why did you choose 775? Try this
<!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=utf-8" />
<title></title>
<style type="text/css">
/* minimum menu requirements for functionality */
#container{
width:775px;
margin:auto;
}

.topmenuli{
list-style-type:none;
float:left;
margin:0;
padding:0;
width:129px;
}
* html .topmenuli{
width:127px;
}
.topmenutitle{
display:block;
width:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #000000;
}

.topmenutitle2{
display:block;
width:100%;
}

.submenuul{
list-style-type:none;
position:absolute;
margin: 0;
padding:0;
display:none;
}

.submenuli a{
display:block;
width:250px;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
display: block;
}

#dmenu li>ul {
top: auto;
left:auto;
}

/* menu design */

#dmenu {
font-family: Arial, Helvetica, Sans-Serif;
font-size:12px;
margin:0;
padding:0;
list-style:none;

color:#FFF;
}

.topmenuul {

}

.topmenutitle {
/*text-indent:3px;*/
text-decoration: none;
border:1px solid #000000;
/*padding:3px;*/
line-height:14px;
}

.submenuul {
margin-top:-1px;
background-color:#E7F7FF;
background-position: top left;
background-repeat: repeat-x;
border-top:1px solid #000000;
border-bottom:2px solid #000000;
border-right:2px solid #000000;
border-left:7px solid #FF0000;

}

.submenuli a{
padding:3px;
text-decoration: none;
color: #000000;

}

.submenuli a:hover{
text-decoration: none;
background:#336699;
color: #FFFFFF;
}
</style>
<script type="text/javascript">

startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("dmenu");
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>
<div id="container">
<ul id="dmenu">
<li class="topmenuli"><a href="default.asp" class="topmenutitle">Home</a></li>
<li class="topmenuli"><a href="aboutus.asp" class="topmenutitle">About Us</a></li>
<li class="topmenuli"><a href="" class="topmenutitle">Our Services</a>
<ul class="submenuul">
<li class="submenuli"><a href="services.asp">Services</a></li>
<li class="submenuli"><a href="funds.asp">Fundraising </a></li>
</ul>
</li>
<li class="topmenuli"><a href="fund.asp" class="topmenutitle">Fundraising Tools</a></li>
<li class="topmenuli"><a href="contact.asp" class="topmenutitle">Contact Us</a></li>
<li class="topmenuli"><a href="sitemap.asp" class="topmenutitle">SiteMap</a></li>
</ul>
<div class="content"> everthi els here </div>
</div>
</body>
</html>
Avril
06-14-2006, 07:08 AM
#dmenu li>ul {
top: auto;
left:auto;
}

Can't help much but this seems wrong to me ...?
_Aerospace_Eng_
06-14-2006, 07:10 AM
No its right, its there for the browsers that understand it. auto doesn't work correctly in IE so its only given to CSS2 compliant browsers like Firefox and Opera.