logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 01-12-2011, 08:43 PM   #1
elijahnow
 
Join Date: Jan 2011
Posts: 5
Default Spry Menu Alignment Problems

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,
elijahnow is offline   Reply With Quote
Old 01-12-2011, 11:04 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Link please.
If you cannot put it somewhere temporarily on the web, can you paste your code in.
domedia is offline   Reply With Quote
Old 01-13-2011, 01:19 AM   #3
elijahnow
 
Join Date: Jan 2011
Posts: 5
Default

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 is offline   Reply With Quote
Old 01-16-2011, 03:58 AM   #4
elijahnow
 
Join Date: Jan 2011
Posts: 5
Default

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/
elijahnow is offline   Reply With Quote
Old 01-16-2011, 03:33 PM   #5
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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/...y-menubars.php

http://www.dwcourse.com/dreamweaver/...-menu-bars.php
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 01-17-2011, 06:16 PM   #6
elijahnow
 
Join Date: Jan 2011
Posts: 5
Default

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/
elijahnow is offline   Reply With Quote
Old 01-17-2011, 06:19 PM   #7
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

OK, those borders are in the following rules:

Code:
/* 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
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 01-17-2011, 07:11 PM   #8
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Quote:
Originally Posted by elijahnow View Post
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

Code:
	ul.MenuBarVertical li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}
Quote:
Originally Posted by elijahnow View Post
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:

Code:
/* 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;
}
Quote:
Originally Posted by elijahnow View Post
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).
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 01-19-2011, 01:40 AM   #9
elijahnow
 
Join Date: Jan 2011
Posts: 5
Default

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/
elijahnow is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:41 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com