Html Question posted in
Some basic documentation can be found here.

Html – How to create multiple css blocks of different size with several sub-blocks inside of each?

How to create multiple css blocks of different size with several sub-blocks inside of each?

Is there maybe a tool such as css grid generator or some good tutorial?

I am very new in the front-end dev, so I am struggling to understand how to create the following web-page. The web-page is without scrolling down or side. As far as I understood the I could have done it with the grid or flexbox, but my tiles are organized differently and some tiles have sub-tiles.

Here is a snippet I am trying to do:
my web page

Description:

  • sb – side bar (it will have several items inline)
  • tb – top bar (it will have several items which also have several sub-items)
  • pb – progress bar (later I need to add moving progress bar inside div)
  • mc – main content has 5 fixed boxes, namely c1 to c5
  • also in c2 I would like to make a scroll bar (but this I investigate later)

I created several <div></div> elements for each sections and assigned classes. For c1-c5 I tried to create sub-<div></div> elements, though they elements were in a column, I couldn’t position them well.

Here is what I have tried:

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

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

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-size: 25px;
    text-align: center;
}

.sidebar {
    background-color: #AC92EB;
    width: 10vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.topbar {
    background-color: #4FC1E8;
    width: 90vw;
    height: 10vh;
    left: 10%;
    position: absolute;
    top: 0;
}

.progressbar {
    background-color: #A0D568;
    width: 90vw;
    height: 2.5vh;
    left: 10%;
    position: absolute;
    top: 10%;
    font-size: 14px;
}

.bottombar {
    background-color: #FFCE54;
    width: 90vw;
    height: 10vh;
    margin-left: 10%;
    position: absolute;
    bottom: 0;
}

.main-content {
    background-color: grey;
    width: 90vw;
    height: 80vh-2.5vh;
    position: absolute;
    top: 12.5%;
    right: 0;
    bottom: 10%;
    left: 10%;
}

.centerpar .mode-control {
    position: relative;
    width: 14vw;
    height: 75.5vh;
    top: 1vh;
    left: 1vh;
    background-color: aqua;
}

and html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-version</title>
    <!-- STYLESHEET -->
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="sidebar">
        sb
    </div>
    <div class="topbar">
        tb
    </div>
    <div class="progressbar">
        pb
    </div>
    <div class="bottombar">
        bb
    </div>
    <div class="main-content">
        <p>mc</p>
        <div class="c1">
            c1
        </div>
        <div class="c2">
            c2
        </div>
        <div class="c3">
            c3
        </div>
        <div class="c4">
            c4
        </div>
        <div class="c5">
            c5
        </div>
    </div>
</body>
</html>

Here is what I have done:
result

I saw several tutorial where they put in a container all these blocks, some create instead a div directly the name of the block, e.g. <sidebar></sidebar>.

Tags:

2

Answers


  1. 0

    make MC

    display: grid;
grid-template-column: 1fr 1fr 2fr 1fr;

    find grids here

    create element as parent for C3, C4
    and style it like this

    display: flex;
flex-direction: column;

    find flex here

    Login or Signup to reply.
  2. 0

    maybe you can use the css grid layout. Below is the start of what you may need. You can follow this logic, you start with 2 columns in container, then 4 rows in the right contents grid… Please also check as David said css grid-layout

    *{
    padding: 0;
    margin: 0;
}

.container{
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-columns: 8% 90%;
    gap: 1%;
}

.right-content{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 10% 5% 64% 15%;
    gap: 2%;
}

.main-content{
    display: grid;
    grid-template-columns: 20% 20% 40% 20%;
}

.mc-middle{
    display: grid;
    grid-template-rows: 50% 50%;
}

.left-content{
    background: yellow;
}

.topbar{
    height: 100%;
    background: cadetblue;
}

.progressbar{
    background: green;
    width: 100%;
    height: 100%;
}

.c1{
    background: gray;
    width: 90%;
    height: 100%;
}

.c2{
    background: rgb(235, 158, 158);
    width: 100%;
    height: 100%;
}

.c3{
    background: rgb(166, 83, 83);
    width: 100%;
    height: 100%;
}

.c4{
    background: rgb(100, 24, 24);
    width: 100%;
    height: 100%;
}

.c5{
    background: rgb(211, 103, 197);
    width: 100%;
    height: 100%;
}

.bottombar{
    background: rgb(80, 147, 12);
    width: 100%;
    height: 100%;
}
        <div class="container">
      <div class="sidebar left-content">
        sb
      </div>
      <div class="right-content">
        <div class="topbar">
          tb
        </div>
        <div class="progressbar">
            pb
        </div>

        <div class="main-content">
            <div class="c1">
                c1
            </div>
            <div class="c2">
                c2
            </div>
            <div class="mc-middle">
              <div class="c3">
                c3
              </div>
              <div class="c4">
                c4
              </div>
            </div>
            <div class="c5">
                c5
            </div>
        </div>
        <div class="bottombar">
          bb
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search