Resolved CSS Problems - alignment, padding etc. [Archive]

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/dynamicindex1/chrome/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 (http://www.greencastleparish.com/css2.html)

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

I also tried the following menu:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_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 (http://greencastleparish.com/css.htm) (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/

<!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[//><!]]></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:

<!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[//><!]]></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

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?

Demonolith

12-04-2008, 07:36 PM

Here it is in Firefox:

http://greencastleparish.com/ff.jpg

The sub-menus have a large section of white space to its left. I also still don't know how to change the length of each link individually (or at just the sub-menus while having the main menu links evenly spaced along 750px).

And in Internet Explorer:

http://greencastleparish.com/ie.jpg

The problem in IE is that attempting to hover over a sub-menu causes it to disappear.

Niall

Snookerman

12-04-2008, 08:11 PM

This should remove the white space in FF:

#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
padding: 0;
}

Actually adding padding: 0; on other elements seems to work as well.

bluewalrus

12-04-2008, 09:36 PM

This shows the class "test" for one link and how it sets the width differently for that one. Its 1 pixel just to show. You can make more classes like that and set each one the width you want. This has Snookerman's padding method in it too. This also has 750px width for nav from the 744 it had before.

<!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[//><!]]></script>
<style type="text/css">
#nav ul {
display:inline;
}
#nav {
width:750px;
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;
border:#000000 1px solid;
}
#nav li li a {
border:1px #000000 solid;}
#nav li li a:hover {
border:1px #000000 solid;}
#nav li ul li a:hover {
border:1px #000000 solid;
/*can set a width here*/
}
#nav li {
list-style:none;
float: left;
position: relative;
cursor: default;
}
.test{
width:1px;
}
#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
padding:0;
}
#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;
}
</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="#" class="test">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>

Demonolith

12-06-2008, 05:11 PM

Thanks for the help changing the width of sub-menus bluewalrus, but unfortunately, I'm still lost on a few other things.

When moving through a sub-menu it sometimes disappears as though there's a gap between each links, how can I close that gap up while retaining the white line as a seperator?

How can I make the main menu reach along the full 750px with equal padding between links?

Niall

Snookerman

12-06-2008, 06:57 PM

I took a look at the menu you did using jQuery Multi Level CSS Menu #2 (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/) and fixed the mistakes you made (closing lists and list items to early or too late). Here is the code:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><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="#">NEWS AND EVENTS1</a></li>
<li><a href="#">NEWS AND EVENTS2</a></li>
<li><a href="#">NEWS AND EVENTS3</a></li>
</ul>
</li>
<li><a href="events.htm">EVENTS 2008</a></li>
<li><a href="ministrygroups.htm">MINISTRY GROUP</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</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><a href="contactus.htm">LINKS</a></li>
</ul>
<br style="clear: left" />
</div>
Good luck!

Demonolith

12-07-2008, 10:25 PM

Thanks Snookerman, much appreciated.

I'm still having problem with the issues I mentioned in my previous post, can anyone help with them?

Niall

bluewalrus

12-07-2008, 11:02 PM

Which code are you using now?

http://www.greencastleparish.com/code.htm or have you switched back since Snookerman fixed your code

Demonolith

12-08-2008, 05:01 PM

I was viewing Snookerman's code offline, I've now uploaded it here:

http://www.greencastleparish.com/ehbeesee.htm (running out of names for the pages! :o)

As you can see I added it to a full page to see how it looks, in doing so I notice that the white space seperate the menu from the welcome banner is a little thicker than I'd like, I added border-top: 1px solid white; to the CSS).

I also renamed a couple of the words on the menu.

I've changed the Javascript a little to remove the arrows (doesn't seem like there's much room for them, I may put the sub-menu arrows back in later if needed).

I've made a few minor changes to the CSS such as what I mentioned above.

I added a top border to the CSS for sub-menus but this causes the lines seperating links to appear too thick.

When I go to MINISTRY GROUPS > Folder 2.1 the new sub-menu that opens is a little too far to the right (leaving a gap) and a little too far down.

CSS
http://www.greencastleparish.com/Scripts/jqueryslidemenu.css

Javascript
http://www.greencastleparish.com/Scripts/jqueryslidemenu.js

Niall

Snookerman

12-08-2008, 05:37 PM

The space is because of this (I think):

.jqueryslidemenu ul {
list-style-type:none;
margin:0;
padding:3px;
}
Try adding this to the code:

.jqueryslidemenu ul ul {
padding:0;
}

Demonolith

12-08-2008, 08:29 PM

Thanks Snookerman, that worked!

:D

Snookerman

12-08-2008, 08:33 PM

You're welcome! If there are no more problems, you can go to your first post, edit, go advanced and add the Resolved prefix to this thread.

Demonolith

12-08-2008, 09:15 PM

Still got a few more problems I'm afraid:

I added a top border to the CSS for sub-menus but this causes the lines seperating links to appear too thick

The white space seperating the menu and welcoming banner is a little thicker than I'd like (this (http://www.greencastleparish.com) is how I'd like it to look, I added border-top: 1px solid white; to the CSS

How can I make the main menu reach along the full 750px with equal padding between links (I think they're slightly off-centre)?

How can I remove the last grey seperator (after CONTACT US) without removing the others?

It could just be me, but it seems the text is slightly worse in IE than FF. Do you think so?

Niall

Snookerman

12-08-2008, 09:41 PM

Could you please post a link to the newest page, the other one doesn't seem to have the padding:0 fix yet. I can already answer to your last point. The quality of the text is a user setting. Depending on what subpixel rendering (http://en.wikipedia.org/wiki/Subpixel_rendering) you are using, the quality will differ.

Demonolith

12-08-2008, 09:53 PM

Sorry pal, forgot to upload the fix:

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

Niall

Snookerman

12-08-2008, 10:11 PM

I added a top border to the CSS for sub-menus but this causes the lines seperating links to appear too thick
Try adding the red part to the css:

.jqueryslidemenu ul li ul li a {
-x-system-font:none;
border-color:#777788 #777788 gray;
border-style:solid;
border-width:1px;
border-bottom:none;
font-family:Arial Narrow,Verdana,Arial,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0;
padding:5px;
width:160px;
}

The white space seperating the menu and welcoming banner is a little thicker than I'd like (this is how I'd like it to look, I added border-top: 1px solid white; to the CSS
I don't see any difference between the one you have now and the one you would want it to look like. They seem to have the same height.

How can I make the main menu reach along the full 750px with equal padding between links (I think they're slightly off-centre)?
I'll get back to you on that later.

How can I remove the last grey seperator (after CONTACT US) without removing the others?
Give the link an id:

<a id="contactuslink" href="contactus.htm">CONTACT US</a>
And add this to the css:

.jqueryslidemenu ul li a#contactuslink {
border-right:none;
}

Demonolith

12-08-2008, 10:34 PM

I added the border-bottom:none; line of code and although it fixed the problem, in doing so it removed the bottom line:

http://www.greencasstleparish.com

I'm also not sure (as my FF isn't working properly), but in FF the menu text doesn't appear to be in the middle vertically, it's fine in IE though.

Thanks,

Niall

Snookerman

12-08-2008, 10:45 PM

Yeah, I thought that would happen. What you can do is give the last links in every submenu a class, and then give it a bottom border:

<a class="lastlink" href="#">NEWS AND EVENTS3</a>

.lastlink {
border-bottom:1px;
}
Do this only for the bottom link in every submenu.

Regarding the vertical align, I'll take a look later.

Demonolith

12-09-2008, 11:35 AM

I've added that code and uploaded it, but it doesn't seem to be having any effect.

It's not really a big deal, but since adding an ID to CONTACT US an icon has appeared beside it in Dreamweaver and moving the link onto a new line. Is there any way to hide it so that doesn't happen?

http://www.greencastleparish.com/dw.jpg

The whole thick white line (not that sort of thick white line!) thing is strange to me, it appears to thick in my browser yet appears fine on yours and my brother's.

Niall

Snookerman

12-09-2008, 04:02 PM

Have to tested it in a browser? I wouldn't care some much about what Dreamweaver's wysiwyg is showing. Please upload it and post link to the site if the problem remains and I'll take a look at it.

Demonolith

12-09-2008, 04:44 PM

It appears fine in any browser, I just asked because it can be a little off-putting when working in Dreamweaver.

Not a big deal, just wondered if it could be hidden.

Niall

Edit: Yikes, I just noticed that in Safari the menu is on two lines instead of one.

Demonolith

12-09-2008, 10:09 PM

I've update the page by changing some of the link names and adding sub-menus.

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

But can someone please tell me how I can add a right arrow (no down arrow) to the PARISH LITURGY GROUP link that turns from white to black when hovered over?

I also would like to know how to give a link a second ID as I wanted to make text for inactive links grey and have the background stay black when hovered over.

Niall

Snookerman

12-09-2008, 10:26 PM

You can separate id values with a space:

<a id="value1 value2" href="#">Link</a>

bluewalrus

12-10-2008, 04:57 AM

To add the right arrow your probably going to want to make the whole nav bar little bigger. Say you want history to have the arrow:

<li><a href="history.htm" class="arrow">HISTORY</a>

.arrow {
background: url(arrowimagename.jpg) right no-repeat;
}

Then add class arrow to any link you want to have an arrow. Don't forget to make the arrow.

Also you should put all your css into a style sheet that is linked over. That way you don't have to change every page everytime you want to change something. Like say you want the background color on one of the hovers to be blue. Right now you'd have to go into each page and change that element. With the link style sheet you just open it and change that one element and all your pages then have it. Saves time.

This is what you use to link it. Goes in the head. <link href="nameoffileandlocation.css" rel="stylesheet" type="text/css" />

Demonolith

12-10-2008, 10:33 PM

I tried adding the space like you said Snookerman but it doesn't work and cancels out the other CSS assigned.

bluewalrus, I can't get the arrow to appear even after following your instructions. I added it to jqueryslidmenu.css. I understand what you mean about needing to increase the width of the navbar but I only want to add an arrow next to PARISH LITURGY GROUP.

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

http://www.greencastleparish.com/Scripts/jqueryslidemenu.css

http://www.greencastleparish.com/Scripts/jqueryslidemenu.js

http://www.greencastleparish.com/Images etc./menurightarrow.gif

Niall

Snookerman

12-11-2008, 08:13 AM

Sorry, I realized that only works for class values:

<a class="value1 value2" href="#">Link</a>
If you have an id value you could just ad a class value instead of a "second id value":

<a id="value1" class="value2" href="#">Link</a>

Demonolith

12-11-2008, 06:55 PM

Snookerman

12-11-2008, 10:29 PM

Snookerman,

I tried adding a class value:

<a id="parishliturgygrouplink" class="inactive">

But it not working, I'm guessing my CSS is wrong:

.jqueryslidemenu ul li a#inactive {
color:#CCCCCC;
}

Niall

If you have a class value, you need to put a period (.) in front of the value in css. A number sign (#) is used in front of id values.

The css code you are using now looks for an anchor (a) with the id value inactive inside a list item (li) which is inside an unordered list (ul) which is in any tag with the class jqueryslidemenu.

Assuming that the anchor you want to target is inside a tag with the class jqueryslidemenu, your code should look like this:

.jqueryslidemenu ul li a.inactive {
color:#CCCCCC;
}

You should also remember that id values are unique, meaning you should only use an id value for just one element per page. The class values can be used for several elements per page. So the parishliturgygrouplink value should only be used for just that anchor in your page.

Demonolith

12-11-2008, 10:41 PM

Works a charm now, thanks for the great explanation!

The arrow is still puzzling me though.

Snookerman

12-11-2008, 10:48 PM

You're welcome! About the arrow, do you want a picture of an arrow or one of these: >? Also, please add a link to your absolute latest page with all the changes so I know what to work with.

Demonolith

12-11-2008, 11:13 PM

I have everything up to date right now.

I'd like to try this arrow:

http://www.greencastleparish.com/Images etc./menurightarrow.gif

Is it possible to have it turn from white to black when hovered over (as the menu uses a black background, white when hovered over)?

Niall

Snookerman

12-11-2008, 11:21 PM

Try this in your css:

#contactuslink {
background-image:url(white.jpg);
background-repeat:no-repeat;
}
#contactuslink:hover {
background-image:url(black.jpg);
}

Demonolith

12-12-2008, 11:30 AM

Try this in your css:

#contactuslink {
background-image:url(white.jpg);
background-repeat:no-repeat;
}
#contactuslink:hover {
background-image:url(black.jpg);
}

I've added that, but what's its purpose?

Snookerman

12-12-2008, 02:56 PM

You wanted a white arrow to be displayed in the contact link and a black arrow when hovering. That will do just that.

Of course, you need to actually have the images white.jpg and black.jpg and you need to specify the correct path to them (and change their names to whatever you wish).

Demonolith

12-12-2008, 05:30 PM

I had to edit that code a little as I wanted it to apply only to PARISH LITURGY GROUPS under MINISTRY GROUPS, here are my changes:

#ministrygroupslink {
background-image:url(Images etc./menurightarrowwhite.gif);
background-repeat:no-repeat;
}

#ministrygroupslink:hover {
background-image:url(Images etc./menurightarrowblack.gif);
}

This still isn't working for, did I make a mistake when changing it? Do I need to make changes to the Javascript?

http://www.greencastleparish.com/Scripts/jqueryslidemenu.js

I realise by using #minstrygroupslink it will apply to all but I plan on giving a uniques ID later on.

Snookerman

12-12-2008, 10:28 PM

Could you please post a link to the newest site, in case you made a new page again.

bluewalrus

12-12-2008, 11:01 PM

Take the css out of your head and overwrite your current file with this this has all your elements and makes the arrows work.

EDIT:forgot this line if you've looked at this since
@charset "utf-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Arial Narrow, Verdana, Arial, sans-serif;
}
.style7 {color: #FFFFFF}
.style6 {
font-size: 24px;
font-weight: bold;
color: #009900;
}
.style9 {
font-size: 12px;
font-weight: bold;
color: #00FF00;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.style13 {color: #C0C0C0}
.style14 {
color: #009900;
font-weight: bold;
}
.style21 {font-size: 12px;
color: #CCCCCC;
font-weight: bold;
}
.style26 {font-size: 15px}
.style23 {
font-weight: bold;
color: #3A9900;
font-style: italic;
}
.style28 {font-size: 16px}
.style31 { color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
.style33 {
font-size: 24px;
}
.jqueryslidemenu {
font:bold 12px Arial Narrow, Verdana, Arial, sans-serif;
background: #000000;
width: 750px;
height: 20px;
border-top: 1px solid white;
}

.jqueryslidemenu ul{
margin: 0;
padding: 3px;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display:block;
width:12.5%
background: #000000; /*background of tabs (default state)*/
color: white;
padding: 0px 7px;
border-right: 1px solid #778;
color: #FFFFFF;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: white; /*tab link background during hover state*/
color: black;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul ul {
padding:0;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font:bold 12px Arial Narrow, Verdana, Arial, sans-serif;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
background:#000000;
border-top: 1px solid #778;
border-left: 1px solid #778;
border-right: 1px solid #778;
border-bottom:none;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: #000000;
}

.jqueryslidemenu ul li a.inactive {
color:#999999;
cursor:default;
background:#000000;
}

.jqueryslidemenu ul li a#contactuslink {
border-right:none;
}

.jqueryslidemenu ul li ul li a#historylink {
width:315px;
}

.jqueryslidemenu ul li ul li a#eventslink {
width:275px;
}

.jqueryslidemenu ul li ul li a#ministrygroupslink {
width:242px;
background:url("http://www.greencastleparish.com/Images etc./menurightarrowwhite.gif") right no-repeat #000000;
}
.jqueryslidemenu ul li ul li a:hover#ministrygroupslink {
background:url("http://www.greencastleparish.com/Images etc./menurightarrowblack.gif") right no-repeat #ffffff;}
.jqueryslidemenu ul li ul li a#parishliturgygrouplink {
width:128px;
}

.jqueryslidemenu ul li ul li a#youngpeoplelink {
width:275px;
}

.jqueryslidemenu ul li ul li a#schoollink {
width:217px;
}

lastlink {
border-bottom: 1px;
}

Demonolith

12-14-2008, 12:40 PM

Thanks bluewalrus, really tidied up my code. I'll do that for the rest of the pages on my site once I've got the menu working how I'd like.

The arrow is now working great too. I was thinking of adding updated/new icons, would this be done in much the same way as the arrow?

I'd really like the main menu to pad itself out equally across the full 750px, at the moment it's left aligned which creates a large amount of space on the far right (if I simply centre it there'll be too much unused space), I tried changing the padding from 7px to 8px but this caused it to move onto 2 lines). I thought the following thread might work as a point of reference but I can't get it to work:

http://www.dynamicdrive.com/forums/showthread.php?t=39612

Here's the latest version of the page:

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

bluewalrus

12-14-2008, 04:53 PM

You want the whole page centered you mean? The menu looks like its centered over all the content right now to me. But all of the content with the menu is to the left. If you do want it centered use this but the 3 a's to enlarge the text will need to go in the swf because right now they are passing the 750px you've set as the limit and that is why it will look about 15px's off. You could put them in the flash movie or under the nav bar or something else.

table {
margin:auto;
}
.jqueryslidemenu {
margin:auto;
}

Demonolith

12-14-2008, 06:51 PM

I didn't mean the entire page, just the text within the menu. I've uploaded an image to show more clearly what I mean:

http://www.greencastleparish.com/menu.jpg

table { seems to move everything to the centre of the page while .jqueryslidemenu { does so for the menu.

bluewalrus

12-14-2008, 07:25 PM

Yea that's what i thought you wanted for the menu. Try this then

#contactuslink {
border-right:none;
padding-left:14px;
}

Demonolith

12-14-2008, 08:39 PM

That changes the padding for CONTACT US but everything else stays the same (i.e. CONTACT US now occupies more space than the other links).

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

Snookerman

12-14-2008, 09:40 PM

Try this:

.jqueryslidemenu ul{
margin: 0;
padding: 3px;
list-style-type: none;
margin-left:4px;
}

Demonolith

12-14-2008, 10:31 PM

That works great, thanks again!

Is it possible to give each link a little more space? I know that increasing the padding by 1 pixel is too much. It's not that important since there isn't really much extra space left but it'd be nice if it was possible.

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

Snookerman

12-14-2008, 10:40 PM

Since you don't have enough space to make every link bigger, you could choose some of the links, but that would just make it look uneven so I suggest you leave it like that, I reckon it looks good as it is now.

Snookerman

12-14-2008, 10:45 PM

I just noticed that the code I gave you targets both the first and the second level lists which creates a gap between the second and the third level. Change it to this instead:

.jqueryslidemenu ul{
margin: 0;
padding: 3px;
list-style-type: none;
}
.jqueryslidemenu > ul{
margin-left:4px;
}
That will target only the direct child (i.e. the first level list) to the menu.

Demonolith

12-14-2008, 11:08 PM

I think I'll keep it that way then.

One more thing though, is it possible to turn text relevant to a page green and make it inactive (e.g. if a user was on the home page HOME on the menu would be green and inactive, much like I have it on the original menu). I may not use this method but would like to know anyway incase I do.

Snookerman

12-15-2008, 07:54 AM

Sure, just remove the link (replace it with #) and add an id value to it:

<li><a id="selected" href="#">HOME</a></li>
Then add this to your css:

#selected {
color:#66FF00;
}
#selected:hover {
background-color:#000000;
cursor:default;
}

Also, in case you didn't see my last post, change this:

.jqueryslidemenu ul{
margin: 0;
padding: 3px;
list-style-type: none;
margin-left:4px;
}
Into this:

.jqueryslidemenu ul{
margin: 0;
padding: 3px;
list-style-type: none;
}
.jqueryslidemenu > ul{
margin-left:4px;
}
That will get rid of the margin you have on the second and third level menus.

Demonolith

12-15-2008, 07:14 PM

Brilliant, that's working now!

The bottom border line is still posing a problem though, I tried adding the following:

.jqueryslidemenu ul li a:hover{
background: white; /*tab link background during hover state*/
color: black;
border-bottom:1px solid #778;
}

But that doesn't exactly work (it causes the sub-menus to move down slightly when hovered over and the middle lines to appear double their size).

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

Snookerman

12-15-2008, 08:52 PM

Give all the links at the bottom a class value, e.g. "bottomlink" like so:

<a class="bottomlink" id="historylink" href="http://www.greencastleparish.com/parishpriests.htm">PARISH PRIESTS AND CURATES</a>
And add this to your css:

.bottomlink:hover {
border-bottom:1px solid #778;
}
Don't forget to remove the border you added in your last post.

Demonolith

12-15-2008, 11:00 PM

Thank you so much Snookerman and bluewalrus, it's looking just how I want it now. I hope I can somehow return the favour in the future! :)

I'd prefer not to mark this thread as Resolved just yet as I need to do another drop-down menu for a different site, this time using images instead of standard text.

I'm confident I'll be able to do it based on what you've both taught me, but just in case I have any further queries I'd like to keep it open.

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

Niall

Snookerman

12-15-2008, 11:23 PM

You're welcome. You could still mark this thread Resolved and it won't stop you from posting in it if you want to, but you do as you wish.

Regarding the site, if you want some feedback, above the map you have Move the mouse over a colour to make it's name appear but it should be its not it's which means (it is).

Good luck with your site!

Demonolith

12-16-2008, 08:22 PM

Oops, can't believe I missed that, thanks! I usually spot any grammar or spelling mistakes before it's too late.

I really appreciate any kind of feedback at all as I like to know what I'm doing right or wrong and I welcome any suggestions on improving. :)

Snookerman

12-16-2008, 08:35 PM

In that case, if I were you, I would change the sentence a bit. "Move the mouse over a colour to make its name appear" doesn't really sound good or make sense. It implies that the name of the colour itself will appear. A suggestion would be: "Move your mouse over a townland to see its name".

Demonolith

12-16-2008, 11:03 PM

I agree that townland sounds better, but it may suggest hovering over the text. What do you think about "Move the mouse over an area to make its name appear"?

It hasn't taken me long but I've already got another question!

I decided to add an icon to notify users of pages recently updated (I'll later add a similar icon for new pages). I can't get the icon to align properly though, I'd like it to appear immediately to the right of the text and moved down a little. Here it is as it is now:

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

I used the following CSS:

.jqueryslidemenu ul li ul li a.updatedicon {
width:415px;
background:url("http://www.greencastleparish.com/Images etc./updatedicon.gif") no-repeat #000000;
}
.jqueryslidemenu ul li ul li a:hover.updatedicon {
width:415px;
background:url("http://www.greencastleparish.com/Images etc./updatediconwhite.gif") no-repeat #ffffff;
}

I removed right as that would conflict with any links that include an arrow.

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

I forgot to ask, but how do I mark a thread as resolved? I can't find anything in my first post as you mentioned here earlier

Schmoopy

12-17-2008, 12:19 AM

Click on Edit (bottom right) on your very first post then click "Go Advanced" and then you should see "Title" just below "Reason for Editing", click the drop down box that says "(no prefix)" and click "Resolved".

Should do the trick.

bluewalrus

12-17-2008, 12:25 AM

its under the Title select, should say "(no prefix)" right now. Then the title of your post to the right and it's as schmoppy said in the advanced options. I just found it last week hah

Demonolith

12-17-2008, 12:06 PM

I don't see an Edit button. Should it be next to Quote?

I'm logged on, but it doesn't register my earlier posts as actually mine.

Snookerman

12-17-2008, 12:35 PM

I had that problem too but nobody believed me:
http://www.dynamicdrive.com/forums/showthread.php?t=39636 (http://www.dynamicdrive.com/forums/showthread.php?t=39636)
Ask a moderator and they will edit it for you and Resolve your problem :D.

Demonolith

12-17-2008, 02:06 PM

Ah right, thanks.

Demonolith

12-17-2008, 08:50 PM

I've aligned the icons to the right but I'd like them to appear just after the text (like how the UPDATED! icon is) instead of on the far right.

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

I realise that due to lack of space I won't be able to add those icons to the main menu, can you think of any way around that?

Demonolith

12-21-2008, 10:40 PM

Hey all,

It could be a while before I get the CSS for the other site I mentioned dones as I want to get the parish one ready for Christmas Day so I'll mark the thread as resolved (though I will still use it if I have any relevant problems or questions).

I just have one question based on opinion. Should I keep the old menu and use it alongside the new one? I ask because the parish website attracts users of all ages and I'm concerned that some older user may find it awkward to use.

An example showing the old menu (http://www.greencastleparish.com/newsandevents.htm)

An example showing the new menu (http://www.greencastleparish.com/events.htm)

Anyways, I hope you all have a very Happy Christmas and bring in the New Year in style! ;)

Niall

Snookerman

12-21-2008, 11:39 PM

Well I prefer the new one and I don't think the crossover is that big, I'm sure most of the users won't mind it.

bluewalrus

12-22-2008, 12:05 AM

I say new as well. Your new menu is easier to see when the mouse is on something and it gives them more options. I'd say 2 menus would be really confusing people might not know which to click. It isn't a hard menu if they know how to use a regular menu it's the same with more options. However if your really consider you could use a toggle that says "Use Original Menu(nav)" and have it hide the new one and load the old one when clicked.

Demonolith

12-22-2008, 03:44 PM

Thanks for the advice.

If I were to make any changes to the menu (such as the addition of sub-menus etc.) would I have to upload each page using my FTP server? I thought just uploading a template might update each page automatically but it doesn't seem to.

Can't believe I made such a huge and obvious oversight if that is the case. :(

Is there a less laborious way?

Demonolith

12-22-2008, 11:15 PM

Is there any easier way? I had a look online but came up with nothing.

At the minute I use CuteFTP (http://www.cuteftp.com).

bluewalrus

12-23-2008, 12:32 AM

Kind of... if you have dreamweaver and your ftp configured to use that to edit the pages with you can open all of the pages with the old menu...copy the new menu code into a word processing app that you can access easily go back to dreamweaver now and copy the old menu code from div start to div end (or whereever you started and ended the new one in the word processing app) then hit apple or ctrl f find and replace should open change find in to open documents and then the search to source code...then past in the copied old code into the find and at the replace field go back to the word app and copy that code then past it at the replaces field...then hit replace all and that should do it faster i'd think assuming all your old menus are the same

Demonolith

12-23-2008, 09:56 AM

I've been using a Dreamweaver template with the menu to automatically update each page I apply that template to.

I thought that by simply uploading the template it would automatically update each page online instead of having to upload each page myself (my FTP client brings up errors messages if I try to upload many files at once).

Does this make sense?

bluewalrus

12-23-2008, 01:52 PM

get filezilla this will let you open them all at the same time you can also set dreamweaver to open them with this and then you can save them all back

http://filezilla-project.org/

BLiZZaRD

12-23-2008, 03:34 PM

Seconded on the FileZilla. ( LOVE IT!)

and as far as your template thing... if you are calling it right on each page it will work by changing the parent template/page/etc.

If it isn't for you, either you have called the page wrong, or you need to clear your cache ;)

Demonolith

12-23-2008, 08:27 PM

I installed FileZilla earlier today to give it a try, but when I try to transfer multiple files I get the following message:

Status: Resolving address of ftp.freehostia.com
Status: Connecting to 66.40.52.65:21...
Status: Connection established, waiting for welcome message...
Response: 220 ProFTPD 1.2.9 Server (ProFTPD) [1.1.68]
Command: USER niadev
Response: 226 Transfer complete.
Status: File transfer successful
Status: Starting upload of C:\Users\Niall Devlin\Documents\My Work\Parish\Parish Website\newssheetarchive.htm
Command: PASV
Response: 331 Password required for niadev.
Command: PASS **********
Response: 227 Entering Passive Mode (66,40,52,65,174,101).
Command: STOR newssheetarchive.htm
Response: 150 Opening ASCII mode data connection for newssheetarchive.htm
Response: 530 Only one such user at a time.
Error: Could not connect to server
Status: Resolving address of ftp.freehostia.com
Status: Connecting to 66.40.52.65:21...
Status: Connection established, waiting for welcome message...
Response: 220 ProFTPD 1.2.9 Server (ProFTPD) [1.1.68]
Command: USER niadev
Response: 331 Password required for niadev.
Command: PASS **********
Response: 226 Transfer complete.
Status: File transfer successful
Status: Starting upload of C:\Users\Niall Devlin\Documents\My Work\Parish\Parish Website\ourstory.htm
Command: PASV
Response: 227 Entering Passive Mode (66,40,52,65,235,187).
Command: STOR ourstory.htm
Response: 530 Only one such user at a time.
Error: Could not connect to server

This only happens for some of the files in the queue, the others transfer succesfully.

I also successfully setup a remote server through Dreamweaver, but it transfers files to the wrong destination even though I've entered the correct information (it's placed outside the folder I want it to).

BLiZZaRD, I tried emptying the cache but it didn't help. Does it matter that I have the template stored in a folder seperate from the other files?

bluewalrus

12-23-2008, 11:51 PM

When you open your folder are you right clicking/ ctrl clicking and hitting view/edit and letting filezilla open dreamweaver for you? If so then after finding and replace all hit save all. Then go back to filezilla and keep hitting enter as it asks if you want to upload the new version and if it should over write the older one.

Demonolith

12-24-2008, 02:35 PM

Sorry bluewalrus, but I didn't understand any of that.

Edit: Never mind, it's uploading through DW now.

Demonolith

12-24-2008, 05:43 PM

I've now discovered that my template is overwriting things such as CSS (I will eventually place the CSS into one file as mentioned earlier but because there's so much of it and I want to get this working ASAP I will wait) and anchors.

Here's my template. (http://www.greencastleparish.com/Templates/bannerandmenu.dwt)

And an example of a page with an anchor at the top of the page. (http://www.greencastleparish.com/boliviaimmersionproject.htm)

It seems whenever I place the template it overwrites the <head> tag and I can't find a way to stop that. If I create a new page using that template and copy over any extra content however, it appears to retain the CSS styles. The anchor is still forced below the template.

Can anyone please help?