Moving elements in HTML / CSS

Navigation
-1

I have already searched the internet for how to do it but none is working.

I created a class called .img to test and at the time of treating it in CSS, I use .img{right: 500px;} as test, however nothing happens.

My idea was to put the block of images (all 100px by 100 px ) starting at 30% of the page, not centralized (what I would say 50%).

Note: As I made a page just for use on my PC, I did not put a lot of freshness, I just wanted to make a nice and useful book page for me. I did not program in HTML, I just wanted to make a page like that, and out of curiosity I did it to meet the need.

How is the page - > link

link

Top picture - > Since it has div within <center>

Bottom picture - > How I would like you to stay

HTML code 

<!DOCTYPE html>
<html>
    <head>
        <title>:: Home Page ::</title>
        <link rel="shortcut icon" href="images/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="estilos.css" media="all" />
    </head>
    <body background="images/fundo.jpg" bgproperties="fixed">

        <!--<center>-->
            <div>
                <p><img class="img" src="images/bookmarks.png" alt="Bookmarks" /></a></p>
                <p>
                    <a href="https://www.facebook.com/" target="_blank" ><img src="images/fb.png" alt="Facebook" /></a>
                    <a href="https://forum.pokexgames.com/" target="_blank" ><img src="images/pxg.jpg" alt="PXG Fórum" /></a>
                    <a href="http://youtube.com/feed/subscriptions" target="_blank" ><img src="images/youtube.jpg" alt="YouTube" /></a>
                    <a href="https://jovemnerd.com.br/nerdcast/" target="_blank" ><img src="images/jn.jpg" alt="Nerdcast" /></a>
                </p>
                <p>
                    <a href="https://github.com/" target="_blank" ><img src="images/github.png" alt="GitHub" /></a>
                    <a href="https://codefights.com/" target="_blank" ><img src="images/codefights.png" alt="Codefights" /></a>
                    <a href="https://www.datacamp.com/home" target="_blank" ><img src="images/datacamp.png" alt="Datacamp" /></a>
                    <a href="http://reborn.farma-alg.com.br/" target="_blank" ><img src="images/farmaalg.jpg" alt="FarmaAlg" /></a>

                </p>
                <p>

                    <a href="https://www.codecademy.com" target="_blank" ><img src="images/codecademy.jpg" alt="Codecademy" /></a>
                    <a href="https://pt.khanacademy.org/" target="_blank" ><img src="images/khan.jpg" alt="Khan Academy" /></a>
                    <a href="https://trello.com/" target="_blank" ><img src="images/trello.png" alt="Trello" /></a>
                    <a href="https://www.sololearn.com/" target="_blank" ><img src="images/sololearn.jpg" alt="SoloLearn" /></a>
                </p>
                <p>
                    <a href="https://web.whatsapp.com/" target="_blank" ><img src="images/wpp.png" alt="Whatsapp" /></a>
                    <a href="https://www.urionlinejudge.com.br/judge/pt/" target="_blank" ><img src="images/urionline.gif" alt="URI Judge" /></a>
                    <a href="https://br.pinterest.com/" target="_blank" ><img src="images/pinterest.png" alt="Pinterest" /></a>
                    <a href="https://webmail.inf.ufpr.br/?_task=mail&_mbox=INBOX" target="_blank" ><img src="images/roundcube.png" alt="Roundcube" /></a>
                </p>
            <div>
        <!--</center>-->
    </body>
</html>

CSS Code: 

.img {right: 500px}
    
asked by anonymous 25.10.2017 / 23:23

1 answer

0

Opa friend!

You can not understand directly what you want to do, but let's get ideas ...

In your attempt to move 500px right, so that it works you can use some methods: 

.img{right: 500px; float:left;}

Or also: 

.img{right: 500px; position:absolute;}

However, if you want to start from 30% of the page, you would have to change the 500px by 30%.

I hope I have helped, ask me anything!

    
25.10.2017 / 23:55
How do I get field values? Result 0.0 - even with typecast or swapping variable types