Html - how to make it? in css file

KalMocha
March 26, 2024
124 views
0 votes
2 Answers

`I don’t know how to position these elements. I’ve written the HTML, but I can’t position the elements in the CSS file

HTML:

<!DOCTYPE html>
<html lang="ru">        
<head>
    <meta charset="UTF-8">
    <title>Блочная верстка</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            width: 500px;
            height: 100px;
        }
        .orange {
            background-color: orange;
        }
        .blue {
            background-color: blue;
        }
        .pink {
            background-color: lightpink;
        }
        .yellow {
            background-color: yellow;
        }
        .green {
            background-color: yellowgreen;
        }
        .purple {
            background-color: purple;
        }
        .gray {
            background-color: gray;
        }
        .red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="orange"></div>
        <div class="blue"></div>
        <div class="pink"></div>
        <div class="yellow"></div>
        <div class="gray"></div>
        <div class="purple"></div>
        <div class="green"></div>
        <div class="red"></div>
    </div>
</body>

</html>
[this elements](https://i.stack.imgur.com/HpixF.png)


i'm tried this csss file:
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
}

div {
    position: absolute;
}

.purple {
    background-color: purple;
    width: 221px;
    height: 715px;
    top: 0;
    left: 0;
}

.orange {
    background-color: orange;
    width: 700px;
    height: 220px;
    top: 0;
    left: 221px;
}

.blue {
    background-color: blue;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pink {
    background-color: lightpink;
    width: 100px;
    height: 100px;
    bottom: 0;
    left: 0;
}

.yellow {
    background-color: yellow;
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 0;
}

.gray {
    background-color: gray;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.green {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
    top: 70%;
    left: 70%;
}

.red {
    background-color: red;
    width: 100px;
    height: 100px;
    top: 30%;
    left: 30%;
}

``

Tags: css html

Answers

You can use display grid in css to position ur div correctly like in the example

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

div.container {
    display: grid;
    grid-template-rows: 100px 1fr 100px; /* Adjust rows for how u like */
    grid-template-columns: 50% 2fr 1fr; /* Adjust columns for how u like */
    grid-template-areas: 
    "purple-zone orange-zone orange-zone"
    "blue-zone green-zone yellow-zone"
    "footer footer footer";
    max-width: 1120px;
    height: 100%;
    margin: 0 auto; 
}

.purple {
    background-color: purple;
   grid-area: purple-zone;
}

.orange {
    background-color: orange;
    grid-area: orange-zone;
}

.blue {
    background-color: blue;
    grid-area: blue-zone;
}

.pink {
    background-color: lightpink;
    grid-area: footer;
}

.yellow {
    background-color: yellow;
    grid-area: yellow-zone;
}

.green {
    background-color: yellowgreen;
    grid-area: green-zone;
}

.red {
    background-color: red;
    text-align: center;
    margin: 5px;
}

.border {
    border: solid blue 2px; /*Border for your text*/
}

HTML:

<!DOCTYPE html>
<html lang="ru">        
<head>
    <meta charset="UTF-8">
    <!--Importing ur css file-->
    <link rel="stylesheet" href="main.css">
    <title>Блочная верстка</title>
</head>
<body>
    <div class="container">
        <div class="purple"></div>
        <div class="orange"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="yellow">
            <div class="red">Your text</div>
            <div class="red border">Your text</div>    
        </div>
        <div class="pink"></div>
       
    </div>
</body>

</html>

You can use Flexbox and Grid layout interchangeably to achive this.

Just make sure you use flex: 1 appropriately. Also, if something is display: flex, all its parents and ancestors need to be display: flex or it won’t work.

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-size: smaller;
}

header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 4rem;
}

header div:first-child {
  background: purple;
}

header div:last-child {
  background: orange;
}

.content {
  display: flex;
  flex-direction: row;
  flex: 1;
}

nav {
  width: 10rem;
  background: blue;
}

main {
  flex: 1;
  background: yellowgreen;
}

aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 10rem;
  gap: 1rem;
  padding: 1rem;
  background: yellow;
}

aside > section {
  background: red;
  border-radius: 1rem;
  padding: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
          line-clamp: 3; 
  -webkit-box-orient: vertical;
}

footer {
  height: 2rem;
  background: pink;
}

<header>
  <div></div>
  <div></div>
</header>
<div class="content">
  <nav></nav>
  <main></main>
  <aside>
    <section>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <section>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
  </aside>
</div>
<footer></footer>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to make it? in css file

Answers