The Dreamweaver and Spry forums are flooded with requests for help on editing the notoriously difficult Spry Menu Bar widget. The widget is Dreamweaver’s built-in solution for dragging and dropping a navigation menu to your web page.
Sometimes, however, a Spry Menu Bar widget might not be entirely necessary for your navigation, especially if your navigation is going to be a single row of “buttons” (links) without any dropdown menus.
Dreamweaver moderator and Community Expert Nancy O. offers one template that gives you an idea of how easy it can be to create a navigation out of an unordered list and some CSS styling. Below is Nancy O.’s code for a page with such a navigation. Copy the code below and paste it into a blank document. All of the CSS is in the head of the page (no external style sheets) so you can see how everything works. The sample also provides a marvelous example of a basic 2-column CSS layout.
NOTE: Nancy’s original source doc is at: http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
<!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>CSS 2-column, Fixed-width, Centered Template</title>
<link href="../alt-style/MyFooter.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*
==========================================
Layout by Alt-Web Design and Publishing
http://www.alt-web.com
July 2010
==========================================
*/
/*
zero out default browser values on everything
*/
* {margin:0; padding:0; line-height:100%; font-size: 100%}
/*
adds scrollbar to short pages in Mozilla
*/
html {font-size:90%; height:102%; margin-bottom:1px; }
body {
background:#330000;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
#Wrapper {
width: 970px; /*
width in px, % or ems
*/
margin:12px auto 0 auto; /*
centers page
*/
border: 10px solid #990000;
overflow:hidden; /*
float containment
*/
/*
header and footer get their background color from this rule
*/
background-color: #CC6666;
}
#Header {
width: 100%;
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#Header h1 {
padding: 12px;
font-size: 2.25em;
text-shadow: #330000 0.1em 0.1em 0.2em;
color: #FFF;
}
#Header h2 {
padding: 0 12px;
letter-spacing: 3px;
text-transform:uppercase;
}
#Header address {
color: #FFF;
font: bold oblique 14px/1.2em Arial, Helvetica, sans-serif;
line-height: 1.5em;
padding: 12px;
}
/*
TOP MENU
*/
#navlist {
font-size: 12px;
font-weight: bold;
text-align: center;
background: #330000;
padding: 0.65em;
width: 100%;
}
#navlist li{
list-style: none;
margin: 0;
display:inline;
}
#navlist li a {
text-decoration: none;
background: #330000;
padding: 1em;
border-left: 1.2em solid #CC3333;
line-height: 2em;
}
#navlist li a:link { color: #CCC999; }
#navlist li a:visited { color: #CC6666; }
#navlist li a:hover,
#navlist li a:active,
#navlist li a:focus{
text-decoration: underline;
background-color: #990000;
}
#navlist li a.current {
color: #FFCC00;
border-left: 12px solid #FFCC00;
}
/*
end top menu
*/
/*
Right side
*/
#rightSidebar {
float:right;
width:32.5%;
margin:0;
padding: 0 0 0 20px;
border-left: 2px dotted maroon;
background:#FFFFBD;
min-height: 32em;
}
/*
Main
*/
#MainContent {
text-align:left;
color:#663333;
background: #EAEAEA;
margin: 0;
padding: 0;
}
#MainContent ul, #MainContent li {
margin-left: 18px;
padding-bottom: 5px;
padding-left: 10px;
list-style: square outside;
}
#MainContent blockquote {
font:italic 1.2em Georgia, "Times New Roman", Times, serif;
color: #996666;
}
#Footer {
text-align: center;
padding: 10px 0;
color: #FFF;
height: 1%;
font-weight: bold;
font-size: 0.65em;
margin: 0;
}
/*
test Links
*/
a{font-weight: 700; text-decoration: none}
a:link {color:#FF0000;}
a:visited {color:#CC6666;}
a:hover,
a:active,
a:focus{text-decoration: underline}
a img{border: none;}
/*
Text styles
*/
h1,h2,h3,h4,h5 {
font-size:1.2em;
line-height:1.8em;
padding: 10px 20px;
}
p {font-size: 1em; line-height: 1.5; padding:5px 20px;}
/*
RE-USABLE CLASSES
*/
/*
text align
*/
.left {text-align: left}
.center {text-align: center}
.right {text-align: right}
/*
floats and clearing
*/
.floatRight {
float:right;
width:32.5%;
height:auto;
margin:0;
padding: 0 0 0 20px;
}
.floatLeft {
float: left;
width: 65%;
height:auto;
margin:0;
padding: 0;
}
.clearfloat {
clear:both;
height: 1px;
visibility: hidden;
}
</style>
<!--[if IE]>
<style type="text/css">
/* CSS Conditional Comments */
body {font-size: 76%; zoom:100%}
</style>
<![endif]-->
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div>
<h1>CSS Basic 2-column, centered layout </h1>
<!--end floatLeft --></div>
<div>
<p>#header</p>
<h2>COMPANY NAME </h2>
<address>address, city, region <br />
Phone and Fax Numbers </address>
<!--end floatRight --> </div>
<!--IMPORTANT! clear floats after they are no longer needed with p, br or hr class -->
<hr />
<!--end header --></div>
<!--BEGIN menu-->
<div id="navcontainer">
<ul id="navlist">
<li><a href="#MainContent">Skip to Content> </a></li>
<li><a href="#">Current Page </a></li>
<li><a href="#">Menu Item 2 </a></li>
<li><a href="#">Menu Item 3 </a></li>
<li><a href="#">Menu Item 4 </a></li>
<li><a href="#">Menu Item 5 </a></li>
</ul>
<!--end navlist -->
<!--end navcontainer -->
</div>
<!--end top menu -->
<!--Begin MainContent -->
<div id="MainContent">
<!--BEGIN left column -->
<div>
<p>#mainContent</p>
<p>This layout tested and works well in Firefox 3+, Chrome 9+, Safari 3+, IE6, 7, 8 & 9.</p>
<p> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
<h3>View Page Source in Browser to see the CSS and HTML code.</h3>
<h2>Heading 2</h2>
<p>Your content goes here. Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. </p>
<h3>Heading 3</h3>
<p>Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima.</p>
<p>End #mainContent </p>
<!--end left column -->
</div>
<!--BEGIN right column -->
<div id="rightSidebar">
<p>#rightSidebar</p>
<h3>Blockquote</h3>
<blockquote>
<p>"Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. "</p>
</blockquote>
<h3>Blockquote</h3>
<blockquote>
<p>" Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. "</p>
</blockquote>
<p>Unordered List links</p>
<ul>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
</ul>
<p>end #rightSidebar</p>
<!--end rightSidebar -->
</div>
<!--IMPORTANT! clear floats after right column with a p, br, or hr class -->
<hr />
<!--end MainContent --></div>
<!--Begin footer -->
<div id="Footer">
<p>#Footer © 2011, Your footer text goes here</p>
<!--end Footer --></div>
<!--end page Wrapper --></div>
<!--remove Myfooter from your web page -->
<div id="Myfooter">
<div>
<h3>Help Feed the Kitty</h3>
<p>Your support helps us continue these efforts.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="1006004" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="Donate Button" />
<img alt="Credit Cards Accepted" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<p> </p>
</div> <!--end floatRight -->
<div>
<p>© 1995-2011 | <a href="http://alt-web.com/">Alt-Web Design & Publishing</a> | California</p>
<p> Web : Graphics : Print : Media Specialists</p>
<p><a href="../index.shtml">Home</a> | <a href="../links.shtml">Links</a> | <a href="../tools.shtml">Tools</a> | <a href="../Free-CSS-Templates.shtml">Templates</a> | <a href="../contact.shtml">Contact</a> </p>
<br />
</div> <!--end footertext -->
</div><!--end Myfooter -->
</body>
</html>
