如何擴展我的nav_bar類上的邊框頂部

我知道我正在爲我的頭部填充填充，這就是爲什麼我的nav_bar類不會讓我的邊框頂部伸展過我的頁面。任何人都知道如何解決這個在我的頭上刪除20px填充的短小？我在建築師世界中玩的更多，所以我的HTML和CSS是生鏽的，但我認爲根據框模型，邊框會延伸過去的填充？如何擴展我的nav_bar類上的邊框頂部

這裏是網站的鏈接。

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

來源

2015-02-08 Phi

解決方案

如果移動<nav id="nav_bar"> DIV外部和<header>標籤下，然後移動從border-bottom財產header到#nav_bar，你會一切。

的.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>

來源

2015-02-08 02:56:22 user3781632

AGGG，我想我固定的。對不起，填充和邊框意味着在一個單獨的#nav_bar中，就像你擁有它。這仍然不能解決我的問題。我已經改變了CSS，試圖讓這個消失，我忘了把它放回去。 – Phi 2015-02-08 02:59:13

錯讀你的問題。我會將navbar div從標題中取出並放在它下面。您還必須將邊框底部從標題移動到導航欄。我會更新我的答案並通知您應該是什麼樣子。 – user3781632 2015-02-08 03:07:34

這將很容易，你絕對正確，這種方式真棒。不幸的是，這是一個實驗室，需要我「直接在關閉標題元素之前創建一個導航元素」這就是我被掛斷的地方。我卡在這個有填充的頭元素中，而填充是強制我的導航元素被壓縮。如果有意義的話，我正在試圖找到一種擴展該填充的方法？ – Phi 2015-02-08 03:29:18

如何擴展我的nav_bar類上的邊框頂部

回答

相關問題