Trying to create a web page. Issue with centering text on nav bar

Question

I am using pixel perfect to try to duplicate a web page for learning purposes. I am having a really hard time trying to create this. For starters, my text will not stay centered on the nav bar. I think it may be an issue with my header. I might have combined the header and nav by accident. I'm not sure how to fix it.

The page I am trying to copy

My html:

  <body>
  <div id="wrapper">
    <header>
    <div id="bluebox"><h1>Main Title Here</h1></div>
    <div id="outerbox"></div>
    <div id="navbox"></div>
    </header>
    <div class="navigation-bar">
        <nav>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>

My css:

/* general */
*{margin: 0; padding: 0;}
body {font-size: 100%; line-height: 1.5em; font-family: 'arial'; }
article, aside, figure, footer, header, main, menu, nav, section, video {display: block;}

/* wrapper */
#wrapper {width: 1024px; margin: 0 auto; }

/* header */
#wrapper header {height: 50px; padding-top: 128px; padding-right: 0px;
padding-bottom: 0px; padding-left: 0px;}
#wrapper h1 {font-family: "arial"; color: #FFF; top: 70px; position: absolute; padding-left: 195px; font-size: 2.75em;}
#bluebox{
 background-color: #23b6eb;
 width: 1020px;
 height: 140px;
 position: absolute;
 top: 30px;
}
#outerbox{
 background-color: #5d5a5a;
 width: 1020px;
 height: 30px;
 position: absolute;
 top: 0px;
}

/* navigation */

#navbox{
 background-color: #BBB;
 width: 1020px;
 height: 40px;
 position: absolute;
 top: 170px;
}

.navigation-bar {display: inline-block; font-weight: bold; font-size: 1.2em; vertical-align: center; text-align: center;}
nav ul li span, nav ul li a {text-decoration: none; color: #000; }

Why are you using position: absolute? Your code is so wrong! :( Don't use position: absolute for whatever reason you have right now. Why? Looks for me is a wrapper with a padding, and background, and then header, content, and footer has the individual colours. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Apr 18, 2017 at 17:51
Yeah I kind of have no idea what I am doing. I never had to create something from scratch before. I still don't know how to fix it — Molly Marie
– Molly Marie, Commented Apr 18, 2017 at 17:53

Praveen Kumar Purushothaman · Accepted Answer · 2017-04-18 17:57:56Z

2

Same one with the right way. I have changed the following:

Completely get rid of the position: absolute.
Replace all the height using line-height.
Get rid of unnecessary tags, like outer-box, etc.
Use semantic tags, wherever possible.

/* general */

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 100%;
  line-height: 1.5em;
  font-family: 'arial';
}

article, aside, figure, footer, header, main, menu, nav, section, video {
  display: block;
}

/* wrapper */
#wrapper {
  width: 1024px;
  margin: 0 auto;
  padding: 20px 0;
  background-color: #5d5a5a;
}

/* header */
#wrapper header {
  background-color: #23b6eb;
}

#wrapper header h1 {
  font-family: "arial";
  color: #fff;
  font-size: 2.75em;
  text-align: center;
  line-height: 2.5;
}


/* navigation */
nav ul {
  text-align: center;
  background-color: #ccc;
}

nav ul li {
  display: inline-block;
  padding: 0 25px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
}

<div id="wrapper">
  <header>
    <h1>Main Title Here</h1>
  </header>
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</div>

Preview

answered Apr 18, 2017 at 17:57

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Molly Marie Over a year ago

I tried copying and pasting your code, but it changed all my colors and the layout of the header and nav. It did center my text though, but everything else changed.

Praveen Kumar Purushothaman Over a year ago

@MollyMarie Can you run the code snippet and put it on the full screen and see if shows the correct expected output? I verified with the image you had given as reference.

Praveen Kumar Purushothaman Over a year ago

@MollyMarie Make a JSBin with your current code with mine, I can help you with it. :) This is the current version, for your perusal: jsbin.com/fekahemura/edit?html,css,output

Praveen Kumar Purushothaman Over a year ago

@MollyMarie You should be more interested in the /* navigation */ part of the CSS.

Molly Marie Over a year ago

It worked this time. It looks like yours now, problem is though, it has made my body text all align all the way to left. Not sure why

|

Collectives™ on Stack Overflow

Trying to create a web page. Issue with centering text on nav bar

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related