How can I move images around in html or CSS?-CodePudding

As the title says I'd like to move around the images which are in the html file. I tried some options both in html and CSS to no avail. When I try to change the properties of a picture in CSS so I can lower it further down, nothing happens.

<html>
   <head>
      <link rel="stylesheet" href="css/style.css" />
      <style>
         img {
            float: right;
         }
         r1 {
            float:  center;
         }
      </style>
   </head>
   <body background="background.jpg">

    <img  src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\planet-violet-astronout.png" height="550"/>

      <img  src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r1.png" height="110"/>

      <img  src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r2.png" height="110"/>

      <img  src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r3.png" height="110"/>

   </body>

</html>

and also for CSS:

.r2{

position:  relative;
left: 20px;

}

CodePudding user response：

add css class symbol when calling the ri class name

wrong r1

correct .r1

CodePudding user response：

If it's for a site that will be used on a lot of diffent devices with different screensizes then you'll probably want to use a flexbox or grid with CSS. But that's kinda hard to wrap your head around in the beginning.

If it's a page that will only be used by you on a device with a screenresolution that you already know, then it might be easier to just use position: absolute; and play with the top:...; and left:...; values.

<html>
  <head>
    <style>
      body{
        background-image:url('background.jpg');
      }
      
      img {
        position: absolute;
        border: solid 1px black; /*Remove this, just for visualation without img sources*/
      }
      
      .manonmoon{
        width: 300px; /*Remove this or replace with auto*/
        height: 550px;
        top: 0px;
        left: 0px;
      }

      .r1, .r2, .r3 {
        width: 90px; /*Remove this or replace with auto*/
        height: 110px;
      }
      
      .r1 {
        top: 560px;
        left: 0px;
      }
      
      .r2 {
        top: 560px;
        left: 105px;
      }
      
      .r3 {
        top: 560px;
        left: 210px;
      }
    </style>
  </head>

  <body>
    <img  src=".." alt="...">
    <img  src="..." alt="...">
    <img  src="..." alt="...">
    <img  src="..." alt="...">
  </body>
</html>