Highlighted

Kim's Div tag discrepancy

New Here ,
Jan 19, 2019

Copy link to clipboard

Copied

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); }

}

@keyframes 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; }

}

@keyframes 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); }

}

@keyframes 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); }

}

@keyframes 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); }

}

@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); }

}

.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); }

}

@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); }

}

/* 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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

161

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Kim's Div tag discrepancy

New Here ,
Jan 19, 2019

Copy link to clipboard

Copied

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); }

}

@keyframes 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; }

}

@keyframes 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); }

}

@keyframes 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); }

}

@keyframes 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); }

}

@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); }

}

.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); }

}

@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); }

}

/* 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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

162

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 19, 2019 0
Adobe Community Professional ,
Jan 19, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2019 1