CODEWITHSUNDEEP
htmlcss
Meh234
Meh234

Reputation: 1

How can I move images around in html or CSS?

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 class="manonmoon" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\planet-violet-astronout.png" height="550"/>

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

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

      <img class="r3" 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;

}

Upvotes: 0

Views: 9752

Answers (2)

T-S
T-S

Reputation: 747

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.

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;
}
<img class="manonmoon" src=".." alt="...">
<img class="r1" src="..." alt="...">
<img class="r2" src="..." alt="...">
<img class="r3" src="..." alt="...">

Upvotes: 0

Emmanuel uzoezie
Emmanuel uzoezie

Reputation: 441

add css class symbol when calling the ri class name

wrong r1

correct .r1

Upvotes: 1

Related Questions