View original (French)

Move an image in HTML

Tilep97411 Posted messages 1 Status Member -  
 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

2 answers

  1. feco
     
    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.
    3