Posts in Category "Real World Use"

Navigation bars — to Spry or not to Spry?

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&gt; </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 &amp; 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>&quot;Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. &quot;</p>
</blockquote>
 
<h3>Blockquote</h3>
<blockquote>
<p>&quot; Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. &quot;</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 &copy; 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>&nbsp;</p>
</div> <!--end floatRight -->
 
<div>
<p>&copy; 1995-2011 | <a href="http://alt-web.com/">Alt-Web Design &amp; 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>

Getting rid of blue borders around image links

Here’s a really annoying problem that we often hear people asking about: how do I get rid of a blue border that surrounds an image when I make the image a link?

Annoying blue border around a linked image

Annoying blue border around a linked image

Some people will tell you to simply set a zero border in the Dreamweaver Property inspector, but according to David Powers, you should really use CSS instead.

Here’s how to do it:

  1. Create a new CSS rule for linked images, either in the head of the document or in an external style sheet. (We recommend the latter.)
    The new rule looks like this:
    a img { border: none; }
    Note: If you don’t know anything about creating CSS rules, you’ll need to read up on some basic CSS info first.
  2. If you’ve created the rule in a <style> block in the head of your document, you don’t need to do anything else. If you’ve created the rule in an external style sheet, make sure the sheet is linked to the page that’s displaying the annoying border.

Creating a CSS style to remove borders automatically removes the blue border from ALL images that you’ve turned into links. If you use an external style sheet, and link it to all the pages in your site, the same rule affects every image link in your site. This is a much more efficient method of eliminating those pesky borders than adding zero to the border property for every image in your website!

Thanks to David Powers, who originally posted this helpful tip in the Adobe Dreamweaver Forum.

 

Adobe recommends: CSS Inspect

Over the past week, we publicized some high-value content from adobe.com and  other community sites. Hopefully you enjoyed these posts and found the resources useful. This will be the last post in the “Adobe Recommends” series (for now!)

Continuing our trip along the CSS highway, we have this recommended video by Dreamweaver Product Manager, Scott Fegette:

Dreamweaver CS5 — CSS Inspect

This video shows you how you can use CSS Inspect in Dreamweaver’s Live view to inspect and edit your CSS structure.

Adobe recommends: Enhanced support for CSS3 in Dreamweaver CS5.5

Over  the past week, we publicized some high-value content from adobe.com and other community sites. Hopefully you enjoyed these posts and found the resources useful. Today is our last day of the “Adobe Recommends” series.

Continuing our trip along the CSS highway, we now move to CSS3 with our next recommendation, by Preran Kurnool:

Enhanced support for CSS3 in Dreamweaver CS5.5

This blog post takes you through using box shadow, text shadow, border radius, and border image properties in Dreamweaver CS5.5.

Give it a spin and let us know what you think!

Adobe recommends: Automatically attaching style sheets to new documents

Here’s another one from the great David Powers:

Automatically attaching a style sheet to a new document

This article shows you how to attach style sheets to new documents that you’re creating in Dreamweaver — no need to fuss with the attachment process afterwards!

Adobe recommends: New CSS features in Dreamweaver CS5

Continuing our trip along the CSS highway, our next recommendation is a video by Dreamweaver superstar Brian Wood:

New CSS features in Dreamweaver CS5

The video demonstrates some of the most exciting new CSS features in Dreamweaver: new CSS layouts, CSS inspect, and CSS enable/disable.

Adobe recommends: CSS page layout basics

Continuing on our quest for great layout tips, our next recommendation comes from yours truly:

CSS page layout basics

This article takes you through the A-Z of what makes up a basic CSS layout. It also shows you how to use some of the CSS layouts that come packaged with Dreamweaver.

Adobe recommends: Layout 101

Here’s one from Dreamweaver veteran Gary White: Layout 101

This resource contains some outdated information (about Macromedia Dreamweaver!) but some of the basic concepts around CSS layout are still relevant and clearly presented. Useful for total newbies!

Adobe recommends: Spry Menu Bar resources

Here is another great resource for all you Spry Menu Bar widget users: Ryan Grabenstein’s Spry Menu Bar Resources.

This resource page contains a number of different types of tips and tutorial pieces (including video) for creating, editing, and customizing a Spry Menu Bar widget in Dreamweaver.

Adobe recommends: Customizing a Spry Menu Bar widget

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what’s been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.

Our second recommendation is a piece by David Powers:

Customizing a Spry Menu Bar widget

The tutorial takes you through some of the most common styling tasks for the difficult-to-style Spry Menu Bar widget in Dreamweaver.

Give it a spin and let us know what you think!