CSS Problems - alignment, padding etc.

**Demonolith** · 11-27-2008, 07:50 PM

Hi all,

I've been having trouble trying to create a drop-down menu for quite a while now and seem to be having the best luck getting what I'm looking for from the great selection available here!

-------------

I first of all tried this menu:

http://www.dynamicdrive.com/dynamici...rome/index.htm

But found that the text in the sub-menus were appearing out-of-sorts in IE (it worked fine in Firefox and Safari though).

Here's my version

-------------

I also tried the following menu:

http://www.dynamicdrive.com/style/cs...el_css_menu_2/

But with this one I can't get the menu item to stretch the full way across like in the first menu, nor do I know how to change the individual width of each sub-menu.

Here's my version (I'm just after noticing that this menu doesn't work properly for me online using Firefox but is fine offline).

-------------

I want to provide as much information as possible to help find out what to do so I'll provide any additional information need or try to clarify what I want (I would've provided my version of the code for each menu but the character limit wouldn't allow it.

This has been nagging at me for a long time now and I'm reaching the end of my tether. Any help at all will be really appreciated.

Niall

**bluewalrus** · 11-29-2008, 07:06 AM

This will work for one drop down level (I think). There's nothing you have in the second or third levels so I didnt know if you had them cause the code you got had it or you actually did want to use it. If you want more level try this:http://htmldog.com/articles/suckerfish/dropdowns/

Code:

<!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>Untitled Document</title>
<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>
<style rel="stylesheet" type="text/css" />
#nav ul {
display:inline;
}
#nav {
width:744px;
display:inline;
background-color:#000000;
overflow:hidden;
}
#nav a {
color:#FFFFFF;
padding: 3px;
display: block;
font:bold 12px Arial Narrow, Verdana, Arial, sans-serif;
background: #000000;
text-decoration:none;
border-right: 1px solid #778;
}
#nav a:hover {
text-decoration:underline;
color:#000000;
background:#FFFFFF;
}
#nav li li a {
/*can set a width here*/
}
#nav li li a:hover {
/*can set a width here*/
}
#nav li ul li a:hover {
/*can set a width here*/
}
#nav li {
list-style:none;
float: left;
position: relative;
cursor: default;
}
#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
}
#nav li>ul {
	top: auto;
	left: auto;
}
#nav li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}
#nav li:hover ul, #nav li.over ul {
	display: block;
	border:1px #000000 solid;
}
</style>

</head>
<body>
<div id="myslidemenu" class="jqueryslidemenu">
<ul id="nav">
<li id="first">
<div><a href="index.htm">HOME
</a></div>
</li>
<li>
<div><a href="history.htm">HISTORY</a></div>
<ul>
<li><a href="introductionderrydioceseparishes.htm">AN INTRODUCTION TO THE PARISHES OF THE DERRY DIOCESE</a></li>
<li><a href="ourstory.htm">OUR STORY</a></li>
<li><a href="parishpriests.htm">PARISH PRIESTS AND CURATES</a></li>
</ul>
</li>
<li>
<div><a href="newsandevents.htm">NEWS AND EVENTS</a></div>
<ul>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>  
</ul>
</li>
<li>
<div><li><a href="events.htm">EVENTS 2008</a></li></div></li>
<div><li><a href="ministrygroups.htm">MINISTRY GROUP</a></li></div>
<li>
<div><a href="newsandevents.htm">NEWS AND EVENTS</a></div>
<ul>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<div><li><a href="youngpeople.htm">YOUNG PEOPLE</a></li></div>
<div><li><a href="school.htm">SCHOOL</a></li></div>
<div><li><a href="guestbook.php">GUESTBOOK</a></li></div>
<div><li><a href="links.htm">LINKS</a></li></div>
<li  id="last">
<div><li><a href="contactus.htm">LINKS</a></li></div>
</li>
</ul></div>
</body>
</html>

**Demonolith** · 12-01-2008, 06:44 PM

Thanks very much for the reply.

Forgive my ignorance, but when I add that to a new HTML document all I get is a list of links instead of a menu.

Niall

**Snookerman** · 12-01-2008, 09:24 PM

That's because there are some mistakes in the code. Here is a fixed version that validates as well:

HTML Code:

<!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>Untitled Document</title>
<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>
<style type="text/css">
#nav ul {
	display:inline;
}
#nav {
	width:744px;
	display:inline;
	background-color:#000000;
	overflow:hidden;
}
#nav a {
	color:#FFFFFF;
	padding: 3px;
	display: block;
	font:bold 12px Arial Narrow, Verdana, Arial, sans-serif;
	background: #000000;
	text-decoration:none;
	border-right: 1px solid #778;
}
#nav a:hover {
	text-decoration:underline;
	color:#000000;
	background:#FFFFFF;
}
#nav li li a {
/*can set a width here*/
}
#nav li li a:hover {
/*can set a width here*/
}
#nav li ul li a:hover {
/*can set a width here*/
}
#nav li {
	list-style:none;
	float: left;
	position: relative;
	cursor: default;
}
#nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
}
#nav li>ul {
	top: auto;
	left: auto;
}
#nav li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}
#nav li:hover ul, #nav li.over ul {
	display: block;
	border:1px #000000 solid;
}
</style>
</head>
<body>
<div id="myslidemenu" class="jqueryslidemenu">
  <ul id="nav">
    <li id="first"><a href="index.htm">HOME</a></li>
    <li><a href="history.htm">HISTORY</a>
      <ul>
        <li><a href="introductionderrydioceseparishes.htm">AN INTRODUCTION TO THE PARISHES OF THE DERRY DIOCESE</a></li>
        <li><a href="ourstory.htm">OUR STORY</a></li>
        <li><a href="parishpriests.htm">PARISH PRIESTS AND CURATES</a></li>
      </ul>
    </li>
    <li><a href="newsandevents.htm">NEWS AND EVENTS</a>
      <ul>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="events.htm">EVENTS 2008</a></li>
    <li><a href="ministrygroups.htm">MINISTRY GROUP</a></li>
    <li><a href="newsandevents.htm">NEWS AND EVENTS</a>
      <ul>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="youngpeople.htm">YOUNG PEOPLE</a></li>
    <li><a href="school.htm">SCHOOL</a></li>
    <li><a href="guestbook.php">GUESTBOOK</a></li>
    <li><a href="links.htm">LINKS</a></li>
    <li id="last"><a href="contactus.htm">LINKS</a></li>
  </ul>
</div>
</body>
</html>

**bluewalrus** · 12-02-2008, 12:16 AM

I dont see any difference in our codes. Does that work for you Demonolith?

**Snookerman** · 12-02-2008, 04:28 PM

Originally Posted by bluewalrus

I dont see any difference in our codes.

You had misplaced some div containers and added a list item without the ul tag.

**Demonolith** · 12-03-2008, 11:23 PM

Sorry I took so long to reply but I unfortunately don't have access to any sort of HTML editor at work.

Snookerman's refinements to bluewalrus's code does indeed work, but not as I want it to.

In IE the sub-menu's are not aligned properly and cannot be hovered over, in Firefox it is all messed up. I also still can't alter the width on individual links.

Thanks for the help so far.

Niall

**bluewalrus** · 12-04-2008, 03:23 AM

Can you link where you have the new code?

**Demonolith** · 12-04-2008, 02:49 PM

Sure thing, here it is:

http://www.greencastleparish.com/code.htm

Niall

**bluewalrus** · 12-04-2008, 03:47 PM

I don't see what you mean when you say its messed up in firefox. This is what it looks like in my firefox. http://www.christophermacdonald.net/looks.png.
I can't test in IE to see what you mean. Can you show me a screen shot of your Firefox or describe messed up?