PDA

View Full Version : Menu and Header Width Frustration


lloydmav
06-23-2007, 02:36 PM
Hi,

I'm a beginner with all this and I'm getting frustrated with trying to make the menubar (spry) and header image the same width as my page.

I set up a container div, and inside a header, navbar, story and sidebar section, also a footer div. I have also set up a corresponding CSS style for these divs. I set the container width to 780 pixels, but when I set I set header width and menubar width to 780 pixels, although they all line up perfectly in design mode, when I view it in the IE 6 preview, they are both shorter than the container.....

can anyone help me with this headache??

thanks:-D

lloyd

here is the code:

<<A href="mailto:%@LANGUAGE="JAVASCRIPT">%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!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>index</title>
<style type="text/css">
<!--
body {
background-color: #25371E;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
background-color: #FFFFFF;
width: 780px;
margin-right: auto;
margin-left: auto;
}
#header {
background-color: #000000;
width: 780px;
margin-right: auto;
margin-left: auto;
}
#story {
background-color: #FFFFFF;
padding: 10px;
width: 410px;
float: left;
}
#navbar {
width: 780px;
}
#sidebar {
background-color: #FFFFFF;
margin: 10px;
padding: 8px;
width: 310px;
float: right;
border: thin solid #990000;
}
#footer {
background-color: #FFFFFF;
padding: 10px;
clear: both;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="Images/webhead.JPG" alt="header image" width="780" height="93" class="image-centre" /></div>
<div class="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Member</a></li>
<li><a href="#">Community</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Classes</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="#">Rooms</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Shop</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="#">PT Studio</a></li>
</ul>
</div>
<div id="story">
<p>Services</p>
<ul type="disc">

</ul>
<p>&nbsp;</p>

<p><img src="Images/lift.jpg" alt="class" width="100" height="162" /></p>
</div>
<div id="sidebar">
<p>Members Views</p>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

domedia
06-23-2007, 05:42 PM
Spry is pretty new, have not used it. I personally think everyone that has time should check it out and start helping each other with it. I saw a presentation by Adobe on it in march and was amazed.

Anyone else using Spry that can help out in this?

lloydmav
06-24-2007, 04:30 AM
I think that spry isn't the actual issue, because before I inserted the spry the header image was not fitting the container width aswell. I also just installed firefox. When I previewed the page in firefox, I was amazed to find that everything lined up perfectly....

Now I'm further confused!!!

Thanks