CODEWITHSUNDEEP
jqueryhtmlcss
Anthosiast
Anthosiast

Reputation: 556

Slider from Top

Something is going wrong with my images, I couldnt solve this problem. Here is my coding..

HTML

<div id="adsBox">
    <div id="ads"> <a href="#"> <img src="picture.jpg" alt="ads"> </a> </div>
    <p> <a href="#" id="showLink" class="showAds">HIDE</a> </p>
</div>

CSS 

#ads {
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

#adsBox {
    text-align:right;
    color:black;
    width:970px;
    margin:0 auto;
    background-color:#E0E0E0;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

#adsBox a {
    color:#535353;
    padding:0;
    margin:0;
}

#adsBox a:hover {
    color:#4682b4;
}

#ads a {
    margin:10px;
}

#showLink {
    text-decoration:none;
}

.hideLink {
    display:none;
}

I'm using jQuery to slide down. Everything is alright just the problem is image is not really on the div. It's a little bit moving to the right. Here is JSFIDDLE. Any ideas?

Upvotes: 0

Views: 43

Answers (2)

Anthosiast
Anthosiast

Reputation: 556

The error is here.

#ads a {
    margin:10px;
}

The image inside div will move to the right a little bit because of margin left has 10 pixels. It has to delete.

Upvotes: 0

T J
T J

Reputation: 43156

You have set the width in pixels, as width:970px;

change it to

width:100%;

FIDDLE

side note: you might want to close the img tag, hope this fixes your problem

Upvotes: 1

Related Questions