0

こんにちは皆さん、これは簡単な質問かもしれませんが、HTML および CSS ページでこの 1 つの問題に少し苦労しています。

問題:ズームインすると「セクション」部分がナビゲーションの下に移動し、ズームアウトするとフッターがセクション部分の隣に移動します.....

これが私の HTML ページのサンプルです。

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>MyWebsite</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<header>
   Header
  </header>


<body>



  <nav>
      <ul>
          <li>
             Tab1 
          </li>
          <li>
            Tab2 
          </li>
          <li>
             Tab3 
          </li>
          <li>
             Tab4 
          </li>
          <li>
             Tab5
          </li>


      </ul>
  </nav>



  <section id="">
 Section
  </section>

  <footer>
  Footer
  </footer>



</body>


</html>`

ここにCSSページがあります：

header
{
    width: 1325px;
    height: 150px;
    background-color: green;
    position: relative;
}

nav
{
    position: relative;
    width: 400px;
    height:  500px;
    background-color: teal;
    float: left;
    overflow: hidden;
}

section
{
    position: relative;
    float: left;
    width: 925px;
    height: 500px;
    background-color: blue;
}

footer
{
      float: left;
    width: 1325px;
    height: 50px;
    background-color: lime;
    position: relative;
    overflow: hidden;    
}

あなたの助けと事前の時間に感謝します

4

3 に答える 3

0

なぜこのように動いているのかは完全にはわかりませんが、簡単な解決策は知っています。すべてをラッパーに含めることです。これをコピーして貼り付けます：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyWebsite</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="wrapper">
    <header>
      Header
    </header>
     <nav>
      <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
        <li>Tab 4</li>
        <li>Tab 5</li>
      </ul>
    </nav>
    <section id="">
      Section
    </section>
    <footer>
      Footer
    </footer>
  </div>
</body>
</html>

doctype と <html> タグを除いて、<head> タグに含まれていないものはすべて <body> タグ内にある必要があることに注意してください。これには <header> タグが含まれます。

とにかく、上で行ったことは、Web ページを分割できる手段である「div」にすべてをラップすることです。これらは css を使用して簡単に制御できます。以下をコピーして css ファイルの最後に貼り付ける必要があります。

.wrapper {
    width: 1325px;
}

さらにサポートが必要な場合はお知らせください:D

于 2013-10-07T15:35:11.043 に答える
0

ジャックは正解です。要素にコンテナを追加してみてください。このフィドルを参照してください：JSFiddle。本質的に、それらはすべて

position: relative

参照する絶対配置コンテナがなくても。CSS を使用してラッピング コンテナーを追加する:

position: absolute;
height: 700px;
width: 1325px;

すべてを一直線に保ちました。これがあなたが達成しようとしていたものではない場合はお知らせください。

于 2013-10-07T15:23:47.413 に答える