基本的なサイトレイアウトとナビゲーション

Question

私が手助けしている地元のアートギャラリーの小さなプロジェクト用の簡単なWebページを作成するように求められました。 問題は私のHTML知識が古いことです。私はテーブルを使って作り始めましたが、私が思ったより難しいことが判明しました。

• ブルー

  Here's a basic design mockup.はヘッダであり、100％の幅を有します。

• 緑色は、サイトの本体で、幅（たとえば800ピクセル）が固定され、画面の下部に向かっています。
• イエローは、本体の下部に付いているフッターです。
• 赤色は、navblocksとその主な問題です。それらは固定された幅（例えば180px）であり、それらの内側のテキストは左に揃えられます。それらは等間隔に配置されたフォームと左端と右端のものが本体の端に揃えられていますが、画面幅を縮小するにつれて近づきます。

いくつかのグーグルの後、私はスパンと "text-align：center"を使って等間隔のnavblocksを作っていますが、navblocks内のテキストも中央に揃えています。

本体の端に合わせるために、固定幅（180 + 800 + 180）のコンテナを使用しようとしていましたが、試してみるとスパンアライメントを制動します。

私の質問は：どのようにこのnavblocksにアプローチするのですか？

Answer 1

私があなたの質問を理解する限り、ここには小さなcodepenリンクがあります。それが役に立てば幸い。

Codepen Link

HTML：

<header> 
    <nav> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     <a href="#">Link4</a> 
    </nav> 
</header> 
<div class="wrapper"> 
<div class="content"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus aperiam, debitis labore ratione doloribus adipisci quia repellat voluptatem tempora laborum vel possimus dolorum numquam, esse, dignissimos qui iste, assumenda laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat recusandae provident similique nemo, hic delectus dolorem totam, minima maiores quas, distinctio dolorum. Numquam aperiam, rem consectetur tempora, tempore dignissimos. Recusandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatum recusandae dolorem necessitatibus, vel nihil possimus voluptate obcaecati dignissimos, magni repellat, iusto atque, provident? Veniam error quaerat iusto, et explicabo? 
    </div> 

    <footer> 
    footer 
    </footer> 
</div> 

CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
header{ 
    background:blue; 
    padding:10px 0; 
    border-bottom:2px solid #000; 
} 
nav { 
    width: 80%; 
    margin:0 auto; 
} 
nav a{ 
    color:#fff; 
    width:20%; 
    text-align:center; 
    display: inline-block; 
} 
.wrapper{ 
    width:800px; 
    margin:0 auto; 
    background-color:green; 
    color:#fff; 
} 
.content{ 
    padding:20px ; 
} 
footer{ 
    background:yellow; 
    padding:20px; 
    color:#000; 
}