1

私は HTML/CSS に非常に慣れていませんが、ブラウザーがズームイン/アウトしたり、ブラウザーのサイズが変更されたりしても、要素をその位置に維持する際の重要な属性をまだ知りません。

一部の画像をその位置に固定したままにすることができましたが、ブラウザのサイズを変更すると歪んでしまいます。

これまでの私の仕事は次のとおりです。

HTML

home.php

p.copyright {
  font-weight: bold;
  text-align: center;
  font-style: regular;
}

.clear {
    clear: both;
}

#header {
  display: block;
  width: 80%;
  top: 0;
  z-index: 1;
  text-align: center;
  position: fixed;
  overflow: hidden;
  margin-left:10%;
}

#footer {
  width: 80%;
  position:fixed;
  display: block;
  bottom: 0px;
  overflow: hidden;
  margin-left:10%;
}


#logo {
  position: relative;
  text-align: left;
  margin-left: 0;
  float: left;
  height: 95px;
  width:300px;
}

#navcontainer {
  display: block;
  margin-right:0;
  float: right;
  position: relative;
 }
#textbox {
  position: relative;
  float: right;
  height: 95px;
  width:300px;

}

#htimg, #bb-sb {
  position: relative;
}

#navcontainer ul {
  padding:0px
  list-style-type: none;
  text-align: center;
}

#navcontainer ul { 
  list-style-type: none; 
}

#navcontainer ul li { 
  display: inline;
}

#navcontainer ul li a:hover {
  color: red;
  background-color: #;
}

私は、自分のコードが非常に厄介であることを十分に認識しています (そして、一貫性がないと思います)。また、ブラウザーが同じように動作しないことにも気付きました。これについてどのような解決策を講じるべきですか?

4

2 に答える 2

1

解決策は、Twitter Bootstrap を学ぶことです: http://twitter.github.io/bootstrap/

これは、サイトを「レスポンシブ」にする CSS 用のライブラリ セットです。つまり、基本的に、ブラウザのサイズに応じてサイズを変更したり移動したりします。

これをサイズ変更してみてください。違いがわかります: http://twitter.github.io/bootstrap/examples/hero.html

あなたが言ったように、CSS / HTMLに関する知識が貧弱な場合、1つずつ手作業で行うと気が狂います。

于 2013-07-05T16:06:30.350 に答える
1

いくつかの簡単なことで、それが少しうまく機能するはずです。

最初に 2 つのリンク rel を削除します。必要なのは 1 回だけです。次に #Header、table、#footer を div で囲み、css を

width:940px;
margin:0 auto;

コンポーネントが中央に配置され、ブラウザを縮小してもページのサイズは変わりません。レスポンシブ (つまり、サイズの変化に応じてビューを変更する) はもう少し複雑です。

私はPPブートストラップが良い方法であることに同意しますが、それがどのように行われるかを知らなければ、長期的には問題を引き起こすでしょう

編集

header,footer.html はヘッダーまたは html を持つ必要がないので、そうなるでしょう。

Header.html

    <div id="footer">

                <img src="images/rd-bb.jpg" align="right" width="300px"/>

           <div id="bb-sb">
                <img src="images/heading-bottom.jpg" width="100%" /> 
           </div>

            <div id="fttext">
                <font size="1"><p class="copyright" ><span style="color:#8e8e8f" >All site content copyright &#169; <span style="color:#0099ff">ELAN Holdings Corporation </span>2013 unless otherwise stated in site credits. All rights reserved. <br />
Website Design by Right<span style="color:#ec4e1b">Angle </span>Corporation</span></p></font>
            </div>
   </div>

Footer.html

   <div id="footer">

                <img src="images/rd-bb.jpg" align="right" width="300px"/>

           <div id="bb-sb">
                <img src="images/heading-bottom.jpg" width="100%" /> 
           </div>

            <div id="fttext">
                <font size="1"><p class="copyright" ><span style="color:#8e8e8f" >All site content copyright &#169; <span style="color:#0099ff">ELAN Holdings Corporation </span>2013 unless otherwise stated in site credits. All rights reserved. <br />
Website Design by Right<span style="color:#ec4e1b">Angle </span>Corporation</span></p></font>
            </div>
   </div>

PHP ファイルは html,head,body タグを提供しています。

また、私はあなたのcssであなたの使用位置を指摘しました:固定された多くのことはその必要はありません:)

EDIT2

これは実際の例のフィドルです。style.css ファイルを削除する必要がありましたが、なくても機能することがわかります。

于 2013-07-05T16:10:34.610 に答える