CODEWITHSUNDEEP
csshtmlwebpage-screenshotpixel-perfect
Molly Marie
Molly Marie

Reputation: 11

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

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

Upvotes: 0

Views: 52

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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

  1. Completely get rid of the position: absolute.
  2. Replace all the height using line-height.
  3. Get rid of unnecessary tags, like outer-box, etc.
  4. 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

preview

Upvotes: 2

Related Questions