I have this website I am trying to do some work on, one of the things I must do is add 2 images to the sides of the main image which is a slider (3 rotating images on the main page). I figured this would be a simple drag and drop job, however, when I drop the image into the space it causes the slider to shift down quite a ways, and the image I am adding to implement itself only on the far left of the screen.
Any idea of what I can do to add the 2 images next to the slider? I believe this issue has to do with the margins used to center the image, Is there a way to center them without using margins?
The page isn't live. It's currently being edited, and isn't supposed to be launched for about a week.
I am simply trying to drag and drop an image next to another image. The problem is that image has some sort of margin or white space next to it, in order to keep it centered, and due to it being there any image I add pushes the original image down the screen.
I can't do that at the moment, but here is the code for the slider.
[code]
.slider{ width:961px;position:relative; z-index:1; background:#fff; padding:20px;}
.flexslider {width: 100%; margin: 0;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* control Nav */
.flex-control-nav{ position:absolute; bottom:-81px; left:290px;}
.flex-control-nav li{ display:block; float:left; margin-right:1px;}
.flex-control-nav li a{ display:block; background:url(../images/pagination.png) 0 0 no-repeat; width:24px; height:24px; text-indent:-5000px;}
.flex-control-nav li a:hover,.flex-control-nav li a.active{ background-position:0 -25px;}
/* Caption */
.flex-caption{ position:absolute; font:22px/30px Arial, Helvetica, sans-serif; color:#372d7e; text-align:center; width:60%; bottom:-30px;}
/* Background */
.bg-slider{ background:url(../images/bg-slider.png) 50% 50% no-repeat; width:961px; height:455px;}
.main-slider{
width:650px;
margin:0 auto;
padding-left:0px;
height:465px;
overflow:hidden;
}
@media only screen and (min-width: 650px) and (max-width: 995px) {
.main-slider{ width:650x; height:400px; padding-left:0;}
.slider {width:485px; padding:10px;}
.bg-slider{ width:503px;background:url(../images/bg-slider2.png) 0% -4px no-repeat; }
.flex-control-nav{left:45%;}
}
@media only screen and (max-width: 767px) {
.main-slider{ width:300px; height:190px; padding-left:0;}
.slider {width:276px; padding:10px;}
.bg-slider{ width:300px;background:url(../images/bg-slider4.png) 0% 4px no-repeat; }
.flex-control-nav{left:40%; bottom:15px;}
.flex-caption{ display:none;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.main-slider{ width:280px; height:174px; padding-left:0;}
.slider {width:395px; padding:10px;}
.bg-slider{ width:420px;background:url(../images/bg-slider3.png) 0% 2px no-repeat; }
}
[/code]
Here is the HTML for that segment..
<div class="main-slider">
<div class="bg-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="images/slide1.jpg" alt=""><div class=" flex-caption"><span>We bridge the cash flow gap between contract and close!</span></div></li>
<li><img src="images/slide2.jpg" alt=""><div class=" flex-caption"><span>Receive cash from the sale of your home before closing.</span></div></li>
<li><img src="images/slide3.jpg" alt=""><div class=" flex-caption"><span>Moving is one of the top stress producers. We can help!</span></div></li>
</ul>
</div>
</div>
</div>
</div>
The bad news is that I think it's too hard to make this call without seeing the live page.
I can see the slider but it's not centered in the container. And since you have these mobile queries in your code, it's hard to know how adding an image is going to affect the layout on the alternate sized viewports, etc., etc. Maybe someone else has some good ideas, but I'm just not willing to guess....
Unfortunately, that image offers very little to aid us in finding the solution for you.
Without an actual working copy of the page on a server that we can look at via a link (temporary file on the server in a temporary folder, have it password protected if you're really worried about anybody finding it by accident), you can try pasting the entire HTML of your page and entire CSS here.
It's a bit of a pain in the backside to try to ferret out a problem that way, so the answer may be very slow in coming.
Well, if any other Dreamweaver newbies have this question and want an answer and NOT a run around. I found it on YouTube, and not these lovely forums. It turns out I was not adding the image correctly to the page. Once I followed this procedure, I was able to drag and drop it like any other image object on any other web page I designed using other software.
North America
Europe, Middle East and Africa
Asia Pacific