單詞從導航欄邊距＆如何擴展導航欄

Question

因此，我正在爲我的一個朋友製作一個網站，而且我必須將圖像和導航欄「相對」放置，以便我可以正確定位它們。 但現在當我添加段落標記，theres與文字和導航條

巨大的餘量此外，我如何擴展我的navaigation酒吧，因此它貫穿整個頁面？

代碼：http://jsbin.com/puzihahaxu/edit?html,output

（你可以看到在jsbin問題）

感謝您的幫助！ - 安東尼DeMatteis

Answer 1

的代碼有很多雜亂的，在我的評論中提到：過度填充引起的怪異的定位，請記住，你必須要考慮不同的屏幕分辨率，當你設計一個網站，否則會顯得在你的屏幕上很好，在其他計算機上很奇怪，你會想知道爲什麼......所以我建議回到幾步，理解每個元素的默認和基本樣式以及HTML框模型的工作原理。看看我的簡單的例子，我希望你從中學到了：

https://jsfiddle.net/azizn/oo8sk8uw/

/* main */ 
 

 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    background: darkseagreen; 
 
    font-family: monospace; 
 
} 
 

 
#page { 
 
    width: 75%; 
 
    padding: 40px; 
 
    margin: 40px auto; 
 
    background: #FFF; 
 
} 
 

 

 
/* header */ 
 

 
#header { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
h1 { 
 
    color: firebrick; 
 
    padding: 0; 
 
    margin: 20px 0; 
 
} 
 

 
/* menu */ 
 

 
#nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    display:block; 
 
    background-color: lightgray; 
 
    text-align: center; 
 
} 
 

 
#nav ul li { 
 
    display: inline-block; 
 
    padding:15px; 
 
    font-size: 15pt; 
 
    margin:0; 
 
} 
 

 
ul li a { 
 
    text-decoration: none; 
 
    width: 100%; 
 
} 
 

 
ul li a:link { 
 
    color: green; 
 
} 
 

 
ul li a:visited { 
 
    background-color: mediumpurple; 
 
} 
 

 
ul li a:hover { 
 
    background-color: cornflowerblue; 
 
} 
 

 
ul li a:active { 
 
    background-color: grey; 
 
} 
 

 
#word { 
 
    margin-top:20px; 
 
    position: relative; 
 
}

<div id="page"> 
 
    <img src="header.jpg" alt="Real Estate Lawyer" id="header"> 
 
    <h1> John De Matteis </h1> 
 
    <div id="nav"> 
 
    <ul> 
 
     <li><a href="john.html"> Home </a> </li> 
 
     <li><a href="home.html"> About </a> </li> 
 
     <li><a href="contact.html"> Contact Us </a> </li> 
 
    </ul> 
 
    </div> 
 
    <div id="word"> 
 
    <p> This is some sample text egin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing 
 
     this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the 
 
     issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the 
 
     other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have? 
 
     Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources 
 
     required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, 
 
     like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize 
 
     the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement 
 
     a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or 
 
     Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix, 
 
     and focus on those fa </p> 
 
    </div> 
 
</div>

Answer 2

可能會工作 HYML代碼：

<div id="page"> 
    <img src="header.jpg" alt="Real Estate Lawyer" id="header"> 
    <h1> John De Matteis </h1> 
    <div id="nav"> 
    <ul> 
     <li><a href="john.html"> Home </a> </li> 
     <li><a href="home.html"> About </a> </li> 
     <li><a href="contact.html"> Contact Us </a> </li> 
    </ul> 
    </div> 
    <div id="word"> 
    <p> This is some sample text egin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing 
     this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the 
     issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the 
     other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have? 
     Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources 
     required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, 
     like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize 
     the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement 
     a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or 
     Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix, 
     and focus on those fa </p> 
    </div> 
</div> 

CSS co de

/* main css*/ 

*{ 
    margin:0; 
    padding:0;} 
html,body { 
    background: darkseagreen; 
    font-family: monospace; 
} 
#page { 
    width: 75%; 
    padding: 40px; 
    margin: 40px auto; 
    background: #FFF; 
} 


/* header css*/ 

#header { 
    width: 100%; 
    height: auto; 
} 
h1 { 
    color: firebrick; 
    padding: 0; 
    margin: 20px 0; 
} 

/* menu css*/ 
ul li, ul li a{text-decoration:none;} 

#nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    display:block; 
    background-color: lightgray; 
    text-align: center; 
} 
#nav ul li { 
    display: inline-block; 
    padding:15px; 
    font-size: 15pt; 
    margin:0; 
} 
ul li a { 
    width: 100%; 
} 
ul li a:link { 
    color: green; 
} 
ul li a:visited { 
    background-color: mediumpurple; 
} 
ul li a:hover { 
    background-color: cornflowerblue; 
} 
ul li a:active { 
    background-color: grey; 
} 
#word { 
    margin-top:20px; 
    position: relative; 
}