CODEWITHSUNDEEP
jqueryhtmlcss
jn025
jn025

Reputation: 2895

css images moving together and not individually

Whenever I try and move the images, they are moving together instead of individually even though I specifically identify the id. 

body {
    margin:0;
    padding:0;
    position:relative;
    background:url(../images/imgs/backgrnd.png) no-repeat;
    background-size:cover;
}

@font-face {
    font-family:mainText;
    src:url(../font/HelveticaNeueLTPro-UltLtEx.otf);
}

#holder {
    background:url(../images/imgs/rectangle%20and%20letters.png) no-repeat;
    width:500px;
    height:600px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:11.2em;
}

ul {
    list-style:none;
    list-type:none;
    padding:0;
    margin:0;
}

#nextarrow {
    margin-left:350px;
}


<section id="cont"> <!-- main content wrapper -->
    <div id="holder">
        <ul id="imagelist"> <!-- image cycle: prev/next -->
            <li><img src="images/imgs/iPhone.png" width="256" height="256" border="0"></li>
            <li><img src="images/imgs/websitesimg.png" width="289" height="187" border="0"></li>
        </ul>

    </div>
</section>

<div id="arrows">
    <img src="images/imgs/rightarrow.png" id="nextarrow" width="15" height="130" alt="ja" />
    <img src="images/imgs/leftarrow.png" id="prevarrow" width="15" height="130" alt="la" />
</div>

the images inside div id="arrows" is what I'm trying to move and even though i specify #nextarrow { it's moving the entire I only want to move one image at a time by either id or using first/last child

Upvotes: 3

Views: 1152

Answers (2)

BuddhistBeast
BuddhistBeast

Reputation: 2670

Your images appear to be inverse. If you switch the order of the images, it will affect what happens next. Let me break it down a little bit for you. If the first image is the right arrow and the second image is the left arrow, you will have two arrows pointing at one another: -> <- Now what CSS does, when you decide to give the "next arrow" a margin-left of anything, will shift the entire contents of the right arrow along with whatever is after it.

So again, you put the right arrow first, meaning you called for the right arrow to move along with whatever is after that arrow. Now, if you wanted to keep the right arrow on the left and the left arrow on the right but still separate the two, you would just call for CSS to shift the "prev arrow" like this :

#prevarrow {
margin-left:350px;

}

and this will actually shift the arrows to look like this: -> <-
However, lets go with another scenario: what if you swapped the images? So now it would look something like this: <- -> Well, as it may seem, if you were to use the exact same CSS code as you have posted:

#nextarrow {
    margin-left:350px;
}

it would only shift the right arrow and anything after that right arrow, which in this case is nothing. But vice versa, if you were to use the CSS with "prevarrow" now in this case of it being flipped, it would move both of the arrows. I encourage you to swap the images and see what happens with both of the above CSS codes. You will notice that one will shift the contents of the entire line over while the other one will simply just shift one arrow. Again, my jsfiddle will also explain what happened: http://jsfiddle.net/HdA24/2/

Upvotes: 1

James Lai
James Lai

Reputation: 2071

Images are inline, which means as you add margin to the right arrow, which is ironically appearing on the left, the image immediately beside it is going to be affected by that padding/margin.

I would recommend taking some time to learn about the box model.

Upvotes: 2

Related Questions