Tea Cozy Flex Box layout


#1

I finished the Tea Cozy project detailed here

However it seems like after completing the project the navigation header is not functioning correctly. There is a small gap between the top of the browser and the header and I have also noticed that when resizing the browser the navigation elements drop down beneath the header as well.

I’ve included my html and css below, can anyone tell me where i’ve gone wrong?

<html>
  <head>
    <title>The Tea Cozy</title>
    <link href="./style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <div id="header" class="flex-container">
      <img id="logo" src="./img-tea-cozy-logo.png">
      <nav>
        <span><a href="#banner">Mission</a></span>
        <span><a href="#store">Featured Tea</a></span>
        <span><a href="#locations">Locations</a></span>
      </nav>
    </div>
    <div id="main">
      <div id="banner" class="flex-container">
        <div id="content">
          <h2>Our Mission</h2>
          <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
      </div>
      <div id="store">
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
        <div id="featured" class="flex-container">
          <div class="item">
            <img src="./img-berryblitz.jpg">
            <h4 class="tea">Fall Berry Blitz Tea</h4>
          </div>
          <div class="item">
            <img src="./img-spiced-rum.jpg">
            <h4 class="tea">Spiced Rum Tea</h4>
          </div>
          <div class="item">
            <img src="./img-donut.jpg">
            <h4 class="tea">Seasonal Donuts</h4>
          </div>
          <div class="item">
            <img src="./img-myrtle-ave.jpg">
            <h4 class="tea">Myrtle Ave Tea</h4>
          </div>
          <div class="item">
            <img src="./img-bedford-bizarre.jpg">
            <h4 class="tea">Bedford Bizarre Tea</h4>
          </div>
        </div>
      </div>
      <div id="locations">
        <h2>Locations</h2>
        <div class="flex-container">
          <div class="location">
            <h3>Downtown</h3>
            <p>384 West 4th St</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
          </div>
          <div class="location">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>(Northwest Corner)</p>
            <p>Portland, Maine</p>
          </div>
          <div class="location">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue</p>
            <p>Second Floor</p>
            <p>Portland, Maine</p>
          </div>
        </div>
      </div>  
    </div>
    <div id="contact">
      <h2>The Tea Cozy</h2>
      <h5>contact@theteacozy.com</h5>
      <h5>917-555-8904</h5>
    </div>
    <footer>copyright The Tea Cozy 2017</footer>
  </body>
</html>

body {
  font-family: Helvetica, sans-serif;
  font-size: 22px;
  color: seashell;
  background-color: black;
  text-align: center;
}

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


/* Fixed Header and Navigation */

#header {
  position: fixed;
  height: 69px;
  width: 100%;
  border-bottom: 1px solid seashell;
  background-color: black;
  z-index: 1;
  align-items: center;
}

#logo {
  height: 50px;
  width: auto;
  padding-left: 10px;
}

nav {
  flex-grow: 1;
  text-align: right;
  display: block;
}

nav span {
  padding: 20px 10px;
  margin: auto;
  display: inline-block;
}

a {
  color: seashell;
  text-decoration: underline;
  cursor: pointer;
}

/* Opening Banner */

#main {
  padding-top: 70px;
  width: 1200px;
  margin: auto;
  opacity: 0.9;
}

#banner {
  background-image: url("./img-mission-background.jpg");
  height: 700px;
  width: 1200px;
  padding-top: 70px;
}

#banner #content {
  margin: auto;
  width: 100%;
  background-color: black;
}

h2, h4 {
  margin: 0;
  padding: 10px;
}

/* Featured Teas */

img {
  height: 200px;
  width: 300px;
  margin: 10px;
  display: block;
}

.tea {
  font-weight: bold;
  padding: 5px;
  display: block;
}

.item {
  padding: 5px;
}

#store {
  height: 700px;
  width: 1000px;
  margin: auto;
  padding-top: 70px;
}

/* Locations */

#locations {
  background-image: url("./img-locations-background.jpg");
  height: 500px;
  padding-top: 70px;
}

p, h3 {
  display: block;
  padding: 5px;
}

.location {
  background-color: black;
  width: 300px;
  margin: 20px;
  opacity: 0.9;
}

/* footer */

#contact {
  height: 200px;
}

footer {
  text-align: left;
  padding-left: 20px;
  margin-top: 30px;
}


#2

You haven’t. What you are seeing is normal behavior as the browser attempts to keep elements in view, regardless how they may look out of place.


Extra Study

HTML is drawn to the screen from left to right, top to bottom, with element placement in the same order as the document source. This describes what is known as, normal flow.

To really study HTML, we need to stick to just markup with no styles, and certainly no script. Raw HTML is best learned cold (tongue in cheek). Learning the HTMLElements in their very basic form is the prima facia way to learn the user agent style sheet, namely the default style rules that apply in all browsers when no CSS is specified in the document.

Take your project for instance. Comment out the link element and open the page. See how everything flows? Block level elements take up the full width of the screen and any that are larger than the viewport width will force a horizontal scrollbar. The natural width of the page is equivalent to the largest object.

Paragraph text will flow to the right as far as the above width will allow, and then wrap. One of the key demands of a basic layout is preventing a horizontal scrollbar. Before CSS we did this with the width attribute, the first primary adaptive tool we had to work with when we had no control over physical size.

First, do as suggested and look at the page. Now add this attribute to all the img elements (except the logo; which is white on alpha)…

 width="100%"

Again, with no styles added, save and refresh the page. Notice, no horizontal scrollbar?

This sort of adaptivity is not learned at all when we skip this stage of HTML study in pursuit of presentational style. It’s what I call stretching the limits of user agent styles before overriding with our own.

The page is plain, and doesn’t do a lot of justice, but think of the user who does not see the webpage, but listens to it; or the person who may see the page but have minimal interaction with it, such as a challenged user for whom eye candy is a distraction. Plain text presentations are appropriate in many scenarios. What’s important is getting the content to the user in the order we intended. That’s a cornerstone of accessibility.


#3

What about the header section? When I open the html document in my browser the header section appears to have a gap between it and the top of the page. It is still fixed in position but there is a gap that reveals the rest of the content as I scroll.

Do you happen to know why this is? There should be no margin set to cause this.


#4

The cure for this is to give the body

a top margin of zero…

margin-top: 0;

It’s an age old situation. A top margin of 10px has been around since forever. It may be in the user agent style sheet.


#5

And i was about to say that i finished the same project today and wanted to ask a couple of things! :-):smiley:

Looking at khmikool’s code, i noticed that we have used several similar “techniques” to achieve the same result and some different ones. For example i used the flex method a bit more. During the course we learn about different layout techniques to achieve the result we want, like flexbox, grid, traditional box model etc. I wonder:

  1. is there a way (a trick maybe) to identify which technique would be the best choice for a project or eventually you do that by experience? *best as being able to do more complex layouts easily,
  2. should you combine techniques in the same page or its better to keep it consistent?

#6

Any answer could be deemed subjective. Without ample experience or knowledge in using Flex, Grids, Bootstrap, etc. we cannot expect one to be better than another. A way to find out which you would rather work with is to create a stable raw layout without using any of the tools, only float and position, wrestle with it to meet your needs, then replicate it with the Flex, then with Grids, then with Bootstrap. Only once you have struggled with a few layout techniques will you be able to objectively decide which one best suits you and your workflow.

There is a reason that Flex, Grids, Bootstrap, etc. were created. Dig around a bit and you should find something about the advantages of each.