CODEWITHSUNDEEP
javascripthtmlcss
toadflax
toadflax

Reputation: 375

How do I move my image's position?

I have placed an image on my website homepage, however I want to move the position of the image rather than manipulate the pixels of the image. I'm sure it has something to do with padding or margins however I'm not sure how to implement it into my program. Here's my code: 

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheetMain.css">

<title> Main Page </title>

</head>

<body>

<!-- This is the image I want to move around! -->
<img src="blake.jpg" alt="Mountain View" style="width:141px;height:114px;">


<div class="link1" onclick="location.href='';" style="cursor: pointer;">
</div>
<div class="link2" onclick="location.href='ImagePage.html';" style="cursor: pointer;">
</div>
<div class="link3" onclick="location.href='gamequiz.html';" style="cursor: pointer;">
</div>
<div class="link4" onclick="location.href='orderform.html';" style="cursor: pointer;">
</div>
<div class="link5" onclick="location.href='comments.html';" style="cursor: pointer;">
</div>

<div class="link6" onclick="location.href='';" style="cursor: pointer;"><br><br><br>
Author: Michael Cattermole
</div>


</body>

</html>

Upvotes: 0

Views: 99

Answers (3)

solid90
solid90

Reputation: 127

Here's one way... wrap the img in a div like so...

<div class="relP">
  <img src="blake.jpg" alt="Mountain View">
</div>

then in your css include this...

.relP{
  position: relative;
}

.relP img{
  position: absolute;
  left: 50px;
  top: 50px;
  height: 114px;
  width: 141px;
}

Your image is now absolutely positioned. By adjusting the "top" and "left" numbers you can change where the image is on the page. You can also center the image horizontally by setting .relP img like so...

.relP img{
  position: absolute;
  left: 0;
  right: 0;
  margin:0 auto;
  height: 114px;
  width: 141px;
}

Hope this helps!

Upvotes: 0

Johannes
Johannes

Reputation: 67748

I suppose that you want to have only a part of the image visible inside a smaller container. So the image in your code would be 141 x 114 px, but you want to display part of it in orignal size inside a frame that is 100x100px. Is that want you want?

If yes, you can use negative margin- values to achieve this. However, you will also need a container that contains (masks) the cut-out part of your image and makes the rest invisible. So you would have something like this:

<div style="style="position: relative;width:100px;height:100px;overflow: hidden;">
  <img src="blake.jpg" alt="Mountain View" style="position: relative;width:141px;height:114px;margin-top:-20px;margin-left:-7px;">
</div>

Still, it would be much easier to handle if you'd use classes for this, like:

<style type="text/css">
  .x {
    position: relative;
    width:100px;
    height:100px;
    overflow: hidden;
  }
  .x img {
    position: relative;
    width:141px;
    height:114px;
    margin-top:-20px;
    margin-left:-7px;
  }
</style>

<div class="x">
  <img src="blake.jpg" alt="Mountain View">
</div>

Upvotes: 0

Stefan
Stefan

Reputation: 81

You can only set a position of a component if the position is relative, fixed, or absolute. If you did that, you can set the Left and Top in the style to a value. For example:

<img src="blake.jpg" alt="Mountain View" style="width:141px;height:114px; position:absolute; left:200; top:500;">

Upvotes: 1

Related Questions