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; }

Answer 1

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

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

Question

1 answers

solution1
2 2017-04-18 17:57:56

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

Question

1 answers

solution1 2 2017-04-18 17:57:56

solution1
2 2017-04-18 17:57:56