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 07-28-2008, 06:15 PM   #1
confucious
 
Join Date: Jun 2008
Posts: 26
Default Spry drop down menu displaying wrong

I am having supreme trouble with my spry menu!

I have created a CSS two column, header and footer template and inserted logo etc at top in a table. Now I want to put a spry menu below, either in the header or just below the header and above the two body sections. I can insert a menu into a separate Ap Div, or even into the header below the table, but my menu displays as just words heaped on top of eachother when I preview in any browser (though it looks fine in Dreamweaver CS3). I am thinking there is a CSS conflict perhaps?? I have changed a lot of the attributes of the spry menu css...could this be the problem? Is it that the main body sections are floated left and right? Here is the code:
Any help would be GREATLY appreciated!!!

<!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>
<link href="root folder/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style>
<link href="css rules/shoppingcart.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style4 {font-size: 14px}

#apDiv8 {
position:absolute;
left:6px;
top:160px;
width:960px;
height:31px;
z-index:1;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style6 {font-size: 12px}
-->
</style>
</head>

<body class="twoColFixLtHdr">
<div id="apDiv8">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div id="container">
<div id="header">
<table width="949" border="0" cellpadding="10">
<tr>
<th width="280" height="154" scope="col"><img src="root folder/imagesandlogos/burapalogo.jpg" alt="logo" width="250" height="112" align="left" /></th>
<th width="358" scope="col"><p align="center" class="style6 style4">Burapa carries only the finest </p>
<p align="center" class="style6 style4">quality home and personal style </p>
<p align="center" class="style6 style4">product from Thailand, Laos,</p>
<p align="center" class="style6 style4">Nepal and Tibet</p></th>
<th width="92" scope="col"><p align="center"><img src="root folder/imagesandlogos/smallshoppingcart.jpg" alt="shoppingcart" width="65" height="44" align="top" /></p>
<p align="center"><span class="style6">my </span></p>
<p align="center" class="style6">shopping </p>
<p align="center" class="style6">cart</p></th>
<th width="56" nowrap="nowrap" scope="col"><p><img src="root folder/imagesandlogos/planesmaller.jpg" alt="shipping" width="50" height="37" /></p>
<p align="center" class="style6">shipping</p>
<p align="center" class="style6">faqs</p>
<p align="center">&nbsp;</p></th>
<th width="51" nowrap="nowrap" scope="col"><p><img src="root folder/imagesandlogos/Mail1.gif" alt="contact" width="38" height="47" /></p>
<p class="style6">contact</p>
<p class="style6">info</p>
<p>&nbsp;</p></th>
</tr>
</table>
<p>
<p align="center" class="style4">&nbsp;</p>
</div>
<div class="fltlft" id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container -->
</div>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
confucious is offline   Reply With Quote
Old 07-29-2008, 02:59 AM   #2
confucious
 
Join Date: Jun 2008
Posts: 26
Default update

Just an update - I seem to have solved the problem by switching to a template that was just a header, main body, and footer. I think this worked better as I didn't have the Float left and Float right attributes included in the original CSS sheet.
confucious is offline   Reply With Quote
Old 07-29-2008, 05:33 AM   #3
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

you need to make your code a bit more organised generally, you have several links to stylesheets and still have sections in your head section, it makes debugging pretty difficult and time consuming very easy to make conflicts.
Glad you have it sorted now
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr 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 01:41 PM.


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