2

簡単だとは思いますが、これに対する解決策が見つかりません。

順序付けられていないリストと一連の画像、つまり「ホーム」、「について」などを使用して水平メニューを作成しました。各画像の幅は異なりますが、高さは同じ 25px です。

ブラウザのサイズを変更すると、メニューの幅と高さが縮小されます。

現在のコードは次のとおりです。

<style>

#container ul.content_list {
}
#container ul.content_list li {
    float: left;
    list-style: none;
    width: 100%;
}
#container ul.content_list li .image{
    float: left; 
    width: 100%;
    max-height: 25px;
}
#container ul.content_list li .image img {
    float: left;
    display: inline-block;
    width: 15%; /* comment this out to make the images the correct width and height */
    max-height: 25px;
}

</style>

<div id="container">
    <ul class="content_list">
        <li>
            <div class="image">
                <img src="homeOff.png" />
                <img src="aboutOff.png" />
                <img src="servicesOff.png" />
                <img src="portfolioOff.png" />
                <img src="contactOff.png" />
                <img src="blogOff.png" />
            </div>
        </li>
    </ul>
</div>

問題を示すためにフィドルをまとめました：

http://jsfiddle.net/CAM79/JQuuj/

現在、メニューの幅と高さが縮小されていますが、画像の高さが正しくありません。

'width: 15%' (コードで強調表示されている) をコメント アウトすると、画像は正しく表示されますが、縮小ではなく折り返されます。

どんな助けでも大歓迎です、前もって感謝します!

4

1 に答える 1

0

デザインをレスポンシブにしたい場合は、ユーザーが画面のサイズを変更している間、画面の幅に反応することを考える必要があります。そうすれば、すべての画像を同じ幅で作成する方がはるかに簡単になります. あなたのデザインによれば、それは可能ですが、メニューに写真を使用することはお勧めしません!!! CSS グラデーションを見ると、pic を使用せずに現在と同じデザインを実現できます (これは SEO にとってはるかに優れています)。結論として、ul タグと li タグを適切に使用する方法を確認してください。すべてのクラスを削除し、タグ名だけをターゲットにして、コードを軽量化することもできます。次のようなもので終了する必要があります。

<div id="container">
<ul>
    <li><a>Home/</a></li>
    <li><a>About/</a></li>
    <li><a>Services/</a></li>
    <li><a>portoflio/</a></li>
    <li><a>contact/</a></li>
    <li><a>blog/</a></li>
</ul>

そしてあなたのcssは例えばそのようなものを持つことができます：

#container ul li{
float: left;
width:15%;
background:black;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

}

#container ul li a{
color:yellow;
text-align:center;
font-weight:bold;
}
于 2012-11-22T14:47:52.397 に答える