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 08-31-2012, 10:26 AM   #1
Angel
Angel's Avatar
 
Join Date: Aug 2012
Posts: 9
Exclamation Spry menu displays on the left in all browsers

I have created a horizontal spry menu, it looks perfectly centred while in dreamweaver itself, but when I preview it in any browser the menu is always on the left, can anyone advise? I'd really like the menu to be showing up in the centre in all browsers, bear with me I am new to dreamweaver.

Thanks,

Jodie
Angel is offline   Reply With Quote
Old 08-31-2012, 02:47 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Hire a pro or post the URL
domedia is offline   Reply With Quote
Old 08-31-2012, 04:33 PM   #3
Angel
Angel's Avatar
 
Join Date: Aug 2012
Posts: 9
Default

Hi there, I don't have a URL but have the spry menu code:


@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/************************************************** *****************************

LAYOUT INFORMATION: describes box model, positioning, z-order

************************************************** *****************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
padding: 0;
list-style-type: none;
font-size: 12pt;
cursor: default;
width: auto;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: fixed;
height: auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
float: none;
visibility: inherit;
clear: none;
font-family: Arial, Helvetica, sans-serif;
clip: rect(auto,auto,auto,auto);
background-color: #FFFFFF;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
font-family: Arial, Helvetica, sans-serif;
height: auto;
width: auto;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
background-color: #FFFFFF;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
height: 32em;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #CC99FF;
padding: 0.5em 0.75em;
color: #000000;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #9966FF;
color: #00CCFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/************************************************** *****************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

************************************************** *****************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
width: px;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: center;
background: #FFF;
}
}

Does this help?
Angel is offline   Reply With Quote
Old 08-31-2012, 07:15 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

We need to see also your other CSS and the HTML. I'm pretty sure that it's the position: fixed you used in ul.MenuBarHorizontal that's causing the trouble. I need to see the rest to be sure.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 08-31-2012, 07:18 PM   #5
Angel
Angel's Avatar
 
Join Date: Aug 2012
Posts: 9
Default

Here is my other 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>
<style type="text/css">
<!--
body {
background-image: url(../Documents/HeavenlyAngel/images/star_background_02.gif);
}
body,td,th {
color: #FFFFFF;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 36px;
color: #00FFFF;
font-style: italic;
}
.style3 { font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 36px;
color: #00FFFF;
}
.style6 {font-size: 24px; font-family: Arial, Helvetica, sans-serif;}
-->
</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="left"></div>
<div align="center">
<p align="center"><em><strong><span class="style1">Jodie Hucker Spiritualist Medium</span></strong></em></p>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><em><a href="#"><strong>Home</strong></a> </em></div>
</li>
<li>
<div align="center"><em><a href="#"><strong>About Me</strong></a></em></div>
</li>
<li>
<div align="center"><strong><a href="#"><em>Readings</em></a></strong></div>
</li>
<li>
<div align="center"><strong><a href="#"><em>Order</em></a></strong></div>
</li>
<li>
<div align="center"><strong><a href="#"><em>Testimonials</em></a></strong></div>
</li>
<li>
<div align="center"><em><a href="#"><strong>Psychic Info</strong></a></em></div>
</li>
<li>
<div align="center"><strong><a href="#"><em>Links</em></a> </strong></div>
</li>
<li>
<div align="center"><strong><a href="#"><em>Contact</em></a></strong></div>
</li>
</ul>
<p>&nbsp;</p>
</div>
<p align="center"><img src="../Documents/HeavenlyAngel/images/EastStaffordshire-20120821-00099-1-1-1.jpg" width="259" height="235" /></p>
<div align="center" class="style2">
<p>Hello, and welcome to my website!</p>
</div>
<p align="justify" class="style6">I am a practising Psychic and Medium and am offering Photograph Readings, these can be self photographs or a photograph of a loved one in spirit. They cost just £7.00 each, these can be ordered through my &quot;Order&quot; page.</p>
<p align="justify" class="style6">I have been aware of my abilities since I was a small child. As a Psychic I am able to give insights on your life and answer specific questions. </p>
<p align="justify" class="style6">As a Medium I am Clairvoyant and Clairsentient which enables me to see and feel Spirit and I am able to connect with your loved ones and pass on messages from the world of spirit, reuniting family, friends and pets in the spirit world with their loved ones here.</p>
<p align="center" class="style3">Disclaimer:</p>
<p align="justify" class="style6"> Psychic and Mediumistic Readings are provided for entertainment purposes only. Psychic phenomena, incl. Mediumship havenít been scientifically proven. No Psychic or Mediumistic readings can be guaranteed to be accurate.</p>
<p align="left">&nbsp;</p>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Angel is offline   Reply With Quote
Old 08-31-2012, 07:19 PM   #6
Angel
Angel's Avatar
 
Join Date: Aug 2012
Posts: 9
Default

If you need any more code than that let me know...
Angel is offline   Reply With Quote
Old 08-31-2012, 07:44 PM   #7
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

The problem is that everything is just hanging loose (sorry, can't find a better wording at the moment). There is no layout (kind of) Your navigation has position: fixed so it will go by default to the top left corner of the screen. The main 'div align="center' (which is by the way a deprecated method to center content) is not holding the navigation anymore. If you set an element to position: fixed, that element will be taken out of the normal flow of the HTML document. Thus out of your <div align="center"> and therefore it's hanging loose in the top keft corner, cause that's the default position of a fixed element. (top: 0; left: 0).

So... and now you want a fix for that. Just delete the position: fixed and it will go back in div align="center". Or you might need to change fixed to relative, but I don't know for sure. Why did you mess in the first place with the CSS of spry menu, if you don't know what you're doing?
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 08-31-2012, 07:46 PM   #8
Angel
Angel's Avatar
 
Join Date: Aug 2012
Posts: 9
Default

out of the options relative, fixed, absolute and static are best to have? or is it best not to have one at all?
Angel is offline   Reply With Quote
Old 08-31-2012, 07:49 PM   #9
Angel
Angel's Avatar
 
Join Date: Aug 2012
Posts: 9
Default

did what you said and its still on the left
Angel is offline   Reply With Quote
Old 08-31-2012, 07:56 PM   #10
Angel
Angel's Avatar
 
Join Date: Aug 2012
Posts: 9
Default

still no joy.
Angel 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 07:48 PM.


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