CODEWITHSUNDEEP
htmlcss
Richard Mpanga
Richard Mpanga

Reputation: 3

Full Width Navigation Bar - CSS

Right now my website looks like this:

example1

But I would like it to look like so:

example2

Obviously I do not want the text like that. It was a byproduct of stretching.

CSS:

@charset "utf-8";
   /* CSS Document */
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
   }

    li {
      float: left;
       }

   a.Nav_Links:link, a.Nav_Links:visited {
  display: block;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  }

  a.Nav_Links:hover, a.Nav_Links:active {
  background-color: #7A991A;
}

HTML:

 <!doctype html>
  <html>
  <head>
    <meta charset="utf-8">
       <title>My Name</title>
    <link href="Horizontal_Nav_Bar.css" rel="stylesheet" type="text/css">
  </head>
   <body style="background:white">
     <div class="Banner" id="banner">
     <h1 style="text-align:center; color:red; font-size:5em"> My Name</h1>
     </div>


     <div class="Nav_Bar">
      <ul>  <!-- Fix links # -->
        <li><a  class="Nav_Links" href="#home">About Me</a></li>
        <li><a  class="Nav_Links" href="#news">LinkedIn</a></li>
        <li><a  class="Nav_Links" href="#contact">Research</a></li>
        <li><a  class="Nav_Links" href="#about">Pictures</a></li>
      </ul>
      <!-- About Me, Link to Linked in, Research Projects, Resume, etc Pictures   -->

       </div>


   </body>
   </html>

Also, feel free to critique my code.

Upvotes: 0

Views: 21962

Answers (2)

BuddhistBeast
BuddhistBeast

Reputation: 2670

You're going to want to specify your width in the list items.

CSS

li {
    float: left;
    width: 25%; /* Split width appropriately */
}

Assuming you split your width, everything else will work just fine.

DEMO JSFiddle

Responsive Layout

Because I am a huge fan of making things work across all devices, I have also included the following CSS to make your site look nice when it shrinks down to a mobile device.

CSS

 @media screen and (max-width: 460px) {
    li {
        width: 100% !important;
        float:none !important;
    }
}

This is very much up to you if you would like to use this but I think it makes your site shrink down to a nice size while also keeping everything "pretty".

DEMO JSFiddle

EDIT:

Media Query: A media query is part of CSS3, which allows for certain things to become rendered depending on the screen size. More information can be found here.

!important: This is a property that allows the browser to know that the following line of CSS is very relevant and should be rendered no matter what. It basically overrides any other declaration and this can actually be seen in the demo I have given you above. It is considered bad practice because it overrides your styling (the natural flow of things) making it much harder to debug future issues that may occur. You can read up on that here.

Responsive Web Design: This is the process of making a website respond to the screen-size/entity that the user may be using to view your website. In layman's terms, you want your site to look nice across all devices/screen-sizes versus rendering the same website (meaning you put it fixed values for width/height, etc.). You can initially start reading more information here. Once you feel you have a pretty solid understanding of the concept try looking up a view examples online.

But BB, why choose MDN?

If you didn't notice, all of my links point to MDN, Mozilla Developer Network, which is a great resource, you can reference a lot of things through this website. Try to avoid silly places like W3 Schools.

Upvotes: 4

Danny van Holten
Danny van Holten

Reputation: 932

put it on width: 100%; and put the background-color inside your navbar.

Nav_Bar {
    width: 100%;
    background-color: #7A991A;
}

Upvotes: 0

Related Questions