2

ページの左側にはロゴとリンクのリストがあり、右側にはブログのリンクがあります。ブラウザを小さくすると、ブログのリンクが左側のリンクに流れ込みます。ブログのリンクを特定の時点で動かないようにするにはどうすればよいですか?

私の問題へのリンク

以下は、私が抱えている問題のコードです。

html

<div id='logo'>
<img src="MAIN_IMAGES/logo.png" width="255" height="71"></div>

<div id='nav'>   
      <a class="ex4" href="#">FOOTWEAR</a>           
      <a href="projects.html">PROJECTS</a>
      <a href="#dialog2" name="modal">CLIENTS</a>
      <a href="#dialog5" name="modal">ABOUT</a>          
      <a href="#dialog3" name="modal">CONTACT</a>
 </div>
 <div id='blog'> 
    <a href="http://ernsteverything.com/blog">BLOG </a>
</div>
<div id='blogM'> 
     <img src="MAIN_IMAGES/date_2.png" width="60" height="19">
</div>

CSS

#logo {top:17px;
       clear:both;
       float:left;
       position:absolute;
       left:45px;}
#nav {position:absolute;
      top:14px; 
      left: 385px;
      min-width:800px;
      white-space:nowrap;
      color:silver;}
#blog {position:absolute;
       top:14px;right:113px;
       list-style:none;
       font-family:"Gill Sans Light";
       font-style:normal;
       font-weight:400;
       text-decoration:none;
#blogM {position:absolute;
        top:13px;
        right:43px;}
4

1 に答える 1

2

したがって、問題は要素を配置する方法にあります.htmlドキュメントではなく、ピクセルベースの座標グリッドのように配置しています。そして、この方法でそれを行うことはできますが、それは大きな苦痛になります. HTML は恐竜によってピクセルとグリッドなしで作成され、それ以来これに対応するように進化してきましたが、置き換えはされていないことを覚えておく必要があります。

このチュートリアルを見てください。div 要素はすべて body 要素の寸法から絶対的に配置されます。理論的には、要素は常にこのように重なります。ただし、それらを相対的に配置すると、ブラウザーの寸法に関係なく、一緒に機能するはずです。コンセプトが少しわかりにくいので、恐竜のように考える必要があります。ネストされた要素は、互いに隣り合って文字を入力するのと同じように機能しますが、ネストされていない要素は、em の間に改行が挿入される段落のようなものであり、周囲のものから完全に独立しています。

あなたへの私のアドバイスは、その CSS 構造全体を取り除き、最初からやり直すことです。DOMを次のように改造してみてください

    <body>
        <div id='logo'>
        </div>
        <div id='nav'>
            <div id='blog'>
                <div id='bloglinks'>
                </div>
            </div>
        </div>
    </body>

これにより、それらが一列に配置され、「左」などを使用してオフセットされ、必要な場所に配置されます。これは、それがどのように機能するかを確認するためのかなり良い方法でもあります。それはすべてかなり時代遅れです。モジュラー思考に反する直感的な方法で設計することを本当に考える必要があります。

于 2013-01-06T21:51:54.910 に答える