PDA

View Full Version : Wacky spry menu bar backwards and will not drop down


hpsug2010
07-19-2010, 07:15 AM
Hi, thank you for reading my post. I just read the 10 commandments, however I am too late for that...

My spry menu will not drop down when uploaded onto my site, it is in bulleted form. When I view it in dreamweaver cs4 the menu is backwards (home page on the right, etc). When I preview it in IE, it is in the correct order and drops down.

Also, I managed to get a cool wiggly effect when I mouse over the menu, they move from right to left. I'd like to say that was on purpose.... :) How'd I do that? If you see any other things that will cause problems, please let me know. How do I view it in a browser other than IE? Maybe thats a silly question, sorry. I appreciate your help in advance. Here is the code:

[/URL]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd (http://www.holly-parker.com)">
<html xmlns="[URL]http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Holly Parker - Fashion, Commercial, Swim, Runway Model Los Angeles</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="mainstyling" -->
<style type="text/css">
<!--
body {
font: georgia;
background: #FFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000;
font-family: "Forgotten Futurist Shadow";
background-image: url();
background-color: #000;
padding-top: 0px;
}
.oneColFixCtrHdr #container {
width: 1200px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #000000;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
color: #FFF;
}
.oneColFixCtrHdr #header {
padding-top: 5px;
padding-bottom: 0px;
color: #FFF;
background-color: #000;
position: static;
text-align: center;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
font-family: Tahoma, Geneva, sans-serif;
font-size: 60px;
color: #F39;
font-weight: bolder;
text-align: center;
margin-bottom: 0px;
}
.oneColFixCtrHdr #mainContent {
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
font-family: "SF Foxboro Script";
color: #FFF;
font-size: 18px;
background-color: #000;
font-weight: bold;
text-align: center;
padding-top: 0px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
color: #FCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
background-color: #000;
text-align: center;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
font-size: 10px;
}
.navigation {
background-color: #000;
text-align: center;
float: right;
padding-left: 60px;
}
-->
</style>
<!-- TemplateEndEditable -->
<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<h1><img src="../images/holly-logo-top.jpg" width="875" height="139" /></h1>
<table width="800" border="0" cellspacing="0" cellpadding="4">
<tr>
<td bgcolor="#FFE8FF" class="navigation"><!-- TemplateBeginEditable name="navieditable" -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html">MAIN</a></li>
<li><a href="../pone.html" class="MenuBarItemSubmenu MenuBarItemSubmenu">PHOTOS</a>
<ul>
<li><a href="../pone.html">un</a></li>
<li><a href="../ptwo.html">deux</a></li>
<li><a href="../pthree.html">trois</a></li>
<li><a href="../pfour.html">quatre</a></li>
</ul>
</li><ul>
<li><a href="../pone.html">Un</a></li>
<li><a href="../ptwo.html">Deux</a></li>
<li><a href="../pthree.html">Trois</a></li>
<li><a href="../pfour.html">Quatre</a></li></ul>
<li><a href="../me.html">ME</a></li>
<li><a href="../connect.html">CONNECT</a></li>
<li><a href="../video.html">VIDEO</a></li><li>
<a href="../links.html">LINKS</a></li>
</ul>
<!-- TemplateEndEditable --></td>
</tr>
</table>
<!-- end #header -->
</div>
<div id="mainContent"><!-- TemplateBeginEditable name="bodyedit" -->
<p><img src="../images/holly-parker-pink-beauty-web.jpg" width="265" height="349" /></p>
<!-- TemplateEndEditable -->
<!-- end #mainContent --></div>
<div id="footer"><!-- TemplateBeginEditable name="footeredit" -->
<p>HOLLY PARKER 2010 ALL RIGHTS RESERVED </p>
<!-- TemplateEndEditable --></div></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

DWcourse
07-19-2010, 08:16 PM
You're javascript and css links are to files on your computer, so even if you fix things, it's not going to work online:

<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

And, since it's a Spry menubar, we'd need to see your SpryMenuBarHorizontal.css file as well. The best thing would be to post your page online and then post a link here.

hpsug2010
07-20-2010, 04:27 AM
Hi DW, thank you for your reply. I think thats exactly it, that the files are on my computer. When I go to the website on my computer the spry menu shows correctly except will not drop down, but on another computer all I get is the bullets. How do I save the css and java links in the correct place please?

Here is the link:

www.holly-parker.com (http://www.holly-parker.com)

I also created another website based on the same template, and uploaded it to a seperate folder so it can be previewed. Would this be causing problems? Im having the same issue with the spry menu on that page as well. Thank you again.

edbr
07-20-2010, 04:42 AM
where you have
<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js (http://www.dreamweaverclub.com/forum/view-source:file:///C%7C/Users/HOLLY/Desktop/Holly%20Parker%20Website/SpryAssets/SpryMenuBar.js)" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css (http://www.dreamweaverclub.com/forum/view-source:file:///C%7C/Users/HOLLY/Desktop/Holly%20Parker%20Website/SpryAssets/SpryMenuBarHorizontal.css)" rel="stylesheet" type="text/css" />

it should be
<script src="SpryAssets/SpryMenuBar.js (http://www.dreamweaverclub.com/forum/view-source:file:///C%7C/Users/HOLLY/Desktop/Holly%20Parker%20Website/SpryAssets/SpryMenuBar.js)" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css (http://www.dreamweaverclub.com/forum/view-source:file:///C%7C/Users/HOLLY/Desktop/Holly%20Parker%20Website/SpryAssets/SpryMenuBarHorizontal.css)" rel="stylesheet" type="text/css" />

this would be done automatically by DW if you define your site correctly, however if you correct that on your pages in code view it will correct it

hpsug2010
07-20-2010, 05:17 AM
Thank you, I tried editing it in my code and it just gave me bullets everywhere. Is there a different procedure to getting my css and java scripts correctly defined? How do I define my site correctly? Sorry.
Thank you for your help.

edbr
07-20-2010, 06:42 AM
live its still the same . as for definitions there is a tutorial on this forum in tutorials (who'd a thought it),