Skip to main content
B
brianh23087563
Participant
January 19, 2019
Answered

Kim's Div tag discrepancy

  • January 19, 2019
  • 1 reply
  • 336 views

Hello. Haven't done this is years. But I have a question that maybe someone out there can help with.

To preface my query, I work for the U.S.Navy and I am building my second web site for one of their departments. Four years ago I built a site for them with Dreamweaver cs 5.5. I have now upgraded to Dreamweaver cc release 2018 and find the procedures in it to be totally different. I'm an illustrator by trade and am not a webmaster by any means. I do the best I can but in 4 years I have forgot a lot. The programmers here that I have access to can't crack this one. Here is my problem >

In DW cc I have put in the body a long background to scroll down and it has no responsive images or text on it. It is just a background. I created an image set from an image generator and installed the generated image slider below a blank spacer to move it down from the top of the background. The problem is that the spacer and the content slider have shifted about 8 pixels from the top and from the left edge. The size of the box is perfect but it is shifted down and to the right (off the background). This leaves me with a narrow vertical space down the left side of the slider where the background shows through. I don't have this problem when I open the page in DW cs5.5. It seems to line up perfectly but I have to work in cc to keep current.

**************************************************************************The following is my source code****************************************************************************************

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>home page</title>

  <link href="css/my-slider.css" rel="stylesheet" type="text/css">

  <link href="css/main.css" rel="stylesheet" type="text/css">

  <script src="js/ism-2.2.min.js"></script>

</head>

<body>

<div id="section1">

  <img src="Images/Button-Spacer.gif" width="323" height="383" alt=""/>

  <div class="ism-slider" data-transition_type="zoom" data-play_type="loop" data-interval="10000" id="my-slider">

  <ol>

  <li>

  <!--<img src="Images/home/img-careers-administration.jpg"ism/image/slides/_u/1547235147554_184304.jpg"">-->

  <img src="Images/home/img-careers-administration.jpg">

  <div class="ism-caption ism-caption-0" data-delay='100'>Careers In Administration</div>

  </li>

  <li>

  <!--<img src="ism/image/slides/_u/1547235148056_434156.jpg">-->

  <img src="Images/home/img-careers-aviation.jpg">

  <div class="ism-caption ism-caption-0" data-delay='100'>Careers In Aviation</div>

  </li>

  <li>

  <!--<img src="ism/image/slides/_u/1547235148603_218988.jpg">-->

  <img src="Images/home/img-careers-engineering.jpg">

  <div class="ism-caption ism-caption-0" data-delay='100'>Careers In Engineering</div>

  </li>

  <li>

  <!--<img src="ism/image/slides/_u/1547235144111_34839.jpg">-->

  <img src="Images/home/img-careers-lawenforcement.jpg">

  <div class="ism-caption ism-caption-0" data-delay='100'>Careers In Law Enforcement</div>

  </li>

  <li>

  <!--<img src="ism/image/slides/_u/1547235136603_384700.jpg">-->

  <img src="Images/home/img-careers-medical.jpg">

  <div class="ism-caption ism-caption-0" data-delay='100'>Careers In Medicine</div>

  </li>

  <li>

  <!--<img src="ism/image/slides/_u/1547235148206_874742.jpg">-->

  <img src="Images/home/img-careers-nuclear.jpg">

  <div class="ism-caption ism-caption-0" data-delay='100'>Careers In Nuclear Power</div>

  </li>

  </ol>

  </div>

</div>

</body>

</html>

**************************************************And the following is my main.css for the background*************************************************************

@charset "UTF-8";

body {

  background-image: url(../Images/home/front-page-background.jpg);

  background-attachment: fixed;

  background-repeat: no-repeat;

  background-position: 0% 0%;

  float: left;

  left: 0px;

  right: 0px;

  top: 0px;

  bottom: 0px;

  clear: left;

  list-style-position: outside;

  border-width: 0px;

  border-collapse: collapse;

  width: 2500px;

  -webkit-box-shadow: inset 0px 0px;

  box-shadow: inset 0px 0px;

}

#section1 {

  position: relative;

  margin-left: 0px;

  margin-right: 0px;

  width: 2500px;

  z-index: 1;

  top: 0px;

  float: left;

  left: 0px;

  right: 0px;

  bottom: 0px;

}

I'm using ism-2.2.min.js to run my content slider.

***********************************************************The style sheet for the slider is called my-slider.css and the code is below**********************************************************

.ism-slider > ol, .ism-slider > ol > li, .ism-slider > ol > li > img { width: 100%; list-style: none; margin: 0; padding: 0; }

.ism-slider {

  overflow: hidden;

  position: relative;

  padding: 0 !important;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  cursor: default;

  z-index: 0;

  background-color: rgba(0, 0, 0, 0.1);

  -webkit-animation: ism-fadein 3s;

  -webkit-background-clip: padding-box;

  -moz-background-clip: padding;

  background-clip: padding-box;

}

@-webkit-keyframes ism-fadein {

  from { opacity: 0; }

  to { opacity: 1; }

}

@-webkit-keyframes ism-loading {

  50% { left: 120px; }

}

.ism-slider .ism-slides {

  list-style: none;

  position: absolute;

  height: 100%;

  top: 0;

  padding: 0 !important;

  margin-top: 0;

  margin-bottom: 0;

  z-index: 1;

}

.ism-slider li.ism-slide {

  height: 100%;

  overflow: hidden;

  position: absolute;

  display: block;

  top: 0;

  bottom: 0;

  margin: 0 !important;

  padding: 0 !important;

  background-color: #d5d5d5;

  text-align: center;

}

.ism-slider .ism-img-frame {

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

}

.ism-slider a.ism-image-link {

  position: absolute;

  color: inherit;

  text-decoration: none;

  display: block;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.ism-slider .ism-img {

  display: block;

  border: none;

  position: absolute;

  pointer-events: none;

}

.ism-caption {

  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

  padding: 0 1em;

  text-shadow: none;

  line-height: 1.2em;

  padding: 0.25em 0.5em;

  width: auto;

  height: auto;

  text-align: center;

  visibility: hidden;

}

a.ism-image-link .ism-caption, a.ism-caption {

  text-decoration: none;

  font-weight: normal;

}

a.ism-caption:hover {

  text-decoration: underline;

}

.ism-caption-0 {

  z-index: 3;

}

.ism-caption-1 {

  z-index: 4;

}

.ism-caption-2 {

  z-index: 5;

}

.ism-radios {

  margin: 0;

  padding: 0;

  list-style: none;

  color: #fff;

  font-size: 1px;

}

.ism-slider .ism-radios {

  position: absolute;

  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

  z-index: 6;

  bottom: 5px;

  left: 0;

  right: 0;

  width: auto;

  background-color: rgba(255, 255, 255, 0.0);

  padding: 0 7px;

  height: 0;

  overflow: visible;

}

.ism-slider .ism-radios.ism-radios-as-thumbnails {

  bottom: 5px;

}

.ism-radios li {

  position: relative;

  display: inline-block;

  margin: 0 3px;

  padding: 0;

}

.ism-radios input.ism-radio {

  display: none;

}

.ism-radios label {

  display: block;

  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

  margin: 0;

  text-decoration: none;

  cursor: pointer;

}

.ism-radios-as-thumbnails label {

  -webkit-background-size: 120% auto; -moz-background-size: 120% auto; -o-background-size: 120% auto; background-size: 120% auto;

  background-position: center center;

  background-repeat: no-repeat;

  border: 2px solid rgba(255, 255, 255, 0.6);

  opacity: 0.8;

}

.ism-radios-as-thumbnails label:hover {

  border: 2px solid #fff;

  opacity: 1;

}

.ism-radios-as-thumbnails li.active label {

  border: 2px solid rgba(255, 255, 255, 1.0);

  opacity: 1;

}

p.ism-badge {

  margin: 0 auto;

  text-align: right;

  font-size: 10px;

  padding-top: 1px;

  color: #ccc;

  font-family: sans-serif;

  font-weight: normal;

}

p.ism-badge a.ism-link {

  color: inherit;

  text-decoration: none;

  margin-right: 0.25em;

}

p.ism-badge a.ism-link:hover {

  color: #aaa;

  text-decoration: underline;

}

.ism-zoom-in {

  -webkit-animation: zoomin 0.81s linear 1;

  animation: zoomin 0.81s linear 1;

}

@-webkit-keyframes zoomin {

  0% { -webkit-transform: scale(1.0); transform: scale(1.0); }

  100% { -webkit-transform: scale(3.0); transform: scale(3.0); }

}

@14668356 zoomin {

  0% { -webkit-transform: scale(1.0); transform: scale(1.0); }

  100% { -webkit-transform: scale(3.0); transform: scale(3.0); }

}

@-webkit-keyframes fadein {

  0% { opacity: 0; }

100% { opacity: 1; }

}

@14668356 fadein {

  0% { opacity: 0; }

100% { opacity: 1; }

}

@-webkit-keyframes slidein {

  0% { -webkit-transform: translate(-1200px, 0); transform: translate(-1200px, 0); }

  100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }

}

@14668356 slidein {

  0% { -webkit-transform: translate(-1200px, 0); transform: translate(-1200px, 0); }

  100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }

}

@-webkit-keyframes popin {

  50% { -webkit-transform: scale(1.2); transform: scale(1.2); }

}

@14668356 popin {

  50% { -webkit-transform: scale(1.2); transform: scale(1.2); }

}

.ism-zoom-pan {

  -webkit-animation: zoompan 20.0s linear 1;

  animation: zoompan 20.0s linear 1;

}

@-webkit-keyframes zoompan {

  0% { -webkit-transform: translate(0, 0) scale(1.0); transform: translate(0, 0) scale(1.0); }

  50% { -webkit-transform: translate(-5%, -5%) scale(1.3); transform: translate(-5%, -5%) scale(1.3); }

  100% { -webkit-transform: translate(0, 0) scale(1.0); transform: translate(0, 0) scale(1.0); }

}

@14668356 zoompan {

  0% { -webkit-transform: translate(0, 0) scale(1.0); transform: translate(0, 0) scale(1.0); }

  50% { -webkit-transform: translate(-5%, -5%) scale(1.3); transform: translate(-5%, -5%) scale(1.3); }

  100% { -webkit-transform: translate(0, 0) scale(1.0); transform: translate(0, 0) scale(1.0); }

}

.ism-zoom-rotate {

  -webkit-animation: zoomrotate 20.0s linear 1;

  animation: zoomrotate 20.0s linear 1;

}

@-webkit-keyframes zoomrotate {

  0% { -webkit-transform: rotate(0) scale(1.0); transform: rotate(0) scale(1.0); }

  50% { -webkit-transform: rotate(-5deg) scale(1.3); transform: rotate(-5deg) scale(1.3); }

  100% { -webkit-transform: rotate(0) scale(1.0); transform: rotate(0) scale(1.0); }

}

@14668356 zoomrotate {

  0% { -webkit-transform: rotate(0) scale(1.0); transform: rotate(0) scale(1.0); }

  50% { -webkit-transform: rotate(-5deg) scale(1.3); transform: rotate(-5deg) scale(1.3); }

  100% { -webkit-transform: rotate(0) scale(1.0); transform: rotate(0) scale(1.0); }

}

/* SLIDER */

#my-slider {

    width: 2500px;

    height: 876px;

    border-radius: 0;

}

#my-slider-ism-badge {

    width: 2500px;

}

#my-slider .ism-button {

    display: block;

    border-radius: 25px;

    width: 50px; height: 50px; background-size: 16px 16px; top: 50%; margin-top: -25px;

    color: #fff; background-color: rgba(0, 0, 0, 0.3);

    opacity: 0.01;

}

#my-slider .ism-button:hover {

    background-color: rgba(0, 0, 0, 0.6);

}

#my-slider .ism-pause-button:hover {

    background-color: rgba(0, 0, 0, 0.6);

}

#my-slider .ism-radios {

    display: block;

    height: 80px;

    text-align: center;

}

#my-slider .ism-radios label {

    width: 40px; height: 40px;

    border-radius: 40px;

    color: #000; background-color: rgba(255, 255, 255, 0.5);

}

#my-slider .ism-radios li.active label {

    background-color: rgba(255, 255, 255, 1.0);

}

#my-slider .ism-radios label:hover {

    background-color: rgba(255, 255, 255, 0.8);

}

/* SLIDES */

#my-slider .ism-slide-0 .ism-img-frame {

    width: 100%;

}

#my-slider .ism-slide-0 .ism-img {

    width: 100%;

    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);

}

#my-slider .ism-slide-1 .ism-img-frame {

    width: 100%;

}

#my-slider .ism-slide-1 .ism-img {

    width: 100%;

    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);

}

#my-slider .ism-slide-2 .ism-img-frame {

    width: 100%;

}

#my-slider .ism-slide-2 .ism-img {

    width: 100%;

    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);

}

#my-slider .ism-slide-3 .ism-img-frame {

    width: 100%;

}

#my-slider .ism-slide-3 .ism-img {

    width: 100%;

    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);

}

#my-slider .ism-slide-4 .ism-img-frame {

    width: 100%;

}

#my-slider .ism-slide-4 .ism-img {

    width: 100%;

    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);

}

#my-slider .ism-slide-5 .ism-img-frame {

    width: 100%;

}

5

#my-slider .ism-slide-5 .ism-img {

    width: 100%;

    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);

}

/* CAPTIONS */

#my-slider .ism-slide-0 .ism-caption-0.ism-caption-anim {

    -webkit-animation: slidein 0.25s; animation: slidein 0.25s;

}

#my-slider .ism-slide-0 .ism-caption-1.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-0 .ism-caption-2.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-1 .ism-caption-0.ism-caption-anim {

    -webkit-animation: slidein 0.25s; animation: slidein 0.25s;

}

#my-slider .ism-slide-1 .ism-caption-1.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-1 .ism-caption-2.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-2 .ism-caption-0.ism-caption-anim {

    -webkit-animation: slidein 0.25s; animation: slidein 0.25s;

}

#my-slider .ism-slide-2 .ism-caption-1.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-2 .ism-caption-2.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-3 .ism-caption-0.ism-caption-anim {

    -webkit-animation: slidein 0.25s; animation: slidein 0.25s;

}

#my-slider .ism-slide-3 .ism-caption-1.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-3 .ism-caption-2.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-4 .ism-caption-0.ism-caption-anim {

    -webkit-animation: slidein 0.25s; animation: slidein 0.25s;

}

#my-slider .ism-slide-4 .ism-caption-1.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-4 .ism-caption-2.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-5 .ism-caption-0.ism-caption-anim {

    -webkit-animation: slidein 0.25s; animation: slidein 0.25s;

}

#my-slider .ism-slide-5 .ism-caption-1.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-5 .ism-caption-2.ism-caption-anim {

    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;

}

#my-slider .ism-slide-0 .ism-caption-0 {

    font-size: 3em;

    font-family: "Roboto", sans-serif;

    position: absolute; top: 81%;

    left: 73%;

    border-radius: 0;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.40);

}

#my-slider .ism-slide-0 .ism-caption-1 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 60%;

    left: 40%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-0 .ism-caption-2 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 20%;

    left: 60%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-1 .ism-caption-0 {

    font-size: 3em;

    font-family: "Roboto", sans-serif;

    position: absolute; top: 81%;

    left: 79%;

    border-radius: 0;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.40);

}

#my-slider .ism-slide-1 .ism-caption-1 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 60%;

    left: 40%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-1 .ism-caption-2 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 20%;

    left: 60%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-2 .ism-caption-0 {

    font-size: 3em;

    font-family: "Roboto", sans-serif;

    position: absolute; top: 81%;

    left: 76%;

    border-radius: 0;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.40);

}

#my-slider .ism-slide-2 .ism-caption-1 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 60%;

    left: 40%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-2 .ism-caption-2 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 20%;

    left: 60%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-3 .ism-caption-0 {

    font-size: 3em;

    font-family: "Roboto", sans-serif;

    position: absolute; top: 81%;

    left: 72%;

    border-radius: 0;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.40);

}

#my-slider .ism-slide-3 .ism-caption-1 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 60%;

    left: 40%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-3 .ism-caption-2 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 20%;

    left: 60%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-4 .ism-caption-0 {

    font-size: 3em;

    font-family: "Roboto", sans-serif;

    position: absolute; top: 81%;

    left: 77%;

    border-radius: 0;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.40);

}

#my-slider .ism-slide-4 .ism-caption-1 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 60%;

    left: 40%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-4 .ism-caption-2 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 20%;

    left: 60%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-5 .ism-caption-0 {

    font-size: 3em;

    font-family: "Roboto", sans-serif;

    position: absolute; top: 81%;

    left: 73%;

    border-radius: 0;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.40);

}

#my-slider .ism-slide-5 .ism-caption-1 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 60%;

    left: 40%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

#my-slider .ism-slide-5 .ism-caption-2 {

    font-size: 3em;

    font-family: sans-serif;

    position: absolute; top: 20%;

    left: 60%;

    border-radius: 4px;

    border: none;

    color: #fff; background-color: rgba(0, 0, 0, 0.70);

}

Sorry for all the code but I believe too much information is better than not enough. I sure hope you can help me.

With high regards for programmers everywhere,

Kim Hyback

    This topic has been closed for replies.
    Correct answer Nancy OShea

    I haven't seen spacer GIFs  for more than a decade .   Yes much has changed in web standards since CS5 came out.  

    To save time  I'm using Bootstrap here.  If you're new to Bootstrap, it's a very popular  framework for building responsive layouts and components that work in all devices.  Also since you work for the Navy, I'm using an older version of Bootstrap just in case you need to support pre-IE10 browsers. 

    Design responsive websites using Bootstrap in Dreamweaver

    Here's the code I used:

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.7 Carousel</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--Bootstrap CSS on CDN-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    body

    .center-block {float:none}

    #myCarousel img {width:100%; height:100%}

    </style>

    </head>

    <body>

    <div class="container-fluid">

    <div class="row">

    <h1>Bootstrap Carousel</h1>

    <!--begin Bootstrap Carousel-->

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <!--Slide items-->

    <div class="item active">

    <img src="https://placeimg.com/1200/400/nature" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/tech" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/arch" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span></a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span></a>

    <!--end carousel-->

    </div>

    </div>

    <!--begin 4 responsive columns-->

    <div class="row">

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

    </div>

    <!--/row--></div>

    <!--container--></div>

    <hr>

    <!--begn footer-->

    <div class="container-fluid">

    <div class="row">

    <footer class="text-center">

    <small>Footer text.... © 2019 all rights reserved</small>

    </footer>

    <!--/row--></div>

    <!--container--></div>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    January 20, 2019

    I haven't seen spacer GIFs  for more than a decade .   Yes much has changed in web standards since CS5 came out.  

    To save time  I'm using Bootstrap here.  If you're new to Bootstrap, it's a very popular  framework for building responsive layouts and components that work in all devices.  Also since you work for the Navy, I'm using an older version of Bootstrap just in case you need to support pre-IE10 browsers. 

    Design responsive websites using Bootstrap in Dreamweaver

    Here's the code I used:

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.7 Carousel</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--Bootstrap CSS on CDN-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    body

    .center-block {float:none}

    #myCarousel img {width:100%; height:100%}

    </style>

    </head>

    <body>

    <div class="container-fluid">

    <div class="row">

    <h1>Bootstrap Carousel</h1>

    <!--begin Bootstrap Carousel-->

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <!--Slide items-->

    <div class="item active">

    <img src="https://placeimg.com/1200/400/nature" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/tech" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/arch" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <a href="https://example.com" class="btn btn-lg btn-info">MORE INFO</a>

    </div>

    </div>

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span></a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span></a>

    <!--end carousel-->

    </div>

    </div>

    <!--begin 4 responsive columns-->

    <div class="row">

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

    </div>

    <!--/row--></div>

    <!--container--></div>

    <hr>

    <!--begn footer-->

    <div class="container-fluid">

    <div class="row">

    <footer class="text-center">

    <small>Footer text.... © 2019 all rights reserved</small>

    </footer>

    <!--/row--></div>

    <!--container--></div>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices