PDA

View Full Version : Spry Menu Alignment Problems


elijahnow
01-12-2011, 08:43 PM
Hello,
I'm working on my first site, and I'm just about done with my first page. The only problems I'm having at the moment are with my vertical spry dropdown menu.

I had the page like I wanted except for a white outline around my menu and sub menu, other than the lines the menu was fine. I kept playing with the CSS STYLES settings and finally got rid of the lines, but now the menu and sub menu items are justified left instead of centered and the sub menu stays open and lays overtop the menu.

I've tried all I could to fix it, any help would be greatly appreciated.
Thanks,

domedia
01-12-2011, 11:04 PM
Link please.
If you cannot put it somewhere temporarily on the web, can you paste your code in.

elijahnow
01-13-2011, 01:19 AM
Thanks domedia,
I hope this is what you need. I'm new to building websites so I'm lost when it comes to code.
I'm going to try and test the site tomorrow night.


<div id="menu_vert">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="#">Homepage</a> </li>
<li><a href="#">About Us</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Portfolio</a>
<ul>
<li><a href="#">Advertising</a> </li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">iD</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Awards</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="copy_paragraph_1">

elijahnow
01-16-2011, 03:58 AM
I finally got a page uploaded.

In explorer only a couple of the menu bars show up, but in google and firefox all of the menus, and dropdown menus are there. A

The dropdown menus are open and on top of the menus.

I've tried and tried to fix it but haven't gotten anywhere, I probably made things worse.
Thanks for your help,

http://www.crazycreekdesign.com/

DWcourse
01-16-2011, 03:33 PM
Well to start with you've set the width of some elements to 0 which makes no sense which means there are probably a number of other issues. I'd start over and check out these articles first:

http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php

http://www.dwcourse.com/dreamweaver/more-spry-menu-bars.php

elijahnow
01-17-2011, 06:16 PM
I started over again and it's looking better.
But I have white lines going around the menu bar and the dropdown menu bar. This is where I started going wrong the last time as I tried to get rid of the lines.
I have a few questions.

How do I get rid of these lines around the menu and menu dropdown bars?

In explorer the menu bars are white instead of transparen. I know that Explore doesn't always work like Firefox and Google etc. but is there a way to make transparent work with explorer?

Is there a way to adjust the position of the dropdown menu bar, like raising them or moving them closer to or even a little over the menu bar?

In the mouse off position can I make the dropdown menu bar have a background color, and the menu bar not have a background color?

Thanks,


http://www.crazycreekdesign.com/

DWcourse
01-17-2011, 06:19 PM
OK, those borders are in the following rules:

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 1px solid #CCC;
}


You can delete the rules or set them to border: none

DWcourse
01-17-2011, 07:11 PM
In explorer the menu bars are white instead of transparen. I know that Explore doesn't always work like Firefox and Google etc. but is there a way to make transparent work with explorer?

In the browser hacks section at the end of the CSS

ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}


Is there a way to adjust the position of the dropdown menu bar, like raising them or moving them closer to or even a little over the menu bar?

Adjust the margins in this rule:

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}


In the mouse off position can I make the dropdown menu bar have a background color, and the menu bar not have a background color?

You'll need to add a new rule for the drop down menu bars.

ul.MenuBarVertical a currently covers all links (main menu and submenu)

Add a rule ul.MenuBarVertical ul a to cover just the submenus (notice the extra ul in the selector).

elijahnow
01-19-2011, 01:40 AM
Thanks Jc for all the information and help (replies and tutorials).
Hopefully having done this right once, plus having the tutorials will make things a lot easier the time.

I have most of the menu done, I'll try to fix the arrows and the drop down menu bars in a couple of days when I have the time to work on them again.

If you check what I've done so far please let me know if I did everything right.
Thanks again,

http://www.crazycreekdesign.com/