Vote count:
0
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.
<!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>© 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 ul {
border-top: 2px solid black;
padding: 5px 0 5px 0;
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;
}
asked 10 secs ago
How to extend the border-top on my nav_bar class.
Aucun commentaire:
Enregistrer un commentaire