CODEWITHSUNDEEP
htmlcss
Stalk3r
Stalk3r

Reputation: 45

HTML use width and height dimensions for sections

I am working on my own website and I am quite new to HTML. Now I got following code:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
h1{
  position:absolute;
  top:10%;
  left:50%;
  text-align:center;
  
}
.block1,
.block2,
.block3,
.block4,
.block5 {
  width: 100%;
  height: 100%;
}

.block1 {
  background: deeppink;
}

.block2 {
  background: Crimson;
}

.block3 {
  background: LightSeaGreen;
}

.block4 {
  background: aqua;
}

.block5 {
  background: lightsalmon;
  height: 50%;
}
<body>
  <section class="block1">
  <h1>
 Sample Text 
  </h1>
  </section>
  <section class="block2">
  </section>
  <section class="block3">
  </section>
  <section class="block4">
  </section>
  <section class="block5">
  </section>
</body>

Now my question: Is it possible to use in e.g. block3 the dimensions like width: 100% and height: 100%. So with that I am able to treat every section just like the first where I can properly use width and height. I guess it would be possible to go for like 300% for the lower sections but that seems to be quite dirty.

Upvotes: 2

Views: 3475

Answers (2)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

You can get rid of extra HTML and CSS here.

  1. Body takes height of its content by default and your blocks are going to take more than 100% of screen so no need for setting height: 100% for html, body.
  2. Setting here for width: 100% is useless.
  3. You can set height: 100vh, just for every section and height: 50vh for last.
  4. Also no need for h1, you can center plain text inside flex-container, plain text will be treated as anonymous flex-item.

body {
  margin: 0;
}

section {
  height: 100vh;
  /* become a flex-container */
  display: flex;
  /* center flex-items vertically */
  align-items: center;
  /* center flex-items horizontally */
  justify-content: center;
}

.block1 {
  background: deeppink;
}

.block2 {
  background: Crimson;
}

.block3 {
  background: LightSeaGreen;
}

.block4 {
  background: aqua;
}

.block5 {
  background: lightsalmon;
  height: 50vh;
}
<section class="block1">
  <h1>
    Sample Text
  </h1>
</section>
<section class="block2">
  <h1>
    Sample Text 2
  </h1>
</section>
<section class="block3">
  <h1>
    Sample Text 3
  </h1>
</section>
<section class="block4">
  <h1>
    Sample Text 4
  </h1>
</section>
<section class="block5">
  <h1>
    Sample Text 5
  </h1>
</section>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

The problem is that you're using absolute positioning on an <h1> element, and also trying to centralise the text there. You need to apply text-align: center to the parent element, and use relative positioning in order to centralise text.

Having said that, in order to centralise text both vertically and horizontally, the easiest way is to use flexbox. All you need to do is set display: flex on the section, and set margin: auto on the text elements:

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

section {
  width: 100%;
  height: 100%;
  display: flex;
}

h1 {
  margin: auto;
}

.block1 {
  background: deeppink;
}

.block2 {
  background: Crimson;
}

.block3 {
  background: LightSeaGreen;
}

.block4 {
  background: aqua;
}

.block5 {
  background: lightsalmon;
  height: 50%;
}
<body>
  <section class="block1">
    <h1>
      Sample Text
    </h1>
  </section>
  <section class="block2">
    <h1>
      Sample Text 2
    </h1>
  </section>
  <section class="block3">
    <h1>
      Sample Text 3
    </h1>
  </section>
  <section class="block4">
    <h1>
      Sample Text 4
    </h1>
  </section>
  <section class="block5">
    <h1>
      Sample Text 5
    </h1>
  </section>
</body>

Hope this helps! :)

Upvotes: 1

Related Questions