CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 443

How do i prevent my image link to be the width of the entire page?

This here is my html source code:

<a href="#section-1">
    <img src="/images/site-images/scrolldown2.png" style="display: block; margin:auto;">
</a>

When i try to use it this way to make my image with a width of 196px link to somewhere, the link spans the entire page width. I only want the link to be available when hovering over the image.

EDIT: The image needs to stay centered horizontally.

Upvotes: 0

Views: 519

Answers (3)

Gandalf
Gandalf

Reputation: 13693

Add a class to your code

<a class="my_link" href="#section-1">
    <img src="/images/site-images/scrolldown2.png" style="display: block; margin:auto;">
</a>

Fiddle http://jsfiddle.net/thiswolf/hMR9a/1/

This makes the image not clickable

    .my_link{
pointer-events: none;
}

This makes the image clickable

    .my_link:link{
cursor:pointer !important;
pointer-events: auto;
}

Upvotes: 0

jackJoe
jackJoe

Reputation: 11148

To align the image, and get what you requested:

Place a class (so that you can style it), remove the inline styles of the image, and specify the width of the a and by using the auto left and right margins (and because we specified a width) it will align it to the centre.

HTML

<a href="#section-1" class="link">
    <img src="/images/site-images/scrolldown2.png">
</a>

CSS:

.link {
    display: block;
    width: 196px;
    margin: 0 auto;
}

Upvotes: 4

Hardy
Hardy

Reputation: 5631

Use this:

<a href="#section-1" style="margin: 0px auto; display: block; width: 196px">
    <img src="/images/site-images/scrolldown2.png" style="display: block;">
</a>

or absolute position:

<a href="#section-1" style="position: absolute; left: 50%; margin-left: -98px; display: block; width: 196px">
    <img src="/images/site-images/scrolldown2.png" style="display: block;">
</a>

Upvotes: 0

Related Questions