I don't know how to use css to divide my site-CodePudding

I want to create a website like this i don't know how to use margin and padding and many others in this situation to make sure the menu bar on left and main content in center ,and the last description with picture on right. thanks for the attention!

[This image is the website that i need to create] [1]: https://i.stack.imgur.com/XAWj3.png

CodePudding user response：

If you want, you can use Bootstrap for CSS. It's pretty easy to use with there "user guide". If you really want to do it by yourself, you can use Grid that is more easy to use. Here's the w3school page to help you with Grid:https://www.w3schools.com/css/css_grid.asp

Also, there's the bootstrap website : https://getbootstrap.com/

CodePudding user response：

If you simply want to move it using CSS, it isn't that difficult. Here are a few keywords you can use in the future:

"position: absolute;" this makes your image stay where you want it to.

"position: relative;" this makes your image work around other images and in this scenario, on top of it.

"left: _px;" this allows you to move your image on the x-axis/horizontal based on the number of pixels provided.

"bottom: _px;" this allows you to move your image on the y-axis/vertical based on the number of pixels provided.

These here are basics for moving your tags and here is an example of how to use them:

HTML:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>test</title>
    <link rel="stylesheet" href="Style.css">
  </head>
  
  <body>
    <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" id="img1">
    <img src="https://media.istockphoto.com/photos/small-island-reflected-in-calm-hintersee-lake-at-clear-autumn-morning-picture-id1297205117?s=612x612" id="img2">
    <h1 id="text1">Hi.</h1>
    
    <script>
      
    </script>
  </body>
</html>

CSS:

html{ 
  background-color: green;
}

#img1{
  position: absolute;
  padding: -20px;
  left: -5px;
  bottom: -3px;
}

#img2{
  position: relative;
  left: 550px;
  bottom: 7px;
}

#text1{
  position: relative;
  color: white;
  left: 600px;
}