How to move elements in HTML/CSS

Asked

Viewed 15,277 times

-1

I’ve already searched the internet for how to do it but none of it is working.

I created a class calling for .img for testing and when handling it in CSS, use .img{right: 500px;} as a test, but nothing happens.

My idea was to place the block of images (all 100px for 100 px) starting at 30% of the page, and not centered (which I would say 50%).

Obs.: As I made a page just for use on my PC, I did not put much freshness, just like to make a nice and useful favorite page for me. I don’t program in HTML, I just wanted to make a page like this, and out of curiosity I did it to meet the need.

How is the page -> https://imgur.com/a/N5lJ2

https://imgur.com/a/NHhHu

Top image -> How you are with div inside <center>

Bottom image -> How would you like it to look

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}
html css

  • right: 500px; is to position at 500 pixels on the right. Is this what you want to do ? However it only works for relative or absolute positioning. Or are you trying to assign the image size ? I couldn’t figure out what you’re trying to do.

  • https://imgur.com/a/NHhHu Look at this image. The inside square would be the 4x4 grid of images(100px per 100px each). On the top image is how the grid is using <center>. And the bottom image is with oeu would like it to stay, but using these codes it does not move. Even if I take the <center> is all on the left only, without moving even a px.

  • Try putting position: relative; in class .img

  • Besides, there’s a </a> remaining after the image.

  • Missing position: relative really. Thank you very much.

1 answer

0


Opa friend!

I could not understand directly what you want to do but let the ideas...

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

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

Or else:

.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’ve helped, anything you ask!

  • I tried both now and neither has moved. https://imgur.com/a/NHhHu This link has the first image(as it is) and the second (as I would like it to be).

  • You want to move what exactly, just the image?

  • I have 16 images (4x4) with 100px per 100 px each. It forms a block, which either stay all on the left, or stay centered using <center>. Would like this image grid to be positioned on 30% of the page for example.

  • Could you draw more or less like you want these 16 images? (one below the other, etc)

  • I updated the post with two image links. One shows how it is. The other shows the idea of how it is, and how I would like it to be.

  • Let me see if I got it then, do you want to center your entire page? Or make sure that all content is 30% left to right?

  • No, it is already centered using the <center>. I would like to leave this middle image grid to the left. But using left: 500px or right: 500px does not move. Neither top, nor down, nor anything. There is probably something wrong with the pq code if I use background in class . img, bg changes.

  • It does so, in that <div> before <p><img class="img" src="background.png" alt="Bookmarks" /></a></p>, creates a style for it with the "width" in the total size of the images counting on the spaces between them, and that div you put the left:500px; and the float:left; and tells me if this is it

  • It’s 400 wide because it’s 4 100px images, adds the space between them and puts it in width

  • I put it like this and it worked: . test{left: 20%; float:left; position: Absolute;} Thank you very much!

  • If you are going to use position it makes no sense to use the float, it nullifies the float function. Happy to have helped!

  • True, I took here and it was even better hehe

Show 7 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.