0

わかりましたので、日々 css/html のスキルを磨いていますが、常にいくつかの問題に遭遇します。私はここで非常に初心者のコーディングをしていると確信しています。とにかく、ウェブページの中央に非常にシンプルなコンテナを作成しようとしています。その上にナビゲーションバーがあり、それらを区切るスペースはありません。そして、これが私がこれまでに持っているものです:/

index.html - http://pastie.org/5149875 style.css - http://pastie.org/5149890

すべての助けに感謝します。ヒントがあれば教えてください! :)

副次的な質問: mytablediv と一致させるために navbarwidth を 800px より大きくする必要がある理由は何ですか?

4

3 に答える 3

1

あなたはそんなに悪い仕事をしていません。私が学んだ最大の教訓の 1 つは、margin-leftとmargin-rightを に割り当てることで、ものをセンタリングすることが非常に簡単になるということでしたauto。これを単純なワンライナーに単純化することもできます。

margin: 0 auto;

を削除しfloat: leftてマージンをこれに置き換えると、要素が中央に配置されます。中間のスペースの問題は、おそらく要素内のマージンの問題です (はい、これらも影響します)。がある場合は、<h1>それらの間にギャップを作成できます。

副次的な回答: 一致するようにナビゲーション バーの幅を 800px 以上にする必要がある理由は、有効な幅を 800px + 2 x パディングにするパディングを下部に追加したためです。

于 2012-11-01T02:33:58.100 に答える
0

これは、 jsFiddleで必要な html とスタイリングの縮小版です。基本的に、ページをコンテナ要素でラップし、その幅をスタイルしてから、margin:0 auto;以下に示すようにマージンを中央に設定します。800px 設定のより良い例を見るには、ここにアクセスしてください

<html>
<head>
    <title> Learning </title>
    <link type="text/css" href="style.css" rel="stylesheet" />
    <style>
        #container{
            width: 800px;
            margin: 0 auto;    
        }
        #anavbar{
            border:solid 1px #000;       
        }
        #mytable{
            padding:10px;       
        }
    </style>
</head>
<body>
<div id="container" style="width:800px;margin:0 auto;">
    <div id="anavbar">
        <a href="#">Home</a>
        <a href="#">Aboute</a>
        <a href="#">Social</a>
        <a href="#">Contact</a>
    </div>
   <div id="mytable">
        <p>A new test by the frank man.</p>
    </div>
</div>

</p>

于 2012-11-01T02:33:51.550 に答える
0

心配しないで、私はあなたを助けるためにここにいます。簡単なコードを紹介します。トリックを使用して学びます。

メニュー HTML

<div class="menu-bg">
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">F.A.QS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="clear"></div>
</div>
</div>

メニューCSS

.menu-bg{background:#999 repeat-x; border:1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.menu{width:100%;}
.menu ul{list-style:none;}
.menu li{float:left;}
.menu a{font-family:Calibri; font-size:14px; font-weight:bold; text-decoration:none; color:#dcdcdc; padding-left:30px; padding-right:30px; line-height:40px;}
.menu a:hover{font-family:Calibri; font-size:14px; font-weight:bold; text-decoration:none; color:#000; padding-left:30px; padding-right:30px; line-height:40px;}
.clear{clear:both;}

これがお役に立てば幸いです。乾杯...............

于 2012-11-01T09:40:31.077 に答える