How to extend the border-top on my nav_bar class


Tags: html,css

Problem :

I know I am hitting the padding for my header and that is why my nav_bar class is not letting my border-top stretch across my page. Anyone know how to fix this short of removing the 20px padding on my header? I play more in the architect world so my HTML and CSS is rusty, but I thought a border would extend past padding according to the box model?

Here is a link to the site.

http://www.dsu-class.com/zito82/lab03/ HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Zito - Lab 3</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    <header>
    <img src="images/SAS.png" alt="Solution Architect Scenarios">
        <hgroup id="headerGroup">
            <h1>Solution Architect Scenarios</h1>
            <h2>Elite Training for Elite Architects</h2>
        </hgroup>
        <nav id="nav_bar">
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="aboutPhil.html">About Phil</a></li>
                <li><a href="premiumContent.html">Premium Content</a></li>
                <li><a href="contactMe.html">Contact Me</a> </li>
            </ul>
        </nav>
    </header>
    <aside>
        <ul>
            <li><a href="Blog Articles">Blog Articles</a></li>
            <li> <a href="Videos">Training videos</a></li>
            <li> <a href="Portfolio">My Portfolio</a></li>
            <li> <a href="Sites I Like">Sites I Like</a></li>
        </ul>
    </aside>
    <section>
    <h2> Welcome to the Site</h2>
        <p>On a daily basis I deal with hundreds of different technologies. These technologies span the stack from
        Layer 1 to Layer 7. It was this Jack of All Trades (JOAT), experience that I saw so rarely in the business world
        that would lead me to creating this site. As architects, we need to consider all the factors that influence our
        design. Often time's we design in a background. This site seeks to open up those other areas in which you may not
        dwell. The end goal is for you to be able to grow in your awareness of technologies and abilities as an architect.</p>
        <h3> Consulting </h3>
        <p> I offer my skills around technology to help enterprises and business owners with <strong>ALL</strong> aspects
        of their business. I like to tell people that I cover all the way from Layer 1 to Layer 7. I can assist you in your
        design and architecture needs. I have a focus on large scale enterprise design and cyber-security.</p>
    </section>
    <footer>
        <p>&copy; Copyright 2015 Phil Zito</p>
    </footer>
</body>
</html>

CSS:

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

body {
    font-family: sans-serif;
    width: 960px;
    background-color: white;
    border-color: black;
    -moz-box-shadow: 0 0 0 20px black;
    -webkit-box-shadow: 0 0 0 20px black;
    box-shadow: 0 0 0 20px black;
    margin: 1em auto;
}

header , section , footer {
    padding: 20px;
}

header {
    background-color: white;
    border-bottom: black solid 5px ;
}

img {
    float: left;
    margin: 1em;

}

aside {
    float: left;
    width: 170px;
    padding: 20px;
}

section {
 float: right;
 width: 690px;
}



footer {
    clear: both;
    font-size: .9em;
    text-align: center;
    background-color: white;
    border-top: black solid 5px;
}

header h1 {
    text-indent: 20px;
}

header h2 {
    text-indent: 20px;
}


section h2:first-child:first-letter { font-size: 2em;}

aside a:link,aside a:visited {font-weight: bold; color: black;}

aside a:hover, aside a:focus {color: green;}

aside li {
    list-style: none;
}

aside a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
    border: 3px solid black;
    margin: 5px 0 5px 0;
    text-decoration: none;
    background-color: grey;
    font-size: 1.1em;
    padding-left: 5px;
}
section.h2 {
    margin-top: 0;
}

#nav_bar {
    border-top: 2px solid black;
    padding: 5px 0 5px 0;
}

#nav_bar ul {
    text-align: center;
}

#nav_bar li {
    display: inline;
}

#nav_bar a {
    padding: 0 1em 1em 0;
    color: black;
    font-weight: bold;
    text-decoration: none;
}

#nav_bar a:hover, #nav_bar a:focus {
    text-decoration: underline;
}

#nav_bar a.current {
    color: green;
}


Solution :

Solution

If you move the <nav id="nav_bar"> div outside and under the <header> tag, and then move the border-bottom property from header to #nav_bar, you'll be all set.

.css

header {
    background-color: white;
}

#nav_bar {
    border-bottom: 5px solid black;
    border-top: 2px solid black;
    padding: 5px 0;
}

.html

<header>
    <img alt="Solution Architect Scenarios" src="images/SAS.png">
    <hgroup id="headerGroup">
        <h1>Solution Architect Scenarios</h1>
        <h2>Elite Training for Elite Architects</h2>
    </hgroup>
</header>

<nav id="nav_bar">
    <ul>
        <li><a class="current" href="index.html">Home</a></li>
        <li><a href="aboutPhil.html">About Phil</a></li>
        <li><a href="premiumContent.html">Premium Content</a></li>
        <li><a href="contactMe.html">Contact Me</a> </li>
    </ul>
</nav>

    CSS Howto..

    How to place 3 different paragraphs next to each other?

    How can you prevent Formsauthentication to block css and images?

    How to use css to set svg hover color?

    IE8 only shows css content after event fired

    How do I center the twitter bootstrap tabs on the page?

    How to make span width to be maximum using CSS?

    How can i make the responsive design using CSS?

    How to make a simple plus one voting system in code igniter

    How to access regular CSS from GWT widget?

    How to prevent fixed positioned element overlapping others elements in css?

    how to set background-image to pseudo element?

    How to get this code to behave differently based on what exactly is clicked?

    How to Highlight a list item after user clicks on link

    How to hide a class on specific page using css

    Does anyone know how Pinterest.com's layout works?

    How to change active color of bootstrap button group to have different color for each button

    How to build dynamic css main/sub menu's (or do I need jquery)?

    How to properly serve CSS

    How to position a SWIPER SLIDE in the centre of the page? [closed]

    How to control the behaviour of columns in a specific table using CSS

    How to make both text and image change on rollover via CSS?

    CSS Selectors - How to apply a defined class on the selector's event

    How do i make div go under another div making columns

    How to change the position of the JQuery dialog box

    How to set link color inside GridView cell

    A plugin or tool to show what elements on a page are effecting other elements?

    CSS - How to add a second background image

    CSS triangle how to remove white space on the right

    How do I break the border around text in css?

    How to style all the same XSL FO elements? XSL FO like CSS?