Move an image in HTML
Tilep97411
Posted messages
1
Status
Member
-
feco -
feco -
Hello, I am looking for how to move an image on my website page to a specific location, using HTML.
Configuration: Windows 7 / Firefox 18.0
Configuration: Windows 7 / Firefox 18.0
2 answers
Hi there!
Well, you have two phases: HTML and CSS.
1- HTML
You create your div where you want to receive your image, and that in another div which will be its parent to move it. For example:
<div class="parent">
<div class="image1"><img src="#"></div>
</div>
2- CSS
New document: CSS
This is where all your class attributes will go.
Either:
.parent{
width:500px;
height:500px;
}
.image1{
margin: 100px 0 0 50px;
}
(the values mean: margin-top:100px; margin-right:0px; margin-bottom:0px; margin-left:50px;)
So to summarize: You have a block of 500px by 500px in which you incorporate your image (provided that it's smaller), which will be shifted 100px down and 50px to the right.
Well, you have two phases: HTML and CSS.
1- HTML
You create your div where you want to receive your image, and that in another div which will be its parent to move it. For example:
<div class="parent">
<div class="image1"><img src="#"></div>
</div>
2- CSS
New document: CSS
This is where all your class attributes will go.
Either:
.parent{
width:500px;
height:500px;
}
.image1{
margin: 100px 0 0 50px;
}
(the values mean: margin-top:100px; margin-right:0px; margin-bottom:0px; margin-left:50px;)
So to summarize: You have a block of 500px by 500px in which you incorporate your image (provided that it's smaller), which will be shifted 100px down and 50px to the right.