1

私は最近、最初のWebサイトhttp://www.autismsees.comを作成、設計、アップロードしました。

今日初めてウェブに載せましたが、多くのブラウザでページ全体が右にずれているように見えることに気づきました。

これは、通常は相対的な位置付けではなく、すべての要素に絶対的な位置付けを使用したためです。これは私が修正したいと思っている間違いですが、相対的な位置に切り替える方法を理解するのに苦労しています。

WebページのCSSは、http：//autismsees.com/style/stylesheet.cssにあります。

スタイルシートを変更する方法について、誰かが私にいくつかの提案をしてくれるかどうか、またはこれを行う方法を教えるのに役立つオンラインリソースを教えてくれるかどうか疑問に思いました。

本当にありがとう。

4

4 に答える 4

3

うわー..あなたのHTMLとCSSコードを見て驚いた、私が初めてHTMLとCSSを学んだ時のことを覚えている。しかし、単なる提案です。構造を改善し、HTMLコードを整理する必要があるかもしれません。これを好きになることができます：

<html>
<head>......</head>
<body>
<div id="wrapper">
   <div id="container">
   ......
   <!-- YOUR CONTENT HERE -->
   ......
   </div>
</div>
</body>
</html>

Webページを中央に配置できる2つの方法（CSSを使用）を使用します。

#container{
    position: relative;
    margin : 0 auto;
    width: 900px; 
}

または

#container{
    position: absolute;
    width: 900px;
    left: 50%;
    margin-left : -450px;
}

ここにフィドルがあります：http：//jsfiddle.net/z9vVu/

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

于 2013-03-26T02:40:45.887 に答える
2

おそらく、このWebキャストは、ポジショニングをよりよく理解するのに役立つ可能性があります。-

http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

于 2013-03-26T02:30:17.157 に答える
1

200すべてのプロパティから減算してから、ページ全体（のすぐ内側）leftを折り返します。これで問題がうまく解決するはずです。
<div style="position:relative; margin:0 auto;">...</div><body>...</body>

于 2013-03-26T01:56:51.807 に答える
0

私の提案は、ボックスモデルと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">&copy; 2013 AutismSees.</p>
            </footer>
        </div>
    </body>
</html>

、、、、およびクラスはすべてTwitterBootstrapからのものですcontainer。Bootstrapでこれらのクラスやその他の役立つクラスを使用すると、実際にページのレイアウトを高速化するのに役立ちます。span4span12row

おそらくこれらすべてを説明するために、構造がどのように見えるかについての大まかなドラフトを作成しました：http: //jsfiddle.net/matthewkimber/JmsSx/10/embedded/result/。これはその方法の一部にすぎませんが、絶対位置または相対位置を使用していないことがわかります。ただ流れて浮かんでいます。ページは中央に配置され、ブラウザのサイズが変更されても中央に配置されたままになります。少し調整するだけで、これを現在のルックアンドフィールに簡単に変えることができます。

于 2013-03-26T03:06:23.953 に答える