1

I've created the header and a section on my site. I want to center text within the section. I used Flexbox to center horizontally and vertically. In the screen shots you'll see that part of the "hero-text" section which should be below the header is behind the header. I know that I could fix this using positioning hacks but is there a better way?

enter image description here

enter image description here

Here is the HTML: 

<body>
   <header>
     <a href="#"><img src="images/lookout-logo-small.png" alt="LookOut Software Logo" id="logo"></a>
     <nav class="main-nav">
       <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
       </ul>
    </nav>
  </header>
    <section id="hero-text">
       <h1>LookOut Software</h1>
         <p>Made in Canada</p>
    </section>
</body>

And the CSS:

header{
width: 100%;
background: white;
height: 4.75rem;
box-shadow: 0 0 2px rgba(6,8,8,0.15);
position: fixed;
top: 0px;
}

#logo{
margin: 1rem;
}

nav{
top: 0;
right: 0;
position: absolute;
margin: .5rem;
}

.main-nav ul{
list-style-type: none;
font-weight: bold;
}

.main-nav li{
display: inline-block;
margin: 0 .5rem;
}

.main-nav a{
text-decoration: none;
color: #3a3a3a;
font-size: 0.85rem;
}

a:hover{
text-decoration: none; 
color: #FF6952;
border-bottom: 2px solid #30C0D8;
}

/* Content area */

#hero-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FF6952;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
femmebug
  • 105
  • 1
  • 9

1 Answers1

1

Instead of using absolute positioning on the nav section, which removes it from the document flow, consider using flexbox for the entire layout.

Try this:

  • remove absolute positioning from nav
  • add this to your CSS: body { display: flex; flex-direction: column; }
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Ah, yes, that's okay. I put the absolute positioning on the nav so that I could position the nav links up top and to the right. I know that I could also do this using flex box and positioning those links with flex-direction: row, justify-content: flex-end, but then my logo which should be on the left moves to the right and I tried using align-self: flex-start on it but it's just not working for some reason. Maybe you know about that? Thank you for your help! – femmebug Feb 19 '16 at 21:09
  • 1
    `align-self` is for the *cross axis* (up/down, in this case), so it wouldn't work. You need a *main axis* solution. See here: http://stackoverflow.com/a/33856609/3597276 – Michael Benjamin Feb 19 '16 at 22:19
  • Thanks a ton @michael. I used margin-right: auto to get my logo into place. Great contribution! – femmebug Feb 20 '16 at 02:31
  • If you're still around, I have one more question. You see in the second screen shot how my h1 tag and part of the section it's in shows up behind the header? I actually fixed this problem by putting a margin top on the body at 76px (the size of the fixed header) which pushed the "hero-text" section down. I've added another section though and it's doing something similar. Without the code, do you have any idea why a separate section will begin from somewhere in the middle of the section above it? Or should I make this an entirely new question? @michael – femmebug Feb 20 '16 at 02:55
  • Wonderful :-) I appreciate it. – femmebug Feb 20 '16 at 03:22
  • 1
    When you use absolute positioning (includes fixed), the element is taken out of the document flow. This means that other elements on the page *don't even know that positioned element exists* and they don't account for it's space. When you see a block level element overlap another element, sometimes this means that second element is absolutely positioned or floated. – Michael Benjamin Feb 20 '16 at 04:31
  • But I'm unable to reproduce the problem you're having, so I can't provide more specific guidance. https://jsfiddle.net/sxgon5p6/ – Michael Benjamin Feb 20 '16 at 04:31
  • Ah, okay @michael. I will post another question in just a few with the code and a screenshot as well. Thank you so much for your continued help. :-) – femmebug Feb 20 '16 at 04:50