CODEWITHSUNDEEP
htmlcss
Miguel Moura
Miguel Moura

Reputation: 39394

Place Logo, Menu and Slogan over Image Slide Show

I need to create an web site header as follows:

  1. Logo and Menu on top of image; Whatever the image the logo and menu will be the same.

  2. Image will have a title and text over it. The title and text will be different for each image.

  3. The Logo should be on left and Menu on right;

  4. Logo + Menu should only occupy a 600px max width (wrapper). And that wrapper should be centered on the site.

So I have the following online example:

header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  position: absolute;
  width: 100%;
}

.slide img {
  position: relative;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}
<header>

  <div class="wrapper">

    <em class="brand">
          <img src="http://via.placeholder.com/200x40"/>
        </em>

    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

  <div class="slides">

    <div class="slide">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 1</h2>
        <p>Text of slide 1</p>
      </div>
    </div>

    <div class="slide" style="display:none;">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 2</h2>
        <p>Text of slide 2</p>
      </div>
    </div>

  </div>

</header>

<main>
  Main content
</main>

The problem I have at the moment is that the Logo+Menu is not centered taking a maximum width of 600px. But to be honest I am not sure the positioning approach I am using is the correct one.

Upvotes: 0

Views: 235

Answers (3)

kravisingh
kravisingh

Reputation: 1660

Here is your requirement, with some structure and css changes:

header {
  text-align: center;
  position: relative;
}

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  position: absolute;
  top:0;
  left:0;
  right:0;
  z-index: 9;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  position: relative;
  width: 100%;
}

.slide img {
  position: relative;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}
<header>

  <div class="wrapper">

    <em class="brand">
          <img src="http://via.placeholder.com/200x40"/>
        </em>

    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

  <div class="slides">

    <div class="slide">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 1</h2>
        <p>Text of slide 1</p>
      </div>
    </div>

    <div class="slide" style="display:none;">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 2</h2>
        <p>Text of slide 2</p>
      </div>
    </div>

  </div>

</header>
<!-- Main content start here -->
<main>
  Main content
</main>

Upvotes: 1

Ovidiu Unguru
Ovidiu Unguru

Reputation: 756

I changed the place where you should put position: absolute and the z-index. Also added a flex display to be able to center it. Hope this helps!

/* Styles go here */

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 0;  
}

em {
  border: 1px solid red;
  z-index: 2000;
}

nav {
  z-index: 2000;
  right: 0;
}

.slides {
  width: 100%;
}

.slide img {
  position: relative;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px; 
  width: 100%; 
}

.wrapper {
  display:flex;
  width: 600px;
  justify-content:center;
  position:absolute;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  
    <header>
      
      <div class="lobby">
        <div class="wrapper">
          <em class="brand">
            <img src="http://via.placeholder.com/200x40"/>
          </em>
        
          <nav class="menu">
            <ul class="menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </div>
      
        <div class="slides">
          
          <div class="slide">
            <img src="http://via.placeholder.com/400x200"/>
            <div class="text">
              <h2>Slide 1</h2>
              <p>Text of slide 1</p>            
            </div>
          </div>
        
          <div class="slide" style="display:none;">
            <img src="http://via.placeholder.com/400x200"/>
            <h2>Slide 2</h2>
            <p>Text of slide 2</p>
          </div>        
        
        </div>      
        
      </div>
      
    </header>

    <main>
      Main content
    </main>
  
  </body>

</html>

Upvotes: 0

frnt
frnt

Reputation: 8795

Issue is nav which is position as absolute, to align both logo and menu at center of slide at max-width:600 you need to add position:relative to .wrapper which is parent element of nav.

position - absolute The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block.

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  position:relative;/*Add this*/
}

Thus it get's relative to .wrapper and align at center of slide.

header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  position: relative;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  position: absolute;
  width: 100%;
}

.slide img {
  position: relative;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}
<header>
  <div class="wrapper">

    <em class="brand">
          <img src="http://via.placeholder.com/200x40"/>
        </em>

    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

  <div class="slides">

    <div class="slide">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 1</h2>
        <p>Text of slide 1</p>
      </div>
    </div>

    <div class="slide" style="display:none;">
      <img src="http://via.placeholder.com/400x200?text=100 percent width" />
      <div class="text">
        <h2>Slide 2</h2>
        <p>Text of slide 2</p>
      </div>
    </div>

  </div>

</header>

Upvotes: 2

Related Questions