0

わかりました、チュートリアルからこのウェブサイトを作成しています。はい、私はまだ初心者です。いいえ、チュートリアルでは、このことが起こる理由を説明していません.

基本的に、これが起こることです。私はこのような CSS を持っています。

@charset "utf-8";
/* CSS Document */
body { font-family: Arial, Helvetica, sans-serif; }  

.container 
{  
    width: 800px;  
    margin: 0 auto;   
}  

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }  

#main   
{
    background: url(images/header.jpg) repeat-x;
}

#main .container
{
    background: url(images/shine_04.jpg) no-repeat;
}

#logo 
{  
    background: url(images/logo.png) no-repeat;  
    height:104px;
    width:301px;
}  

#logo h1
{
    text-indent: -9999px;
    margin-top: 40px;
}

そして、私のHTMLはこのように、本文のみを投稿します。

 <div id="main">  
    <div class="container">
     <div id="header">  
       <div id="logo">  
         <h1>Logo</h1>
        </div>  
       <div id="tagline">  
         <h3>I Love Stuff</h3> 
        </div>
       <ul id="menu">  
         <li><a href="#">Home</a></li>  
         <li><a href="#">About</a></li>  
         <li><a href="#">Portfolio</a></li>  
         <li><a href="#">Contact</a></li>  
       </ul>  
     </div><!--end header -->  

     <div id="content">  
     <h2>Lorem ipsum, Dolor sit</h2>  
        <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>  
        <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.   
            Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.   
            Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.   
            Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.  </p>  
        <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.   
            Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.   
            Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,   
        gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>  
    <div id="news">  
        <h3>Latest Updates</h3>  
        <h4>Vestibulum id nulla eu sapien pellentesque</h4>  
        <small>June 1, 2009</small>  
        <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,   
            facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.   
            Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>  
    <h4>Vestibulum id nulla eu sapien pellentesque</h4>  
    <small>June 1, 2009</small>  
    <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,   
        facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.   
        Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>  
     </div><!--end news-->  

     </div><!--end content-->  

     <div id="sidebar">  
     <div id="subscribe">  
                    <h3>Subscribe!</h3>  
                    <ul>  
                        <li><a href="#">Subscribe via RSS</a></li>  
                        <li><a href="#">Get Email Updates</a></li>  
                        <li><a href="#">Follow us on Twitter</a></li>  
                    </ul>  
                </div>  
                <div id="popular">  
                    <h3>Popular Items</h3>  
                    <ul>  
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>  
                        <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>  
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>  
                        <li><a href="#">Proin tempor erat sit tene</a></li>  
                    </ul>  
                </div>  
                <div id="contributors">  
                    <h3>Contributors</h3>  
                    <ul>  
                        <li><a href="#">John Smith, freelance writer</a></li>  
                        <li><a href="#">Jack McCoy, designer</a></li>  
                        <li><a href="#">Lenny Briscoe, editor</a></li>  
                        <li><a href="#">John Smith, martketing</a></li>  
                    </ul>  
                    <a href="#">Join Our Team</a>   
                </div>  



     </div><!--end sidebar-->  

    </div><!--end main container-->  
   </div><!--end main--> 


    <div id="footer">  
     <div class="container">  
          <p>Copyright © 2009  MySite <br />  
            All Rights Reserved</p>  
     </div><!--end footer container-->   

    </div><!--end footer-->

CSS には#logo、親セレクターからわかるように、h1 セレクターが#logoあります。背景があります。これはまさにロゴです。いまいましいロゴを上から 40px わずかに下に配置したいので、margin-top: 40px;、理由はわかりませんが、ロゴだけが 40px 下に移動するのではなく、ページ全体が下に移動します! T_T、この背後にある私の脳が処理できるすべてのロジックを推測しようとして、すでにほぼ 1 時間費やしましたが、できません!

私の質問は、私が言ったのと同じです。なぜページ全体が下に移動するのですか? 動くべき要素はロゴ画像だけですが、なぜ全体が動くのでしょうか? それを修正するにはどうすればよいですか？

4

3 に答える 3

2

padding-top: 40px親コンテナのmargin を padding: に置き換えてみてください。つまり#header、 の背景画像を指定しており#logo、移動する必要がないためです。

なぜ余白の上にパディングがあるのですか? それは簡単です: マージンは崩壊する傾向があります。W3C には、マージンの崩壊を管理するルール専用の包括的なセクションがあります。

p/s: トラブルシューティングを容易にするために、JSFiddle に問題を投稿してみてください。コミュニティが問題を視覚化するのに役立つだけでなく、実際に問題を解決するプロセスを促進するのにも役立ちます。

于 2013-03-21T10:58:30.650 に答える
1

試す

#logo 
{  
    background: url(images/logo.png) no-repeat;  
    height:104px;
    width:301px;
    background-attachment:fixed;
    background-position: 0px 40px;
}
于 2013-03-21T11:05:04.353 に答える
0

これを試して：

#logo 
{  
    background:url(images/logo.png) no-repeat;
    background-position: 0px 40px;
    height:144px;
    width:301px;
}
于 2013-03-21T11:10:07.710 に答える