Resize an image wtihin an a ref, within a div

Question

I'm trying to resize a div with an id of "homeLink". I'll start by stating that I'm a n00b to CSS and I'm looking to be thrown a bone, only because I know this is so simple. I'm also sure that it would explain something fundamental to usage of CSS that I don't understand, so any pointers to links that will help would be appreciated.

I saw this post, but I'm not sure that I understand why I can't do what I'm trying to. I did RTFM (the one I could find), and I still don't get it. I would like to avoid invoking js for this, but maybe I wouldn't need to regardless.

Thanks for any help; code below.

    <html>
        <head>
            <style> 
                #homeLink { 
                    /*this doesn't work */
                    // width: 50%;
                    position:absolute;
                    left:10px;
                    top: 770px;
                }

                /* nor does this */
                #homeLink a {
                    width: 10%;
                }       
            </style>
        </head>

        <body>
            <div id="homeLink"><a href="http://www.someurl.com"><img src="homebutton.png"/></a></div>
        </body>
    </html>

score 2 · Answer 1 · edited May 07 '12 at 13:22

2

As @Mr D stated, You need to resize the image itself not the div.

This part:

#homeLink a {
width: 10%;
}

is actually wrong in terms of CSS as a has no width property. You can preformat certain behaviors or links using CSS, such as underline whilie hovering mouse over link and changing the color of visited links:

a.hover {text-decoration: underline}
a.visited {color: #999999}

edited May 07 '12 at 13:22

bluish

26,356
27
122
180

answered May 06 '12 at 19:50

darf

21
3

Just to add to that good explanation, changing the height of the #homeLink a is like making a house bigger, you can make it as big as you want but that fridge inside it will not change. In order to do that you, would have to physically make the fridge bigger. Its the same principle here, you were making the container bigger but not the actual image. – 1321941 May 06 '12 at 19:56
bluish and darf: thanks so much for the wonderful explanations. – jml May 07 '12 at 18:19

score 1 · Accepted Answer · answered May 06 '12 at 19:41

1

<img class="image" src="homebutton.png"/>

then in your css style it:

.image {
height: 200px;
width: 300px;
}

answered May 06 '12 at 19:41

1321941

2,139
5
26
49

Thanks very much. Hey, can you explain to me when to use a class and when to use an id? For ex., I tried to use an id in this case with the img tag, but it didn't work. – jml May 07 '12 at 18:21
A class is for whenever you have lost of something(think of it like a category) where as an id is for something unique. If we put it in terms of a school, you would have a class of students who all belong to the same class so they may have similar proprieties, but they will all have unique attributes too, thus they have an ID. So they will belong to the class and inherit some proprieties, but also have a ID which is unique to the individual. – 1321941 May 07 '12 at 18:36

score 0 · Answer 3 · answered May 06 '12 at 19:52

this is not resizing because of image in container div that may be larger than the container widht and height

you can achive this by adding overflow hidden to container div.
or using following css

#homeLink,#homeLink a img { 

                    width: 50%;
                    position:absolute;
                    left:10px;
                    top: 770px;
                }
or

#homeLink{
      width:50%;
      position:absolute;
      left:10px;
      top:770px;
      overflow:hidden;
}

i found this very complicated in relation to what i was asking. there may be lots of information to explore here, but i don't think it pertains as much as the other users' info. — jml, May 07 '12 at 18:20

Resize an image wtihin an a ref, within a div

3 Answers3