Moving Around an Image Using CSS

I used this technique to adjust where the Creative Commons License sits on my page. When first copying in the code, it automatically places itself (the button and text) in the bottom left-hand corner of your page. I wanted it to sit in the top right-hand corner of my page, so this technique will show you how to do that.

Step One: Put in the code for the button or image into your HTML into a Div. Assign this div an id, which will be its “name” referenced in css. Since I was placing the license my div’s id is “cclicense”.

Screen Shot 2017-04-04 at 2.30.19 PM

Press enter and then insert the code for your image. My code shows up as a link because it’s a button, however your code will be for an image most likely.

Screen Shot 2017-04-04 at 2.33.05 PM.png

After this, make sure to close your div and then we move over to css.

Screen Shot 2017-04-04 at 2.35.54 PM

This is your css code. To interact with your div id, use a pound/hashtag and then your id name. Set your position to absolute and then your distances from the left, right, top and bottom margin are up to you. It’s important to keep in mind that the distances are FROM the margin. So when it is “right: 20px;” it is moving the image 20 pixels away from the right margin, not right 20 pixels from its original location. The same principle applies when setting the distance from the other margins.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s