Best way to position text and content on a div with CSS?-CodePudding

I'm trying to copy a design from figma, but I'm struggling to figure out what would be the optimal solution for this.

It's supposed to look like this: [1]: https://i.stack.imgur.com/OADQ6.png

How it looks in a browser: [2]: https://i.stack.imgur.com/uKHV8.png

I'm trying to position the text, but I'm struggling to find a simple and an optimal solution for this.

/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557

*/

body {
  margin: 0;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
  background-image: url(images/nhv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: auto;
  height: 343px;
  color: white;
}

h1 {
  font-size: 32px;
  margin: 0;
  background: #1d3557;
  padding: 5px 20px;
  border-radius: 5px;
}

h2 {
  font-size: 18.72px;
  margin: 0;
  background: #457b9d;
  padding: 5px 4px;
  border-radius: 5px;
}

img {
  width: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="index.css" />
    <title>Visit Alver</title>
  </head>
  <body>
    <!-- HERO SECTION -->
    <div id="mainheader">
      <h1>Visit Alver</h1>
      <h2>
        Enjoy culture and sports in this vibrant landscape 30 minutes from
        Bergen
      </h2>
    </div>

    <!-- ACTIVITIES SECTION -->
    <div>
      <h3>Top three activities to do at Alver</h3>
      <img src="images/" />
      <img src="images/" />
      <img src="images/" />
    </div>

    <!-- GUIDE SECTION -->
    <div>
      <h3>Your guide</h3>
      <p>
        “I have lived at Alver for over 25 years, so I can show you all of its
        best parts and hidden secrets.”
      </p>
      <h4>Nikolai Kodehode</h4>
      <img src="images/" />
    </div>
  </body>
</html>

CodePudding user response：

Not sure if I found the optimal solution, but I simply used flexbox on the div: #mainheader

Then using margin to adjust the spacing between the h1 and h2.

Thank you, Damien Puaud!

/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557

*/

body {
  margin: 0;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
  background-image: url(images/nhv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: auto;
  height: 343px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-size: 32px;
  margin: 120px;
  background: #1d3557;
  padding: 5px 20px;
  border-radius: 5px;
}

h2 {
  font-size: 18.72px;
  margin: -100px;
  width: 360px;
  background: #457b9d;
  padding: 7px 25px;
  border-radius: 5px;
}

#activities {
  
}

img {
  width: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="index.css" />
    <title>Visit Alver</title>
  </head>
  <body>
    <!-- HERO SECTION -->
    <div id="mainheader">
      <h1>Visit Alver</h1>
      <h2>
        Enjoy culture and sports in this vibrant landscape 30 minutes from
        Bergen
      </h2>
    </div>

    <!-- ACTIVITIES SECTION -->
    <div id="activities">
      <h3>Top three activities to do at Alver</h3>
      <img src="images/le5lrhfv5dygds5nzacn.jpg" />
      <img src="images/last ned.jpg" />
      <img src="images/" />
    </div>

    <!-- GUIDE SECTION -->
    <div>
      <h3>Your guide</h3>
      <p>
        “I have lived at Alver for over 25 years, so I can show you all of its
        best parts and hidden secrets.”
      </p>
      <h4>Nikolai Kodehode</h4>
      <img src="images/" />
    </div>
  </body>
</html>

CodePudding user response：

I did some changes on your code. You can do this also like this:

I put the #mainheader into the vertical div and set the display value table for the vertical div and table-cell for the #mainheader. And for centering the div i gave margin: 0 auto value. Finally for centering vertically i used vertical-align:middle

/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557

*/

body {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
  background-image: url(images/nhv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: auto;
  height: 343px;
  color: white;
  vertical-align: middle;
  display: table-cell;
}

.vertical {
  display: table;
  margin: 0 auto;
}

h1 {
  font-size: 32px;
  margin: 15px auto;
  background: #1d3557;
  padding: 5px 20px;
  border-radius: 5px;
  width: 350px;
}

h2 {
  font-size: 18.72px;
  margin: 0;
  background: #457b9d;
  padding: 5px 4px;
  border-radius: 5px;
}

img {
  width: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/style.css" />
    <title>Visit Alver</title>
  </head>
  <body>
    <!-- HERO SECTION -->
    <div >
      <div id="mainheader">
        <h1>Visit Alver</h1>
        <h2>
          Enjoy culture and sports in this vibrant landscape 30 minutes from
          Bergen
        </h2>
      </div>
    </div>
    <!-- ACTIVITIES SECTION -->
    <div>
      <h3>Top three activities to do at Alver</h3>
      <img src="images/" />
      <img src="images/" />
      <img src="images/" />
    </div>

    <!-- GUIDE SECTION -->
    <div>
      <h3>Your guide</h3>
      <p>
        “I have lived at Alver for over 25 years, so I can show you all of its
        best parts and hidden secrets.”
      </p>
      <h4>Nikolai Kodehode</h4>
      <img src="images/" />
    </div>
  </body>
</html>