Hi,
I'm a beginner with all this and I'm getting frustrated with trying to make the navbar 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
lloyd
I'm using dreamweaver cs3, 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> </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>
I'm a beginner with all this and I'm getting frustrated with trying to make the navbar 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
lloyd
I'm using dreamweaver cs3, 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> </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>