HTML/CSS書式設定の問題

私は悲しみを与えている課題に取り組んでいます。私は画像の色に合った赤いボックスを作るはずです。このボックスは、ページの中央に表示されます。ボックスはページの80％とされています。画像は箱の中にあるはずです。画像は、それが座っているボックスの幅の80％であると想定されます。画像は垂直にセンタリングされます。私はこれをCSSを使ってやろうとしています。ここに私のコードです。私は何が欠けていますか？HTML/CSS書式設定の問題

HTML：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 

    <body> 
     <div class="box"> 
      <ul> 
       <li> 
        <a href="http://blackhawks.nhl.com/"> 
         <img src="http://www.wallpaperpimper.com/wallpaper/Hockey/Chicago_Blackhawks/Chicago-Blackhawks-Blackhawks-Logo-1-JPS6RQXFBC-1024x768.jpg"> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

CSS：

.box { 
    width: 80%; 
    background-color: #dd111; 
    margin-left: auto; 
    margin-right: auto; 
} 
.box ul { 
    margin-left:auto; 
    margin-right:auto; 
} 
.box ul li { 
    width: 80%; 
    vertical-align: middle; 
}

出典

2012-01-10 YoungGuy

宿題ですか？ –

はい、それは宿題です。 – YoungGuy

それはリストにある理由は何ですか？リセットされていないリスト自体は、あなたのアライメントを台無しにするでしょう。 –

リストが必要でない場合は、これを行うことができます。あなたは、リストを使用したい場合は、0

<style type="text/css"> 

    .box { 
     width:80%; 
     margin:0 auto 0 auto; 
    } 

    img { 
     width:80%; 
     margin:0 auto 0 auto; 
     display:block; 
    } 

    .box-stripe { 
     width:80%; 
     height:15px; 
     margin:0 auto 0 auto; 
    } 

    </style> 


    <body> 

    <div class="box"> 

    <div class="box-stripe"></div> 

    <img src="yourimage.png" alt="" /> 

    <div class="box-stripe"></div> 

    </div> 

    </body>

にULのパディングとマージンを設定する必要がありますまたはあなたがリストを好む場合は、このような何かを行うことができます。とにかくあなたを閉じなければなりません。

<style type="text/javascript"> 

.box { 
width:80%; 
margin:0 auto 0 auto; 
} 

.box ul { 
width:80%; 
margin:0 auto 0 auto; 
padding:0px; 
display:block; /*may not need to do this but I don't think a UL is a block element */ 
} 

.box ul .box-stripe { 
width:100%; 
display:block; 
height:15px; 
padding:0px; 
margin:0px; 
} 

.box ul .img { 
width:100%; 
display:block; 
padding:0px; 
margin:0px; 
} 

</style> 



     <body> 

      <div class="box"> 

      <ul> 

      <li>class="box-stripe"></li> 

      <li class="img"><img src="yourimage.png" alt="" /></li> 

      <li class="box-stripe"></li> 

      </ul> 

      </div> 

     </body>

すべてのブラウザは、パディング、余白、行の高さなどの点でHTML要素を異なる方法で扱います。これが私がCSSをリセットすることをお勧めする理由です。ほとんどのULにはデフォルトでいくつかのパディングがあります。

出典

2012-01-10 21:53:55

あなたの行っていることと一致するように改訂します。 –

問題は、ストライプが表示されませんが、私はコードを変更すると、ボックスの幅でストライプを表示し、画像上で重なるように黒いストライプを移動することはできません。 – YoungGuy

私は多分見ることができるURLかjsfiddleを持っていますか？または、現在のコードを再投稿してください。 –

私はあなたには、いくつかの理由でulとliを必要とするかどうかわからないんだけど、あなたが不足している主なものはimgがあるということです幅が与えられていない。

imgに幅がない場合、画像のネイティブ幅が使用され、そのコンテナが引き伸ばされます。現在のhtml（ul）の場合は、liが既に80%に設定されているため、画像の幅を100％にする必要があります。

出典

2012-01-10 21:48:16

私はボックスの中に2つのボックスストライプを配置しなければならないので、リストを使用しています...1つは画像の上に、もう1つは赤いボックスの内側にあります。 – YoungGuy

@YoungGuy - あなたも境界線を着色できることに注意してください。だから、それらを使ってストライプを作ることができるかもしれません。 – mrtsherman

ありがとう、ありがとう！ – YoungGuy

境界線をオンにしてください（または、FirebugまたはChrome開発ツールを使用して要素を検査してください）。国境があると、あなたが思うように物事が位置付けられないのはもっとはっきりしていると思います。

http://jsfiddle.net/2vWY3/1/

出典

2012-01-10 21:50:56 mrtsherman

これは、ページののの80％または100％にする必要があるかどうかわかりませんが、このように見えます。

http://jsfiddle.net/GolezTrol/ZLUGg/2/

Iは、テスト/デモ用にボックスの色と画像のサイズを変更しました。開発も容易になります。

出典

2012-01-10 21:59:42 GolezTrol

答えて

関連する問題