私の提案は、ボックスモデルとCSSでフロートがどのように機能するかについてすべて学ぶことです。これは、HTMLおよびCSSでデザインを構築するときに非常に重要です。絶対測位を破棄し、代わりにフローを使用します。
調べるべきもう1つのことは、クラスとIDの違いです。IDは要素/スタイルの単一インスタンス用であり、クラスはページ上の多くの要素に適用できることに注意してください。クラスを使用する利点は、コードの再利用が多くなり、最終的にファイル全体のサイズがはるかに小さくなることです。私は通常、JavaScriptでのみ使用するためにIDを予約しています。
そして最後に、 TwitterBootstrapのようなグリッドフレームワークを調べます。サイトのソースをチェックアウトしているときに、BootstrapCSSが「slidestyle.css」として含まれているように見えます。このファイルには、再利用可能な定型化された要素がいくつか含まれています。Fredyが述べたように、おそらく次のようなことを試してみてください。
<!doctype html>
<html>
<head>
<title>AutismSees</title>
<link rel="stylesheet" href="slidestyle.css">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="container">
<header class="row span12">
<!-- Header and Navigation Here -->
</header>
<div class="row span12">
<!-- Slide control here -->
</div>
<!-- Create the three content columns -->
<div class="row">
<div class="span4">
<h2>Contribute</h2>
<p>Text here.</p>
</div>
<div class="span4">
<h2>Stay Connected</h2>
<p>Text here.</p>
</div>
<div class="span4">
<h2>Our Friends</h2>
<p>Text here.</p>
</div>
</div>
<footer class="row span12">
<p class="copyright">© 2013 AutismSees.</p>
</footer>
</div>
</body>
</html>
、、、、およびクラスはすべてTwitterBootstrapからのものですcontainer
。Bootstrapでこれらのクラスやその他の役立つクラスを使用すると、実際にページのレイアウトを高速化するのに役立ちます。span4
span12
row
おそらくこれらすべてを説明するために、構造がどのように見えるかについての大まかなドラフトを作成しました:http: //jsfiddle.net/matthewkimber/JmsSx/10/embedded/result/。これはその方法の一部にすぎませんが、絶対位置または相対位置を使用していないことがわかります。ただ流れて浮かんでいます。ページは中央に配置され、ブラウザのサイズが変更されても中央に配置されたままになります。少し調整するだけで、これを現在のルックアンドフィールに簡単に変えることができます。