Dreamweaver CC selector Breadcrumbs

Hello,
Is anyone else having a problem with the breadcrumbs style navigation at the bottom of Dreamweaver CC?
This worked fine in CS6 before I updated my programs on the Cloud. When I click on a div, it no longer highlights that section of code in the HTML. Is this a bug?
Thank you.

Oh, well, it seems to be working now! It's very hit and miss. Sometimes it works and sometimes it doesn't. I can try and restore my preferences and see if it becomes more consistent. Has anyone else had trouble using it?

Similar Messages

Breadcrumbs in Dreamweaver CC

Does Dreamweaver has any tool to build, create or generate breadcrumbs automatically, without the need of typing everything? Or any good third party? Thanks a lot.

Hi Mario,
Found a tutorial that could help you Create Breadcrumb Links | Using Dreamweaver
Thanks,
Preran

How do I change the custom button to "other" in selector properties?

Hello all. This is my first time using DW CC2014 and coming from no background in webpage development its proving to be a little tricky. I'm following the tutorial set by David Powers https://helpx.adobe.com/dreamweaver/how-to/make-style-web-page.html?set=dreamweaver--get-s tarted--ready-to-use and I'm stuck on the part titled "style the navigation bar" Basically in my selector properties for 'mainnav ul' the fifth icon says custom instead of others as described in the video and therefor does not allow for the customizing of the navigation bar. Any assistance in clarifying this would be greatly appreciated! Thanks

My advice is to put DW away until you fully grasp HTML and CSS fundamentals. Trying to explain this stuff to someone who doesn't have a good knowledge of code basics is futile. Videos don't teach code basics. It's assumed that you already know it.
http://www.html.net/
http://w3schools.com/
http://www.csstutorial.net/
http://phrogz.net/css/HowToDevelopWithCSS.html
http://webdesign.tutsplus.com/sessions/web-design-theory/
CSS Class vs ID
http://www.htmldog.com/guides/css/intermediate/classid/
Feel free to post back if you have more questions.
Good luck!
Nancy O.

HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????

I would like to have a slow fading slideshow of a few images relating to the web page that the user is on.
I have a seperate div tag, with the space 235 x 440 pixels allowed for the images. All I want is the slideshow to fade in and out of one another using 3 or 4 photos, no text, no control panel or thumbnails or any other frills, just basic good quality photos fading in a looped slideshow.
I just want that when the page loads up that the slideshow starts automatically and slowly loops continuously until the user changes page.
I have seen animated gifs from photoshop, which are no good because the image quality is awful, and in fireworks, where it comes with either thumbnails or a control panel for the user to navigate manually the images. I don't want that. Can it be done easily in flash? or does dreamweaver have an answer?
Surely there must be a simple and basic way in dreamweaver alone to just swap/fade an image with another image a few times and thats that? no?
If it can't be done in dreamweaver, PLEASE tell me which program it can be done in and how.
Many many many thanks in advance for anyone with an easily explained solution.
Ian.

Here is the code in my header:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://aap.org/international/jquery.cycle.all.latest.js"></script><script type="text/javascript">$(document).ready(function() {    $('.slideshow').cycle({          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...     });});</script>
Here is the code in the body part of my page:
<div class="slideshow"><img alt="one" src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" /><img alt="dcsn" src="img/WebsiteSlideshow/ONEorg 1.JPEG" width="592" height="509" /><img alt="one2" src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" /><img alt="saltlakecity" src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" /></div>
Here is the code in the jquery site:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://aap.org/international/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
</script>
</head>
<body>
<div class="slideshow">
          <img src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" />
          <img src="<img src="img/WebsiteSlideshow/DSCN2051.JPG" width="592" height="509" />
          <img src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" />
          <img src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" />
          <img src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" />
    <img src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" />
    <img src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" />
    <img src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" />
     <img src="img/WebsiteSlideshow/DSCN2052.JPG" width="592" height="509" />
</div>
</body>
</html>
// process the args that were passed to the plugin fn
function handleArguments(cont, 1, fade) {
if (cont.cycleStop == undefined)
cont.cycleStop = 0;
if (options === undefined || options === null)
options = {};
if (options.constructor == String) {
switch(options) {
case 'destroy':
case 'stop':
   var opts = $(cont).data('cycle.opts');
   if (!opts)
    return false;
   cont.cycleStop++; // callbacks look for change
   if (cont.cycleTimeout)
    clearTimeout(cont.cycleTimeout);
   cont.cycleTimeout = 0;
   $(cont).removeData('cycle.opts');
   if (options == 'destroy')
    destroy(opts);
   return false;
case 'toggle':
   cont.cyclePause = (cont.cyclePause === 1) ? 0 : 1;
   checkInstantResume(cont.cyclePause, arg2, cont);
   return false;
case 'pause':
   cont.cyclePause = 1;
   return false;
case 'resume':
   cont.cyclePause = 0;
   checkInstantResume(false, arg2, cont);
   return false;
case 'prev':
case 'next':
   var opts = $(cont).data('cycle.opts');
   if (!opts) {
    log('options not found, "prev/next" ignored');
    return false;
   $.fn.cycle[options](opts);
   return false;
default:
   options = { fx: options };
return options;
else if (options.constructor == Number) {
// go to the requested slide
var num = options;
options = $(cont).data('cycle.opts');
if (!options) {
   log('options not found, can not advance slide');
   return false;
if (num < 0 || num >= options.elements.length) {
   log('invalid slide index: ' + num);
   return false;
options.nextSlide = num;
if (cont.cycleTimeout) {
   clearTimeout(cont.cycleTimeout);
   cont.cycleTimeout = 0;
if (typeof arg2 == 'string')
   options.oneTimeFx = arg2;
go(options.elements, options, 1, num >= options.currSlide);
return false;
return options;
function checkInstantResume(isPaused, arg2, cont) {
if (!isPaused && arg2 === true) { // resume now!
   var options = $(cont).data('cycle.opts');
   if (!options) {
    log('options not found, can not resume');
    return false;
   if (cont.cycleTimeout) {
    clearTimeout(cont.cycleTimeout);
    cont.cycleTimeout = 0;
   go(options.elements, options, 1, (!opts.rev && !opts.backwards));
function removeFilter(el, opts) {
if (!$.support.opacity && opts.cleartype && el.style.filter) {
try { el.style.removeAttribute('filter'); }
catch(smother) {} // handle old opera versions
// unbind event handlers
function destroy(opts) {
if (opts.next)
$(opts.next).unbind(opts.prevNextEvent);
if (opts.prev)
$(opts.prev).unbind(opts.prevNextEvent);
if (opts.pager || opts.pagerAnchorBuilder)
$.each(opts.pagerAnchors || [], function() {
   this.unbind().remove();
opts.pagerAnchors = null;
if (opts.destroy) // callback
opts.destroy(opts);
// one-time initialization
function buildOptions($cont, $slides, els, options, o) {
// support metadata plugin (v1.0 and v2.0)
var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
if (opts.autostop)
opts.countdown = opts.autostopCount || els.length;
var cont = $cont[0];
$cont.data('cycle.opts', opts);
opts.$cont = $cont;
opts.stopCount = cont.cycleStop;
opts.elements = els;
opts.before = opts.before ? [opts.before] : [];
opts.after = opts.after ? [opts.after] : [];
opts.after.unshift(function(){ opts.busy=0; });
// push some after callbacks
if (!$.support.opacity && opts.cleartype)
opts.after.push(function() { removeFilter(this, opts); });
if (opts.continuous)
opts.after.push(function() { go(els,opts,0,(!opts.rev && !opts.backwards)); });
saveOriginalOpts(opts);
// clearType corrections
if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
clearTypeFix($slides);
// container requires non-static position so that slides can be position within
if ($cont.css('position') == 'static')
$cont.css('position', 'relative');
if (opts.width)
$cont.width(opts.width);
if (opts.height && opts.height != 'auto')
$cont.height(opts.height);
if (opts.startingSlide)
opts.startingSlide = parseInt(opts.startingSlide);
else if (opts.backwards)
opts.startingSlide = els.length - 1;
// if random, mix up the slide array
if (opts.random) {
opts.randomMap = [];
for (var i = 0; i < els.length; i++)
   opts.randomMap.push(i);
opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;});
opts.randomIndex = 1;
opts.startingSlide = opts.randomMap[1];
else if (opts.startingSlide >= els.length)
opts.startingSlide = 0; // catch bogus input
opts.currSlide = opts.startingSlide || 0;
var first = opts.startingSlide;
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
   z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
   z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
// make sure first slide is visible
$(els[first]).css('opacity',1).show(); // opacity bit needed to handle restart use case
removeFilter(els[first], opts);
// stretch slides
if (opts.fit && opts.width)
$slides.width(opts.width);
if (opts.fit && opts.height && opts.height != 'auto')
$slides.height(opts.height);
// stretch container
var reshape = opts.containerResize && !$cont.innerHeight();
if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9
var maxw = 0, maxh = 0;
for(var j=0; j < els.length; j++) {
   var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight();
   if (!w) w = e.offsetWidth || e.width || $e.attr('width')
   if (!h) h = e.offsetHeight || e.height || $e.attr('height');
   maxw = w > maxw ? w : maxw;
   maxh = h > maxh ? h : maxh;
if (maxw > 0 && maxh > 0)
   $cont.css({width:maxw+'px',height:maxh+'px'});
if (opts.pause)
$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});
if (supportMultiTransitions(opts) === false)
return false;
// apparently a lot of people use image slideshows without height/width attributes on the images.
// Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that.
var requeue = false;
options.requeueAttempts = options.requeueAttempts || 0;
$slides.each(function() {
// try to get height/width of each slide
var $el = $(this);
this.cycleH = (opts.fit && opts.height) ? opts.height : ($el.height() || this.offsetHeight || this.height || $el.attr('height') || 0);
this.cycleW = (opts.fit && opts.width) ? opts.width : ($el.width() || this.offsetWidth || this.width || $el.attr('width') || 0);
if ( $el.is('img') ) {
   // sigh.. sniffing, hacking, shrugging... this crappy hack tries to account for what browsers do when
   // an image is being downloaded and the markup did not include sizing info (height/width attributes);
   // there seems to be some "default" sizes used in this situation
   var loadingIE = ($.browser.msie && this.cycleW == 28 && this.cycleH == 30 && !this.complete);
   var loadingFF = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete);
   var loadingOp = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete);
   var loadingOther = (this.cycleH == 0 && this.cycleW == 0 && !this.complete);
   // don't requeue for images that are still loading but have a valid size
   if (loadingIE || loadingFF || loadingOp || loadingOther) {
    if (o.s && opts.requeueOnImageNotLoaded && ++options.requeueAttempts < 100) { // track retry count so we don't loop forever
     log(options.requeueAttempts,' - img slide not loaded, requeuing slideshow: ', this.src, this.cycleW, this.cycleH);
     setTimeout(function() {$(o.s,o.c).cycle(options)}, opts.requeueTimeout);
     requeue = true;
     return false; // break each loop
    else {
     log('could not determine size of image: '+this.src, this.cycleW, this.cycleH);
return true;
if (requeue)
return false;
opts.cssBefore = opts.cssBefore || {};
opts.animIn = opts.animIn || {};
opts.animOut = opts.animOut || {};
$slides.not(':eq('+first+')').css(opts.cssBefore);
if (opts.cssFirst)
$($slides[first]).css(opts.cssFirst);
if (opts.timeout) {
opts.timeout = parseInt(opts.timeout);
// ensure that timeout and speed settings are sane
if (opts.speed.constructor == String)
   opts.speed = $.fx.speeds[opts.speed] || parseInt(opts.speed);
if (!opts.sync)
   opts.speed = opts.speed / 2;
var buffer = opts.fx == 'shuffle' ? 500 : 250;
while((opts.timeout - opts.speed) < buffer) // sanitize timeout
   opts.timeout += opts.speed;
if (opts.easing)
opts.easeIn = opts.easeOut = opts.easing;
if (!opts.speedIn)
opts.speedIn = opts.speed;
if (!opts.speedOut)
opts.speedOut = opts.speed;
opts.slideCount = els.length;
opts.currSlide = opts.lastSlide = first;
if (opts.random) {
if (++opts.randomIndex == els.length)
   opts.randomIndex = 0;
opts.nextSlide = opts.randomMap[opts.randomIndex];
else if (opts.backwards)
opts.nextSlide = opts.startingSlide == 0 ? (els.length-1) : opts.startingSlide-1;
else
opts.nextSlide = opts.startingSlide >= (els.length-1) ? 0 : opts.startingSlide+1;
// run transition init fn
if (!opts.multiFx) {
var init = $.fn.cycle.transitions[opts.fx];
if ($.isFunction(init))
   init($cont, $slides, opts);
else if (opts.fx != 'custom' && !opts.multiFx) {
   log('unknown transition: ' + opts.fx,'; slideshow terminating');
   return false;
// fire artificial events
var e0 = $slides[first];
if (opts.before.length)
opts.before[0].apply(e0, [e0, e0, opts, true]);
if (opts.after.length > 1)
opts.after[1].apply(e0, [e0, e0, opts, true]);
if (opts.next)
$(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1)});
if (opts.prev)
$(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1)});
if (opts.pager || opts.pagerAnchorBuilder)
buildPager(els,opts);
exposeAddSlide(opts, els);
return opts;
// save off original opts so we can restore after clearing state
function saveOriginalOpts(opts) {
opts.original = { before: [], after: [] };
opts.original.cssBefore = $.extend({}, opts.cssBefore);
opts.original.cssAfter = $.extend({}, opts.cssAfter);
opts.original.animIn = $.extend({}, opts.animIn);
opts.original.animOut   = $.extend({}, opts.animOut);
$.each(opts.before, function() { opts.original.before.push(this); });
$.each(opts.after, function() { opts.original.after.push(this); });
function supportMultiTransitions(opts) {
var i, tx, txs = $.fn.cycle.transitions;
// look for multiple effects
if (opts.fx.indexOf(',') > 0) {
opts.multiFx = true;
opts.fxs = opts.fx.replace(/\s*/g,'').split(',');
// discard any bogus effect names
for (i=0; i < opts.fxs.length; i++) {
   var fx = opts.fxs[i];
   tx = txs[fx];
   if (!tx || !txs.hasOwnProperty(fx) || !$.isFunction(tx)) {
    log('discarding unknown transition: ',fx);
    opts.fxs.splice(i,1);
    i--;
// if we have an empty list then we threw everything away!
if (!opts.fxs.length) {
   log('No valid transitions named; slideshow terminating.');
   return false;
else if (opts.fx == 'all') { // auto-gen the list of transitions
opts.multiFx = true;
opts.fxs = [];
for (p in txs) {
   tx = txs[p];
   if (txs.hasOwnProperty(p) && $.isFunction(tx))
    opts.fxs.push(p);
if (opts.multiFx && opts.randomizeEffects) {
// munge the fxs array to make effect selection random
var r1 = Math.floor(Math.random() * 20) + 30;
for (i = 0; i < r1; i++) {
   var r2 = Math.floor(Math.random() * opts.fxs.length);
   opts.fxs.push(opts.fxs.splice(r2,1)[0]);
debug('randomized fx sequence: ',opts.fxs);
return true;
// provide a mechanism for adding slides after the slideshow has started
function exposeAddSlide(opts, els) {
opts.addSlide = function(newSlide, prepend) {
var $s = $(newSlide), s = $s[0];
if (!opts.autostopCount)
   opts.countdown++;
els[prepend?'unshift':'push'](s);
if (opts.els)
   opts.els[prepend?'unshift':'push'](s); // shuffle needs this
opts.slideCount = els.length;
$s.css('position','absolute');
$s[prepend?'prependTo':'appendTo'](opts.$cont);
if (prepend) {
   opts.currSlide++;
   opts.nextSlide++;
if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
   clearTypeFix($s);
if (opts.fit && opts.width)
   $s.width(opts.width);
if (opts.fit && opts.height && opts.height != 'auto')
   $slides.height(opts.height);
s.cycleH = (opts.fit && opts.height) ? opts.height : $s.height();
s.cycleW = (opts.fit && opts.width) ? opts.width : $s.width();
$s.css(opts.cssBefore);
if (opts.pager || opts.pagerAnchorBuilder)
   $.fn.cycle.createPagerAnchor(els.length-1, s, $(opts.pager), els, opts);
if ($.isFunction(opts.onAddSlide))
   opts.onAddSlide($s);
else
   $s.hide(); // default behavior
// reset internal state; we do this on every pass in order to support multiple effects
$.fn.cycle.resetState = function(opts, fx) {
fx = fx || opts.fx;
opts.before = []; opts.after = [];
opts.cssBefore = $.extend({}, opts.original.cssBefore);
opts.cssAfter = $.extend({}, opts.original.cssAfter);
opts.animIn = $.extend({}, opts.original.animIn);
opts.animOut   = $.extend({}, opts.original.animOut);
opts.fxFn = null;
$.each(opts.original.before, function() { opts.before.push(this); });
$.each(opts.original.after, function() { opts.after.push(this); });
// re-init
var init = $.fn.cycle.transitions[fx];
if ($.isFunction(init))
init(opts.$cont, $(opts.elements), opts);
// this is the main engine fn, it handles the timeouts, callbacks and slide index mgmt
function go(els, opts, manual, fwd) {
// opts.busy is true if we're in the middle of an animation
if (manual && opts.busy && opts.manualTrump) {
// let manual transitions requests trump active ones
debug('manualTrump in go(), stopping active transition');
$(els).stop(true,true);
opts.busy = false;
// don't begin another timeout-based transition if there is one active
if (opts.busy) {
debug('transition active, ignoring new tx request');
return;
var p = opts.$cont[0], curr = els[opts.currSlide], next = els[opts.nextSlide];
// stop cycling if we have an outstanding stop request
if (p.cycleStop != opts.stopCount || p.cycleTimeout === 0 && !manual)
return;
// check to see if we should stop cycling based on autostop options
if (!manual && !p.cyclePause && !opts.bounce &&
((opts.autostop && (--opts.countdown <= 0)) ||
(opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) {
if (opts.end)
   opts.end(opts);
return;
// if slideshow is paused, only transition on a manual trigger
var changed = false;
if ((manual || !p.cyclePause) && (opts.nextSlide != opts.currSlide)) {
changed = true;
var fx = opts.fx;
// keep trying to get the slide size if we don't have it yet
curr.cycleH = curr.cycleH || $(curr).height();
curr.cycleW = curr.cycleW || $(curr).width();
next.cycleH = next.cycleH || $(next).height();
next.cycleW = next.cycleW || $(next).width();
// support multiple transition types
if (opts.multiFx) {
   if (opts.lastFx == undefined || ++opts.lastFx >= opts.fxs.length)
    opts.lastFx = 0;
   fx = opts.fxs[opts.lastFx];
   opts.currFx = fx;
// one-time fx overrides apply to: $('div').cycle(3,'zoom');
if (opts.oneTimeFx) {
   fx = opts.oneTimeFx;
   opts.oneTimeFx = null;
$.fn.cycle.resetState(opts, fx);
// run the before callbacks
if (opts.before.length)
   $.each(opts.before, function(i,o) {
    if (p.cycleStop != opts.stopCount) return;
    o.apply(next, [curr, next, opts, fwd]);
// stage the after callacks
var after = function() {
   $.each(opts.after, function(i,o) {
    if (p.cycleStop != opts.stopCount) return;
    o.apply(next, [curr, next, opts, fwd]);
debug('tx firing; currSlide: ' + opts.currSlide + '; nextSlide: ' + opts.nextSlide);
// get ready to perform the transition
opts.busy = 1;
if (opts.fxFn) // fx function provided?
   opts.fxFn(curr, next, opts, after, fwd, manual && opts.fastOnEvent);
else if ($.isFunction($.fn.cycle[opts.fx])) // fx plugin ?
   $.fn.cycle[opts.fx](curr, next, opts, after, fwd, manual && opts.fastOnEvent);
else
   $.fn.cycle.custom(curr, next, opts, after, fwd, manual && opts.fastOnEvent);
if (changed || opts.nextSlide == opts.currSlide) {
// calculate the next slide
opts.lastSlide = opts.currSlide;
if (opts.random) {
   opts.currSlide = opts.nextSlide;
   if (++opts.randomIndex == els.length)
    opts.randomIndex = 0;
   opts.nextSlide = opts.randomMap[opts.randomIndex];
   if (opts.nextSlide == opts.currSlide)
    opts.nextSlide = (opts.currSlide == opts.slideCount - 1) ? 0 : opts.currSlide + 1;
else if (opts.backwards) {
   var roll = (opts.nextSlide - 1) < 0;
   if (roll && opts.bounce) {
    opts.backwards = !opts.backwards;
    opts.nextSlide = 1;
    opts.currSlide = 0;
   else {
    opts.nextSlide = roll ? (els.length-1) : opts.nextSlide-1;
    opts.currSlide = roll ? 0 : opts.nextSlide+1;
else { // sequence
   var roll = (opts.nextSlide + 1) == els.length;
   if (roll && opts.bounce) {
    opts.backwards = !opts.backwards;
    opts.nextSlide = els.length-2;
    opts.currSlide = els.length-1;
   else {
    opts.nextSlide = roll ? 0 : opts.nextSlide+1;
    opts.currSlide = roll ? els.length-1 : opts.nextSlide-1;
if (changed && opts.pager)
opts.updateActivePagerLink(opts.pager, opts.currSlide, opts.activePagerClass);
// stage the next transition
var ms = 0;
if (opts.timeout && !opts.continuous)
ms = getTimeout(els[opts.currSlide], els[opts.nextSlide], opts, fwd);
else if (opts.continuous && p.cyclePause) // continuous shows work off an after callback, not this timer logic
ms = 10;
if (ms > 0)
p.cycleTimeout = setTimeout(function(){ go(els, opts, 0, (!opts.rev && !opts.backwards)) }, ms);
// invoked after transition
$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
   $(pager).each(function() {
       $(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
// calculate timeout value for current transition
function getTimeout(curr, next, opts, fwd) {
if (opts.timeoutFn) {
// call user provided calc fn
var t = opts.timeoutFn.call(curr,curr,next,opts,fwd);
while ((t - opts.speed) < 250) // sanitize timeout
   t += opts.speed;
debug('calculated timeout: ' + t + '; speed: ' + opts.speed);
if (t !== false)
   return t;
return opts.timeout;
// expose next/prev function, caller must pass in state
$.fn.cycle.next = function(opts) { advance(opts, opts.rev?-1:1); };
$.fn.cycle.prev = function(opts) { advance(opts, opts.rev?1:-1);};
// advance slide forward or back
function advance(opts, val) {
var els = opts.elements;
var p = opts.$cont[0], timeout = p.cycleTimeout;
if (timeout) {
clearTimeout(timeout);
p.cycleTimeout = 0;
if (opts.random && val < 0) {
// move back to the previously display slide
opts.randomIndex--;
if (--opts.randomIndex == -2)
   opts.randomIndex = els.length-2;
else if (opts.randomIndex == -1)
   opts.randomIndex = els.length-1;
opts.nextSlide = opts.randomMap[opts.randomIndex];
else if (opts.random) {
opts.nextSlide = opts.randomMap[opts.randomIndex];
else {
opts.nextSlide = opts.currSlide + val;
if (opts.nextSlide < 0) {
   if (opts.nowrap) return false;
   opts.nextSlide = els.length - 1;
else if (opts.nextSlide >= els.length) {
   if (opts.nowrap) return false;
   opts.nextSlide = 0;
var cb = opts.onPrevNextEvent || opts.prevNextClick; // prevNextClick is deprecated
if ($.isFunction(cb))
cb(val > 0, opts.nextSlide, els[opts.nextSlide]);
go(els, opts, 1, val>=0);
return false;
function buildPager(els, opts) {
var $p = $(opts.pager);
$.each(els, function(i,o) {
$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);
opts.updateActivePagerLink(opts.pager, opts.startingSlide, opts.activePagerClass);
$.fn.cycle.createPagerAnchor = function(i, el, $p, els, opts) {
var a;
if ($.isFunction(opts.pagerAnchorBuilder)) {
a = opts.pagerAnchorBuilder(i,el);
debug('pagerAnchorBuilder('+i+', el) returned: ' + a);
else
a = '<a href="#">'+(i+1)+'</a>';
if (!a)
return;
var $a = $(a);
// don't reparent if anchor is in the dom
if ($a.parents('body').length === 0) {
var arr = [];
if ($p.length > 1) {
   $p.each(function() {
    var $clone = $a.clone(true);
    $(this).append($clone);
    arr.push($clone[0]);
   $a = $(arr);
else {
   $a.appendTo($p);
opts.pagerAnchors = opts.pagerAnchors || [];
opts.pagerAnchors.push($a);
$a.bind(opts.pagerEvent, function(e) {
e.preventDefault();
opts.nextSlide = i;
var p = opts.$cont[0], timeout = p.cycleTimeout;
if (timeout) {
   clearTimeout(timeout);
   p.cycleTimeout = 0;
var cb = opts.onPagerEvent || opts.pagerClick; // pagerClick is deprecated
if ($.isFunction(cb))
   cb(opts.nextSlide, els[opts.nextSlide]);
go(els,opts,1,opts.currSlide < i); // trigger the trans
// return false; // <== allow bubble
if ( ! /^click/.test(opts.pagerEvent) && !opts.allowPagerClickBubble)
$a.bind('click.cycle', function(){return false;}); // suppress click
if (opts.pauseOnPagerHover)
$a.hover(function() { opts.$cont[0].cyclePause++; }, function() { opts.$cont[0].cyclePause--; } );
// helper fn to calculate the number of slides between the current and the next
$.fn.cycle.hopsFromLast = function(opts, fwd) {
var hops, l = opts.lastSlide, c = opts.currSlide;
if (fwd)
hops = c > l ? c - l : opts.slideCount - l;
else
hops = c < l ? l - c : l + opts.slideCount - c;
return hops;
// fix clearType problems in ie6 by setting an explicit bg color
// (otherwise text slides look horrible during a fade transition)
function clearTypeFix($slides) {
debug('applying clearType background-color hack');
function hex(s) {
s = parseInt(s).toString(16);
return s.length < 2 ? '0'+s : s;
function getBg(e) {
for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) {
   var v = $.css(e,'background-color');
   if (v.indexOf('rgb') >= 0 ) {
    var rgb = v.match(/\d+/g);
    return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
   if (v && v != 'transparent')
    return v;
return '#ffffff';
$slides.each(function() { $(this).css('background-color', getBg(this)); });
// reset common props before the next transition
$.fn.cycle.commonReset = function(curr,next,opts,w,h,rev) {
$(opts.elements).not(curr).hide();
opts.cssBefore.opacity = 1;
opts.cssBefore.display = 'block';
if (w !== false && next.cycleW > 0)
opts.cssBefore.width = next.cycleW;
if (h !== false && next.cycleH > 0)
opts.cssBefore.height = next.cycleH;
opts.cssAfter = opts.cssAfter || {};
opts.cssAfter.display = 'none';
$(curr).css('zIndex',opts.slideCount + (rev === true ? 1 : 0));
$(next).css('zIndex',opts.slideCount + (rev === true ? 0 : 1));
// the actual fn for effecting a transition
$.fn.cycle.custom = function(curr, next, opts, cb, fwd, speedOverride) {
var $l = $(curr), $n = $(next);
var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut;
$n.css(opts.cssBefore);
if (speedOverride) {
if (typeof speedOverride == 'number')
   speedIn = speedOut = speedOverride;
else
   speedIn = speedOut = 1;
easeIn = easeOut = null;
var fn = function() {$n.animate(opts.animIn, speedIn, easeIn, cb)};
$l.animate(opts.animOut, speedOut, easeOut, function() {
if (opts.cssAfter) $l.css(opts.cssAfter);
if (!opts.sync) fn();
if (opts.sync) fn();
// transition definitions - only fade is defined here, transition pack defines the rest
$.fn.cycle.transitions = {
fade: function($cont, $slides, opts) {
$slides.not(':eq('+opts.currSlide+')').css('opacity',0);
opts.before.push(function(curr,next,opts) {
   $.fn.cycle.commonReset(curr,next,opts);
   opts.cssBefore.opacity = 0;
opts.animIn    = { opacity: 1 };
opts.animOut   = { opacity: 0 };
opts.cssBefore = { top: 0, left: 0 };
$.fn.cycle.ver = function() { return ver; };
// override these globally if you like (they are all optional)
$.fn.cycle.defaults = {
fx:     'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
timeout:    4000, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn:     null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous:    0,   // true to start next transition immediately after current one completes
speed:     1000, // speed of the transition (any valid fx speed value)
speedIn:    null, // speed of the 'in' transition
speedOut:    null, // speed of the 'out' transition
next:     null, // selector for element to use as event trigger for next slide
prev:     null, // selector for element to use as event trigger for previous slide
// prevNextClick: null, // @deprecated; please use onPrevNextEvent instead
onPrevNextEvent: null, // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
prevNextEvent:'click.cycle',// event which drives the manual transition to the previous or next slide
pager:     null, // selector for element to use as pager container
//pagerClick   null, // @deprecated; please use onPagerEvent instead
onPagerEvent: null, // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
pagerEvent:   'click.cycle', // name of event which drives the pager navigation
allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling
pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
before:     null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
after:     null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
end:     null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
easing:     null, // easing method for both in and out transitions
easeIn:     null, // easing for "in" transition
easeOut:    null, // easing for "out" transition
shuffle:    null, // coords for shuffle animation, ex: { top:15, left: 200 }
animIn:     null, // properties that define how the slide animates in
animOut:    null, // properties that define how the slide animates out
cssBefore:    null, // properties that define the initial state of the slide before transitioning in
cssAfter:    null, // properties that defined the state of the slide after transitioning out
fxFn:     null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
height:    'auto', // container height
startingSlide: 0,   // zero-based index of the first slide to be displayed
sync:     1,   // true if in/out transitions should occur simultaneously
random:     0,   // true for random, false for sequence (not applicable to shuffle fx)
fit:     0,   // force slides to fit container
containerResize: 1,   // resize container to fit largest slide
pause:     0,   // true to enable "pause on hover"
pauseOnPagerHover: 0, // true to pause when hovering over pager link
autostop:    0,   // true to end slideshow after X transitions (where X == slide count)
autostopCount: 0,   // number of transitions (optionally used with autostop to define X)
delay:     0,   // additional delay (in ms) for first transition (hint: can be negative)
slideExpr:    null, // expression for selecting slides (if something other than all children is required)
cleartype:    !$.support.opacity, // true if clearType corrections should be applied (for IE)
cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
nowrap:     0,   // true to prevent slideshow from wrapping
fastOnEvent:   0,   // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
rev:     0, // causes animations to transition in reverse
manualTrump:   true, // causes manual transition to stop an active transition instead of being ignored
requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
requeueTimeout: 250, // ms delay for requeue
activePagerClass: 'activeSlide', // class name used for the active pager link
updateActivePagerLink: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
backwards:     false // true to start slideshow at last slide and move backwards through the stack
})(jQuery);
* jQuery Cycle Plugin Transition Definitions
* This script is a plugin for the jQuery Cycle Plugin
* Examples and documentation at: http://malsup.com/jquery/cycle/
* Copyright (c) 2007-2010 M. Alsup
* Version: 2.72
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
(function($) {
// These functions define one-time slide initialization for the named
// transitions. To save file size feel free to remove any of these that you
// don't need.
$.fn.cycle.transitions.none = function($cont, $slides, opts) {
opts.fxFn = function(curr,next,opts,after){
$(next).show();
$(curr).hide();
after();
// scrollUp/Down/Left/Right
$.fn.cycle.transitions.scrollUp = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
var h = $cont.height();
opts.cssBefore ={ top: h, left: 0 };
opts.cssFirst = { top: 0 };
opts.animIn   = { top: 0 };
opts.animOut = { top: -h };
$.fn.cycle.transitions.scrollDown = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
var h = $cont.height();
opts.cssFirst = { top: 0 };
opts.cssBefore= { top: -h, left: 0 };
opts.animIn   = { top: 0 };
opts.animOut = { top: h };
$.fn.cycle.transitions.scrollLeft = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
var w = $cont.width();
opts.cssFirst = { left: 0 };
opts.cssBefore= { left: w, top: 0 };
opts.animIn   = { left: 0 };
opts.animOut = { left: 0-w };
$.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
var w = $cont.width();
opts.cssFirst = { left: 0 };
opts.cssBefore= { left: -w, top: 0 };
opts.animIn   = { left: 0 };
opts.animOut = { left: w };
$.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) {
$cont.css('overflow','hidden').width();
opts.before.push(function(curr, next, opts, fwd) {
$.fn.cycle.commonReset(curr,next,opts);
opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
opts.cssFirst = { left: 0 };
opts.cssBefore= { top: 0 };
opts.animIn   = { left: 0 };
opts.animOut = { top: 0 };
$.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push(function(curr, next, opts, fwd) {
$.fn.cycle.commonReset(curr,next,opts);
opts.cssBefore.top = fwd ? (1-next.cycleH) : (next.cycleH-1);
opts.animOut.top = fwd ? curr.cycleH : -curr.cycleH;
opts.cssFirst = { top: 0 };
opts.cssBefore= { left: 0 };
opts.animIn   = { top: 0 };
opts.animOut = { left: 0 };
// slideX/slideY
$.fn.cycle.transitions.slideX = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$(opts.elements).not(curr).hide();
$.fn.cycle.commonReset(curr,next,opts,false,true);
opts.animIn.width = next.cycleW;
opts.cssBefore = { left: 0, top: 0, width: 0 };
opts.animIn = { width: 'show' };
opts.animOut = { width: 0 };
$.fn.cycle.transitions.slideY = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$(opts.elements).not(curr).hide();
$.fn.cycle.commonReset(curr,next,opts,true,false);
opts.animIn.height = next.cycleH;
opts.cssBefore = { left: 0, top: 0, height: 0 };
opts.animIn = { height: 'show' };
opts.animOut = { height: 0 };
// shuffle
$.fn.cycle.transitions.shuffle = function($cont, $slides, opts) {
var i, w = $cont.css('overflow', 'visible').width();
$slides.css({left: 0, top: 0});
opts.before.push(function(curr,next,opts) {
$.fn.cycle.commonReset(curr,next,opts,true,true,true);
// only adjust speed once!
if (!opts.speedAdjusted) {
opts.speed = opts.speed / 2; // shuffle has 2 transitions
opts.speedAdjusted = true;
opts.random = 0;
opts.shuffle = opts.shuffle || {left:-w, top:15};
opts.els = [];
for (i=0; i < $slides.length; i++)
opts.els.push($slides[i]);
for (i=0; i < opts.currSlide; i++)
opts.els.push(opts.els.shift());
// custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
opts.fxFn = function(curr, next, opts, cb, fwd) {
var $el = fwd ? $(curr) : $(next);
$(next).css(opts.cssBefore);
var count = opts.slideCount;
$el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() {
   var hops = $.fn.cycle.hopsFromLast(opts, fwd);
   for (var k=0; k < hops; k++)
    fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop());
   if (fwd) {
    for (var i=0, len=opts.els.length; i < len; i++)
     $(opts.els[i]).css('z-index', len-i+count);
   else {
    var z = $(curr).css('z-index');
    $el.css('z-index', parseInt(z)+1+count);
   $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() {
    $(fwd ? this : curr).hide();
    if (cb) cb();
opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
// turnUp/Down/Left/Right
$.fn.cycle.transitions.turnUp = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,false);
opts.cssBefore.top = next.cycleH;
opts.animIn.height = next.cycleH;
opts.cssFirst = { top: 0 };
opts.cssBefore = { left: 0, height: 0 };
opts.animIn    = { top: 0 };
opts.animOut   = { height: 0 };
$.fn.cycle.transitions.turnDown = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,false);
opts.animIn.height = next.cycleH;
opts.animOut.top   = curr.cycleH;
opts.cssFirst = { top: 0 };
opts.cssBefore = { left: 0, top: 0, height: 0 };
opts.animOut   = { height: 0 };
$.fn.cycle.transitions.turnLeft = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,true);
opts.cssBefore.left = next.cycleW;
opts.animIn.width = next.cycleW;
opts.cssBefore = { top: 0, width: 0 };
opts.animIn    = { left: 0 };
opts.animOut   = { width: 0 };
$.fn.cycle.transitions.turnRight = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,true);
opts.animIn.width = next.cycleW;
opts.animOut.left = curr.cycleW;
opts.cssBefore = { top: 0, left: 0, width: 0 };
opts.animIn    = { left: 0 };
opts.animOut   = { width: 0 };
// zoom
$.fn.cycle.transitions.zoom = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,false,true);
opts.cssBefore.top = next.cycleH/2;
opts.cssBefore.left = next.cycleW/2;
opts.animIn    = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
opts.animOut   = { width: 0, height: 0, top: curr.cycleH/2, left: curr.cycleW/2 };
opts.cssFirst = { top:0, left: 0 };
opts.cssBefore = { width: 0, height: 0 };
// fadeZoom
$.fn.cycle.transitions.fadeZoom = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,false);
opts.cssBefore.left = next.cycleW/2;
opts.cssBefore.top = next.cycleH/2;
opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
opts.cssBefore = { width: 0, height: 0 };
opts.animOut = { opacity: 0 };
// blindX
$.fn.cycle.transitions.blindX = function($cont, $slides, opts) {
var w = $cont.css('overflow','hidden').width();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts);
opts.animIn.width = next.cycleW;
opts.animOut.left   = curr.cycleW;
opts.cssBefore = { left: w, top: 0 };
opts.animIn = { left: 0 };
opts.animOut = { left: w };
// blindY
$.fn.cycle.transitions.blindY = function($cont, $slides, opts) {
var h = $cont.css('overflow','hidden').height();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts);
opts.animIn.height = next.cycleH;
opts.animOut.top   = curr.cycleH;
opts.cssBefore = { top: h, left: 0 };
opts.animIn = { top: 0 };
opts.animOut = { top: h };
// blindZ
$.fn.cycle.transitions.blindZ = function($cont, $slides, opts) {
var h = $cont.css('overflow','hidden').height();
var w = $cont.width();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts);
opts.animIn.height = next.cycleH;
opts.animOut.top   = curr.cycleH;
opts.cssBefore = { top: h, left: w };
opts.animIn = { top: 0, left: 0 };
opts.animOut = { top: h, left: w };
// growX - grow horizontally from centered 0 width
$.fn.cycle.transitions.growX = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,true);
opts.cssBefore.left = this.cycleW/2;
opts.animIn = { left: 0, width: this.cycleW };
opts.animOut = { left: 0 };
opts.cssBefore = { width: 0, top: 0 };
// growY - grow vertically from centered 0 height
$.fn.cycle.transitions.growY = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,false);
opts.cssBefore.top = this.cycleH/2;
opts.animIn = { top: 0, height: this.cycleH };
opts.animOut = { top: 0 };
opts.cssBefore = { height: 0, left: 0 };
// curtainX - squeeze in both edges horizontally
$.fn.cycle.transitions.curtainX = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,true,true);
opts.cssBefore.left = next.cycleW/2;
opts.animIn = { left: 0, width: this.cycleW };
opts.animOut = { left: curr.cycleW/2, width: 0 };
opts.cssBefore = { top: 0, width: 0 };
// curtainY - squeeze in both edges vertically
$.fn.cycle.transitions.curtainY = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,false,true);
opts.cssBefore.top = next.cycleH/2;
opts.animIn = { top: 0, height: next.cycleH };
opts.animOut = { top: curr.cycleH/2, height: 0 };
opts.cssBefore = { left: 0, height: 0 };
// cover - curr slide covered by next slide
$.fn.cycle.transitions.cover = function($cont, $slides, opts) {
var d = opts.direction || 'left';
var w = $cont.css('overflow','hidden').width();
var h = $cont.height();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts);
if (d == 'right')
   opts.cssBefore.left = -w;
else if (d == 'up')
   opts.cssBefore.top = h;
else if (d == 'down')
   opts.cssBefore.top = -h;
else
   opts.cssBefore.left = w;
opts.animIn = { left: 0, top: 0};
opts.animOut = { opacity: 1 };
opts.cssBefore = { top: 0, left: 0 };
// uncover - curr slide moves off next slide
$.fn.cycle.transitions.uncover = function($cont, $slides, opts) {
var d = opts.direction || 'left';
var w = $cont.css('overflow','hidden').width();
var h = $cont.height();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,true,true);
if (d == 'right')
   opts.animOut.left = w;
else if (d == 'up')
   opts.animOut.top = -h;
else if (d == 'down')
   opts.animOut.top = h;
else
   opts.animOut.left = -w;
opts.animIn = { left: 0, top: 0 };
opts.animOut = { opacity: 1 };
opts.cssBefore = { top: 0, left: 0 };
// toss - move top slide and fade away
$.fn.cycle.transitions.toss = function($cont, $slides, opts) {
var w = $cont.css('overflow','visible').width();
var h = $cont.height();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,true,true);
// provide default toss settings if animOut not provided
if (!opts.animOut.left && !opts.animOut.top)
   opts.animOut = { left: w*2, top: -h/2, opacity: 0 };
else
   opts.animOut.opacity = 0;
opts.cssBefore = { left: 0, top: 0 };
opts.animIn = { left: 0 };
// wipe - clip animation
$.fn.cycle.transitions.wipe = function($cont, $slides, opts) {
var w = $cont.css('overflow','hidden').width();
var h = $cont.height();
opts.cssBefore = opts.cssBefore || {};
var clip;
if (opts.clip) {
if (/l2r/.test(opts.clip))
   clip = 'rect(0px 0px '+h+'px 0px)';
else if (/r2l/.test(opts.clip))
   clip = 'rect(0px '+w+'px '+h+'px '+w+'px)';
else if (/t2b/.test(opts.clip))
   clip = 'rect(0px '+w+'px 0px 0px)';
else if (/b2t/.test(opts.clip))
   clip = 'rect('+h+'px '+w+'px '+h+'px 0px)';
else if (/zoom/.test(opts.clip)) {
   var top = parseInt(h/2);
   var left = parseInt(w/2);
   clip = 'rect('+top+'px '+left+'px '+top+'px '+left+'px)';
opts.cssBefore.clip = opts.cssBefore.clip || clip || 'rect(0px 0px 0px 0px)';
var d = opts.cssBefore.clip.match(/(\d+)/g);
var t = parseInt(d[0]), r = parseInt(d[1]), b = parseInt(d[2]), l = parseInt(d[3]);
opts.before.push(function(curr, next, opts) {
if (curr == next) return;
var $curr = $(curr), $next = $(next);
$.fn.cycle.commonReset(curr,next,opts,true,true,false);
opts.cssAfter.display = 'block';
var step = 1, count = parseInt((opts.speedIn / 13)) - 1;
(function f() {
   var tt = t ? t - parseInt(step * (t/count)) : 0;
   var ll = l ? l - parseInt(step * (l/count)) : 0;
   var bb = b < h ? b + parseInt(step * ((h-b)/count || 1)) : h;
   var rr = r < w ? r + parseInt(step * ((w-r)/count || 1)) : w;
   $next.css({ clip: 'rect('+tt+'px '+rr+'px '+bb+'px '+ll+'px)' });
   (step++ <= count) ? setTimeout(f, 13) : $curr.css('display', 'none');
opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
opts.animIn    = { left: 0 };
opts.animOut   = { left: 0 };
})(jQuery);
I still cannot get it to work

Can't view Wordpress PHP files in Dreamweaver CC.

Mac. MAMP.
I have downloaded my full site hosted on xxxx into MAMP htdocs.
Download directly from root public_html on host.
I keep getting "Dynamically-related files could not be resolved because the site definition is not correct for this server"
Even if I go "live view" and set - Web URL to: www.indochinaexplorers.com (my site) - instead of http://localhost, it comes up with a lot of PHP boxes.
Been through all tutorials for more than a week.
Have been through all possible settings and configurations under "Manage Site"
Did a Test - New PHP page. Same thing, it does not show, design or live view.
So stuck,
Thanks Peter

I have the same issue and none of the alleged Guru's that answered have provided anything useful. Solid Web Design is about workflow, which could lead to innovation if people would stop reverse innovation language...Dreamweaver could be a viable wordpress solution if it worked as it's supposed to. CC is a bust as the focus has shifted to mobile first.
There are no "real pages" for you to edit in DW; just code fragments.
Wordpress is dynamically driven but this is untrue. Every PHP file in a theme has structure and is a "real page". Fragments have to be in a "file" to be called, they are not called out of thin air. If I want to style page.php, it cannot be done without first adding selectors. #mainContent for example. The only thing php does is add dynamic functionality. Page.php can be altered and saved as Page_fullwidth.php, Page_Music.php ,Page_webDesign.php and they can all have a different layout in the same theme. Else there would be no templates to choose from in the static page section of the WP Admin area.
Themes drive the appearance and functionality of your WP site. If you need a new look, find a different Theme and install it from your WP Dashboard.
How does this help?
Unless you are very familiar with PHP code and more specifically the PHP code WP uses, you will not have good results working in DW. You really must use the WP Dashboard to manage your content, Themes, and plugins.
This has nothing to do with the issue. The issue is Dreamweaver simply does not allow propper editing of wordpress sites in a dynamic environment. No one ever said they didn't know anything about php, creating wordpress themes, plugins, and so on...
Dear next genius..Since the question has already been asked, I won't ask it again, but the original inquiry is my issue as well. If you have figured out how to make this work, please respond, if not, please don't.
Mac

DreamWeaver CS4 CSS code hints not working

Please help.
DreamWeaver has stopped showing code hints for CSS selector values. When I start typing "… div {border: …" DreamWeaver used to show the possible value for this selector (i.e. 1px solid #ccc). Now all that pops up is this "… 'border-width' 'border-style' 'color' …"
How can I get DreamWeaver to show the possible values for CSS? I'm running DreamWeaver CS4 on a Mac book pro with Snow Leopard. DreamWeaver was set up using the default settings, and there are no extensions enabled.
The attached screen shots show what I am experincing.
Thanks,

Wow... you waited all of 2 hours...
try removing your configuration folder and restarting
"ianhg" <[email protected]> wrote in message
news:ea7m2g$68e$[email protected]..
> Hi Folks,
>
> Has no one any ideas --- Please!!
>
> Ian

Need help with spacing in Dreamweaver

Hi I need help I making a site in Dreamweaver using a box format. I have ever thing done but I have a gap between my header and nav-bar that I can not close. What should I do?

By default, browsers add their own margins and padding to HTML elements. Many people use a CSS Reset to remove this default spacing and then add their own values to individual CSS selectors.
This quick and dirty reset uses an asterisk (*) as a wildcard selector. This removes default margins and padding from everything:
CSS:
* {margin:0; padding:0}
Other CSS Reset Methods:
http://cssresetr.com/
Nancy O.

Centering an image in Dreamweaver

I am new to Dreamweaver CS4 and to CSS, despite several years of designing table-based layouts in Front Page. I've put a lot of time into training to understand the box model and I'm making headway. I have created a basic 2 column layout from scratch (no template) with a header, a left sidebar, a main content region and a footer. And with floats adjusted, it all works just fine.
I'm running into a problem with what I would have thought would be the simplest of tasks. Inside the main content div, I want a centered image followed below by some paragraph copy, which will be controlled by its own CSS rule. I'm probably missing something obvious, but I can't for the life of me figure out how to center this image. In Front Page, you selected the image and clicked a "center" button - simple enough. But short of manually altering the HTML code with <center></center> tags, I don't' see an option to center an image.
I searched here and found a couple of answers that weren't exactly this same situation and/or that I didn't quite understand. If anyone can help me with this task without showing too much impatience with my ignorance - I'd sure appreciate it.

A lot has changed in Web Standards since Front Page. FP used old fashioned HTML styles. DW is web standards compliant which requires keeping content (html) separate from styles (CSS).
Use the CSS properties panel to a) create an #ID .class or selector name and b) define it's properties and values.
#ID {property: value}
#header {width: 900px}
.class {property: value}
.center {text-align:center}
selector {property: value}
h1 {font-size: 1em}
Classes are applied to page elements through the HTML properties panel.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver

I need help!
I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page. I've created 4 pages. When I go to reopen the pages after quitting dreamweaver 2 open and work just fine. However, for the other two I receive a window that says,
this document contains javascript code for a widget that no longer exists. If you don't remove the code, the browser may display javascript errors when loading the page. Would you like dreamweaver to find all instances of this code for you.
I've selected both yes and no options and either way my entire page becomes all jumbled. I've tried deleting the script in code view and it doesn't help?

<!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>LEAP 2 GROW</title>
<style type="text/css">

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
    <h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
    </h1>
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="volunteer.html">VOLUNTEER</a> </li>
      <li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
      <li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
    </ul>
</div>
<div id="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
        <ul>
          <li><a href="mission.html">mission/overview</a></li>
          <li><a href="ourteam.html">OUR team</a></li>
        </ul>
      </li>
      <li><a href="problem.html">THE PROBLEM</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
        <ul>
          <li><a href="solution.overview.html">overview</a></li>
          <li><a href="solution.structure.html">structure</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
        <ul>
          <li><a href="parentcollege.html">parent college</a></li>
          <li><a href="mentor.html">MENTOR program</a></li>
          <li><a href="farming.html">urban farming</a></li>
          <li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
        <ul>
          <li><a href="location.fulton.html">fulton county ga</a></li>
          <li><a href="location.haiti.html">haiti</a></li>
          <li><a href="location.tribe.html">native american tribe</a></li>
        </ul>
      </li>
      <li><a href="news.html">NEWS|RESOURCES</a></li>
      <li><a href="contact.html">CONTACT US</a></li>
      <li><a href="#">DONATE</a></li>
    </ul>
</div>
<div class="style3" id="mainContent">
    <div align="left" class="style4">
      <p class="style5">MENTOR PROGRAM</p>
      <div id="TabbedPanels2" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
          <li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
          <li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
          <li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
          <li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
          <li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <blockquote>
              <p><em>“Those who have the ability, have the responsibility”</em></p>
              <p><u>Avenue of attention:</u> <strong>                        MENTOR PROGRAM</strong> <br />
                Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
              <p>Two levels of involvement: </p>
              <ol>
                <li>High School Academic Mentors</li>
                <li>Community-Leader Mentors</li>
              </ol>
              <p><u>Program title:</u>                         <strong>Talent 2 Kids</strong> </p>
              <p><u>Why Program Important</u><strong>:</strong> </p>
              <ol>
              <ul>
                <li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
                <li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
                <li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
              </ul>
            </blockquote>
          </div>
          <div class="TabbedPanelsContent">Content 2</div>
          <div class="TabbedPanelsContent">Content 3</div>
          <div class="TabbedPanelsContent">Content 4</div>
          <div class="TabbedPanelsContent">Content 5</div>
          <div class="TabbedPanelsContent">Content 6</div>
        </div>
      </div>
      <p> </p>
    </div>
    <p> </p>
    <p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
      <tr>
        <td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
        <td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
        <td><div align="center"><a href="farming.html">urban farming</a></div></td>
        <td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
      </tr>
    </table>
    <p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Sudden Display issues in Firefox from Dreamweaver-built pages

Hi, first time posting and a novice at Dreamweaver and web design so please bare with me.
I'm an IT administrator for a small charity company and they decided to ask me to build them a website, I bought Dreamweaver in University and had a small try with it but never really used it since.
Now I'm no web designer but I'm trying the best I can, I managed to make a few preliminary pages for use and found they displayed correctly in most browsers apart from IE and Opera.
But Suddenly today - after no editing or alterations since friday (and it displayed fine yesterday on tuesday), it started experiencing the same issues in Firefox this morning for no apparent reason. I assumed that it would be a problem with Firefox but when trying to sign up to Firefox help I meet an "Access Denied" page after clicking to sign up. Now I know there's no point in searching their forums for that issue because of course, how can someone complain they have the problem when the fact they can't get on the forums to post is what's preventing the post in the first place?
I googled both of those issues and turned up nothing, which led me here.
The "Access Denied" at signup issue is obviously not what I'm seeking for here though, but would like to know if anyone else has experienced the issue with the formatting suddenly displaying incorrectly in browsers when they worked fine before?
Like I said, I'm a complete novice at web design and dreamweaver so feel free to tell me the coding in the website is pants, I know it is but it does (did!) the job in most browsers.
Any help at all would be appreciated.
Faultlessdark
www.guidonsupportservices.org.uk
PS. For an ironic laugh - note the "This website is best displayed in Mozilla Firefox and Google Chrome" at the bottom of the page

My advice, although negative, would be to stay clear unless you are confident and capable of using html and css. Dreamweaver won't do the job for you and you will be biting off more than you can chew.
Having said that I've made the necessary changes so that your page will work in all browers. Just copy the whole html code and css below, paste into a new Dreamweaver document and save to your site root folder.
Do not mix measurements i.e., width 43em, padding 15px etc. I would advise staying with px based measurements as measurements are critical to if the site works or not. I don't know what 43em + 15px makes but I do know what 170px + 15px makes. I have changed the width of the containers in your code to px.
<!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">
<title>Home</title>
<script type="text/javascript" src="swfobject.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
</head>
<body class="oneColElsCtrHdr">
<div id="wrapper">
<div id="sidebar1">
<center><h3>Site Map</h3>
<strong>Home</strong>
<strong><p>Guidon Support</p></strong></center>
<p>-Our aim</p>
<p>-What we do</p>
<p>-Management Team </p>
<p> -Careers</p>
<center><strong><p>Guidon Recycling</p></strong></center>
<p>-Materials</p>
<p>-Our Customers</p>
<p>-How we can help</p>
<center><strong><p>Groundworks</p></strong></center>
<p>-Projects</p>
<p>-Services</p>
<p>-Our Skills</p>
<center><strong><p>The Charity</p>
<p>Contact Us</p>
<p>About Us</p></strong></center>
</div>
<div id="container2">
<div id="container">
   <img src="guidon banner.jpg" width="734" height="229" />
</div>

<div id="FlashMenuLabs">Oh dear, it appears you have an older version of Adobe Flash player or don't have it installed, you need it to navigate our website - <a href="http://www.adobe.com/go/getflashplayer">Go get it!</a>
</div>
<script type="text/javascript">
    // <![CDATA[
        var so = new SWFObject("menu.swf", "menu", "740", "160", "8", "#000000");
        so.addParam("wmode", "transparent");
        so.addParam("scale", "noscale");
        so.addParam("salign", "TL");
        so.write("FlashMenuLabs");
    // ]]>
    </script>
   <div id="mainContent">
    <h1>Welcome - Under Construction</h1>
    <p>Welcome to the Guidon website. Guidon Support services is just a small part of the Guidon Group, which covers different areas such as Recycling, Civil Engineering and work based training. Please be aware that the site is under construction and this is the Home page. This is currently on here as a test to ensure that everything displays correctly. The full website will be available soon.</p>
    <p>You'll notice that our company is split in to these different areas on the website - so if you want to know about any of our services just pick the department on the handy menu above and head on over. </p>
    <p>Our recycling services cover a wide range of materials, including various metals and plastics - if you have some materials that you want us to take off your hands, go take a look to see if we process it, then give us a call. We'll collect and move it all - for free!</p>
    <p>Guidon Support Services is the main branch of the Guidon Group. The active offshoot of The Guidon Charity, Support Services aims to give current and ex-servicemen the opportunity to transfer their experience and skills to be applied in the civilian workplace, allowing them to get on their feet if they're having trouble getting back in to work.</p>
    <p>Our groundworks services is our own little civil engineering division aiming to install GSHP (Ground Source Heating Pump) systems for private and commercial properties.</p>
    <h2>The Guidon Charity</h2>
    <p>The Guidon Group is set up for one ideal: To reduce the harm caused by homelessness, drug and or alcohol abuse and to support serving or former service personnel or their families to lead a happy, healthy and productive life. Profits generated by the Guidon Group are passed on to the Guidon Charity to help us fulfill this aim
      
    </p>
    <p> </p>
</div>
<div id="footer">
    <p>This website is best viewed in Google Chrome and Mozilla Firefox - <a href="Browser Support Page.html">Why?</a></p>
    <p>Guidonsupportservices.org.uk ©2011 The Guidon Group. </p>
    <p>Contact the webmaster; [email protected] </p>
</div>
</div>
</div><!-- end wrapper --
</body>
</html>

Confused With Dreamweaver CC and the CSS Styles Panel!

Hi all
I'm relativley new to the CC but I'm having alot of fun learning how to use dreamweaver, But now comes where I get confused. I'm learning from Lynda.com "Dreamweaver and WordPres Core Concepts" and as I follow the tutorial regarding the actual structure of wordpress themes I have different panels to the tutour.
As you can see from the pics I have a different set up and this makes it very hard to follow the tutour.
I have tried the windows menu but there is no CSS Style Panel, plus I have media, sources, selectors, and properties. Apparently the tutour is also usin CC.
Can someone please guide me on how to learn dreamweaver with up to date tutourials....

I'm not familiar with the Dreamweaver/WordPress videos on lynda.com, but if the tutorials are showing the CSS Styles panel, it means that it was recorded on Dreamweaver CS6 or earlier.
The CSS Designer panel replaces the old CSS Styles panel in DW CC. Since you have access to lynda.com, I suggest that you take a look at James Williamson's CSS Designer overview in Dreamweaver CC Essential Training.

File Causing Dreamweaver Crash

I have a file that is causing Dreamweaver CS3 Windows to
crash when in design view. I've tried it on a friend's machine
(also has CS3), and same result. File works fine on the web, and I
can edit it in code view with no problem. I am assuming something
is the CSS code isn't right, but I can't imagine what would cause
Dreamweaver to blow up. It should be noted that if I remove all but
TWO of the items contained within <div
class="auction"></div>, that fixes it. But if I add
another <div>, boom! I can't figure it out and it's making me
nuts. Here is the style sheet:
body, ul, li, a, img, h1 {
margin: 0;
body {
background: #E6E2CE;
text-align: center;
color: #403F39;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, Verdana,
sans-serif;
font-weight: normal;
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #807E73;
padding-bottom: 15px;
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
color: #403F39;
.indent {
padding: 20px 0 0 60px;
.highlight {
font-weight: bold;
.highlight-color {
font-weight: bold;
color: #981B1E;
.caption {
font-size: x-small;
a:link {
color: #403F39;
a:visited {
color: #981B1E;
a:hover {
color: #807E73;
a:active {
color: #403F39;
.tagline {
font-size: medium;
font-family: "Trebuchet MS", Arial, Helvetica, Verdana,
sans-serif;
font-weight: bold;
color: white;
.tagline-sub {
color: white;
font-size: x-small;
font-weight: bold;
.main-copy {
padding: 0 60px 0 60px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
line-height: 150%;
img.toplogo {
border-style: none;
width: 231px;
height: 65px;
img.thumb {
float: left;
margin: 0 15px 10px 0;
border: 1px solid #807E73;
width: 125px;
height: 80px;
img.poster {
margin: 0;
padding: 0;
border: 1px solid #807E73;
height: 233px;
width: 180px;
img.brofull {
width= 475px;
height= 615px;
border: 1px solid #807E73;
img.brofullh {
width= 475px;
height= 367px;
border: 1px solid #807E73;
img.brothumb {
width= 100px;
height= 129px;
border: 1px solid #807E73;
img.brothumbhz {
height= 100px;
width= 129px;
border: 1px solid #807E73;
img.brochure {
height: 259px;
width: 200px;
border: 1px solid #807E73;
img.brochure a:link {
text-decoration: none;
border: none;
img.proppic {
border: 1px solid #807E73;
width: 500px;
height: 369px;
img.proppicvert {
border: 1px solid #807E73;
width: 369px;
height: 500px;
img.moreInfo {
float: right;
margin: 0 15px 10px 0;
border: 1px solid #807E73;
width: 80px;
height: 12px;
/** TOP BANNER **/
#top-container {
margin: 0;
padding: 0;
background: black url(images/top-wrapper_bg.gif) repeat-x;
height: 68px;
#top {
width: 780px;
margin: 0 auto;
#top-left {
float: left;
text-align: left;
#top-right {
float: left;
padding: 0 0 0 100px;
margin: 0;
text-align: center;
/** END OF TOP BANNER **/
/** TOP NAVIGATION **/
#navcontainer ul {
text-align: center;
padding: 5px 0 5px 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background: #807E73 url(images/nav_bg1.gif) repeat-x;
font-size: small;
width: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
border-bottom: 1px solid orange;
#navcontainer ul li {
display: inline;
padding: 5px 0 5px 0;
/* matches link padding except for left and right */
#navcontainer ul li a {
padding: 0.5em 0.6em 0.5em 0.6em;
color: white;
text-decoration: none;
border-right: 1px solid #807E73;
#navcontainer ul li a:hover {
color: #403F39;
text-decoration: underline;
#navcontainer #current {
color: #403F39;
padding: 0.5em 0.6em 0.5em 0.6em;
text-decoration: none;
border-right: 1px solid #807E73;
.left {
border-left: 1px solid #807E73;
#breadcrumbs {
width: 100%;
font-size: x-small;
padding: 2px 0 2px 0;
border-bottom: 1px dotted #bfbcac;
#breadcrumbs-no-line {
width: 100%;
font-size: x-small;
padding: 2px 0 2px 0;
/** END OF TOP NAVIGATION **/
/** MAIN CONTENT **/
#content-container {
width: 780px;
margin: 0 auto;
padding: 0;
font-size: small;
text-align: left;
#content-left {
float: left;
width: 220px;
margin: 0;
padding: 0 5px 0 15px;
#content-right {
float: left;
width: 520px;
margin: 0;
padding: 0 0 0 15px;
background: #FFFBE5;
#content-right-1 {
float: left;
width: 170px;
margin-right: 5px;
#content-right-2 {
float: left;
width: 300px;
margin: 0;
padding: 0 5px 0 10px;
border-left: 1px dotted #bfbcac;
.container {
min-height: 600px;
height: auto;
/* for Internet Explorer*/
* html .container {
height: 600px;
.content-box {
float: left;
padding: 20px 0 0px 0;
.content-box-2 {
float: left;
padding: 5px 0 0px 0;
#mailbox {
font-size: small;
padding-right: 10px;
margin: 0;
border-bottom: 1px dotted #bfbcac;
.auction {
border-bottom: 1px dotted #bfbcac;
float: left;
padding: 5px;
margin: 5px 5px 5px 0;
width: 95%;
.container-headline {
text-align: center;
padding: 10px 0 5px 0;
margin: 0;
border-bottom: 1px solid #bfbcac;
/**.container-headline {
text-align: center;
padding: 10px 0 5px 0;
margin: 0;
border-bottom: 1px solid #bfbcac;
border-top: 1px solid #bfbcac;
background-color: #bfbcac;
#content-photo {
float: right;
margin: 10px 30px 10px 10px;
#content-left ul {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
list-style-type: none;
#content-left li {
line-height: 120%;
ul.items {
padding: 0 0 0 10px;
margin: 0;
list-style-image: none;
list-style-type: disc;
ul.summary {
padding: 0 0 0 25px;
margin: 0;
list-style-image: url(images/redBullet.jpg);
list-style-position: outside;
#content-right-1 li {
padding-bottom: 10px;
/** END OF MAIN CONTENT **/
/** PHOTO GALLERY **/
#gallery {
float: left;
margin: 0;
padding: 15px;
width: 70%;
.classicthumbv {
float: left;
padding: 10px 20px 10px 0;
width: 140px;
height: 200px;
.classicthumbh {
float: left;
padding: 10px 20px 10px 0;
width: 140px;
height: 200px;
/** END OF PHOTO GALLERY **/
/** FOOTER **/
#footer-container {
clear: both;
width: 100%;
margin: 0;
font-size: x-small;
padding: 25px 0 5px 0;
text-align: center;
border-top: 1px dotted #bfbcac;
#footer-container a {
#footer-container a:hover {
#footernav li {
display: inline;
list-style-type: none;
padding-right: 20px;
/** END OF FOOTER **/
.highlight-blue {
font-weight: bold;
color: #0066CC;
.highlight-green {
font-weight: bold;
color: #009900;
font-style: italic;
font-size: medium;
.col2head {
font-size:11pt;
font-weight:bold;
.col2subhead {
font-size:11pt;
color:#981B1E;
font-weight:bold;
.highlight-caption {
color: #981B1E;
font-size: x-small;
td.postponed {
color: #FF0000;
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
border-left:thick;
border-right:thick;
border-top:thick;
border-left-color:#FF0000;
border-right-color:#FF0000;
border-top-color:#FF0000;
border-left-style:solid;
border-right-style:solid;
border-top-style:solid;
padding-top:8px;
padding-bottom:2px;
background-color:#FFFFCC;
td.postponedText {
border-left:thick;
border-right:thick;
border-bottom:thick;
border-left-color:#FF0000;
border-right-color:#FF0000;
border-bottom-color:#FF0000;
border-left-style:solid;
border-right-style:solid;
border-bottom-style:solid;
padding-left:12px;
padding-right:12px;
padding-bottom:8px;
text-align:center;
background-color:#FFFFCC;
.highlight-red {
font-weight: bold;
color: #FF0000;
font-size:18px;
td.on {
color: #006633;
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
border-left:thick;
border-right:thick;
border-top:thick;
border-left-color:#006633;
border-right-color:#006633;
border-top-color:#006633;
border-left-style:solid;
border-right-style:solid;
border-top-style:solid;
padding-top:8px;
padding-bottom:2px;
background-color:#FFFFCC;
td.onText {
border-left:thick;
border-right:thick;
border-bottom:thick;
border-left-color:#006633;
border-right-color:#006633;
border-bottom-color:#006633;
border-left-style:solid;
border-right-style:solid;
border-bottom-style:solid;
padding-left:12px;
padding-right:12px;
padding-bottom:8px;
text-align:center;
background-color:#FFFFCC;
.headings {
font-size:16pt;
color:#006600;
font-weight:bold;

the are crashing in dreamweaver, but work fine in a
browser.

Can't change properties to selectors.

Hello,
I'm new to using Dreamweaver. I've created some selectors for div files in my HTML. When I go to add properties to the selector, it doesn't do anything. I can't change the padding, position or anything. The image or text just stays in the same place and doesn't change. Am I doing something wrong?
I'm using Dreamweaver CC and a Macbook Pro running Lion on it.
Here is my code if this helps.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>vacancyart</title>
<link href="CSS/index.css" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
</head>
<body>
<
<header id="top">
    <nav id="mainNav">
      <ul>
        <li><a href="index2.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="art.html">Art</a></li>
        <li><a href="photos.html">photos</a>
        <li>
        <li><a href="Projects.html">Projects</a></li>
        <li><a href="Resume.html">Resume</a></li>
        <li><a href="https://www.etsy.com/shop/VacancyArt">Etsy</a></li>
        <li><a href="Contact.html">Contact</a></li>
      </ul>
      <div id="main2">Vacancy Art is for all art and design. Check back frequently for updates!</div>
    </nav>
</header>
<body> <div id="IG image"><img src="Images/IGlogosite2.png" alt="" width="50" height="55" id="IG"/></div></body>
<footer>
    <p>©</p>
</footer>
</div>
</body>
</html>
CSS:
header {
text-transform: uppercase;
list-style-type: none;
list-style-position: outside;
width: 115%;
bottom: 1px;
max-height: 0%;
text-decoration: none;
#main2 {
display: block;
color: #FFFFFF;
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
position: fixed;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
text-align: center;
text-decoration: none;
text-transform: none;
line-height: 200px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 70%;
width: 80%;
background-color: #000000;
opacity: 0.9;
right: 10%;
#mainNav ul {
list-style-type: none;
display: block;
padding-bottom: 2px;
#mainNav a {
width: 10%;
display: block;
color: #FCFCFC;
text-decoration: none;
background-color: #010101;
text-align: center;
line-height: 100%;
-webkit-box-shadow: 0px 0px 0px 1px;
box-shadow: 0px 0px 0px 1px;
opacity: 0.9;
overflow-x: visible;
visibility: visible;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: left;
text-shadow: 0px 0px;
#mainNav {
text-align: center;
vertical-align: baseline;
list-style-type: none;
list-style-position: inside;
display: inline;
color: #000000;
opacity: 0.4;
body {
background-color: #000000;
color: #F9F8F8;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 200;
text-align: center;
padding-top: auto;
padding-bottom: 0px;
max-width: none;
background-image: url(../Images/Japanesehouse1.52.jpg);
background-size: 100px
background-repeat: no-repeat;
display: inherit;
width: 100%;
height: 100%;
padding-right: 0%;
position: static;
#IGimage {
padding-right: 100%;
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
padding-left: 10px;
Any Idea? Thanks!

Messy code often causes DW to choke. And it doesn't make browsers happy either. My advice is to use HTML5 tags since you're already using an HTML5 doc type. It makes your code much simpler. Copy & paste this into a new, blank document. SaveAs test.html and preview in browsers. I'll let you style it however you wish. My goal was to get things cleaned up and remove the invalid & redundant code.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>vacancyart</title>

<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<style>
/**CSS Reset**/
    padding: 0;
    /**fixes the CSS box model in Fluid Layouts**/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
img {
    vertical-align: baseline;
    display: block;
    max-width: 100%
body {
    width: 88% /**adjust width in px or % as req'd**/;
    margin: 0 auto; /**with width, this is centered**/
    color: #F9F8F8;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    /**scales BG image to viewport**/
    background: #000 url(Images/Japanesehouse1.52.jpg) no-repeat center center fixed;
    /**for Safari,Chrome**/
    -webkit-background-size: cover;
    /**for Firefox**/
    -moz-background-size: cover;
    /**for Opera**/
    -o-background-size: cover;
    /**for other browsers**/
    background-size: cover;
header, footer {
    width: 100%;
    background: rgba(51,102,153,0.5)
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: right;
    width: 85%
nav li a {
    text-transform: uppercase;
    color: #CCC;
    text-decoration: none;
    text-align: center;
    float: left;
    width: 6.5em;
    opacity: 0.75;
nav li a:hover,
nav li a:active,
nav li a:focus {
     text-decoration: underline;
     opacity:1.0
/**clear floats after nav**/
nav:after {
    clear: both;
    display: block;
    content: '';
    visibility: hidden;
/**main content**/
article {
    text-align: left;
    padding: 1%;
    background: rgba(255,255,255,0.2)
/**re-usable classes**/
.right { text-align: right }
.center { text-align: center }
.left { text-align: left }
</style>
</head>
<body>
<header> <img src="Images/IGlogosite2.png" alt="logo" id="IG"/>
<nav>
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="art.html">Art</a></li>
<li><a href="photos.html">photos</a><li>
<li><a href="Projects.html">Projects</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="https://www.etsy.com/shop/VacancyArt">Etsy</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1 class="center">Vacancy Art is for all art and design. Check back frequently for updates!</h1>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>
<footer>
<small class="right">© 2014 Web Site Name. All rights reserved.</small>
</footer>
</body>
</html>
Nancy O.

PLEASE HELP - Problem with 2 column fixed template in Dreamweaver CS3

I am trying to create a website using the 2 column fixed, right sidebar, header and footer html template in Dreamweaver CS3. I tried putting a picture in the right side bar as well as with in the main content or left portion of the page, and neither picture is showing up when I view it in any of the browsers I'm using.
I've made some minor changes in colors and sizing, but other than that no other changes. The pic I put in for the header is showing up just fine though.
Any help or advice to solve this issue would be greatly appreciated.
Thanks!!

Here is the base Dreamweaver code including the pic references that I'm trying to show on either side - when the browser opens, it only shows a blank space where the pics should be... let me know what you think. Thanks!!
<!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>Temp Home</title>



<style type="text/css">

</style></head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
    <h1>Header</h1>
</div>
<div id="sidebar1">
    <h3>Sidebar1 Content</h3>
    
    <p>Right Side Bar Content - - -    </p>
    <p>Inserted pic below here</p>
    <p><img src="/images/Syntergy5.jpg" width="123" height="105" /></p>
    <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 right 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>

    <p> </p>
</div>
<div id="mainContent">
    <h1> Main Content </h1>
    
    <p>Main Content - - </p>
    <p>inserted pic below here:</p>
    <p><img src="/images/Kelly1.jpg" width="285" height="236" /></p>
    <p> </p>
    <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>
    
    <p>
      
    </p>
</div>
<br class="clearfloat" />
<div id="footer">
    <p>Footer</p>
</div>
</div>
</body>
</html>

Need Help with giving Colors to Table Cells and Table Borders in Dreamweaver CC - Please!

Hi,
I am a teacher and use Dreamweaver CC to make my class web page.
How do I give colors to the cell borders of a table I inserted? How do I give colors and line thickness
to table borders, too?
I bought the David Powers DVD and it doesn't show that.
Please help.
Thank you,
John

Assuming that you have placed a table in your document and your CSS Designer panel is open
1. Click the '+' sign
2. Choose your option. I will choose 'Define in Page'
3. Follow the above sequence, 1.click on table, 2.ensure table is selected, 3.click on style, 4.click the '+' sign, 5. see the selector appear.
4. Click on the selector and choose the required Properties.
You can do the same for the row (<tr>) or a cell (<td>). In fact, this is how you would go about styling anything in your document.

Dreamweaver CC selector Breadcrumbs

Similar Messages

Maybe you are looking for