0

私はカスタムワードプレスのテーマに取り組んでいます。これは、協会（私の場合は劇場グループ）のホームページを再設計することになっている学校プロジェクトの一部です。

ワードプレスメニューをカスタマイズして、4ページの画像を追加しました。ただし、CSSで<nav>使用しているにもかかわらず、これらの画像が配置されている要素の幅が予想よりも大きくなっています。width: autoこのため、私はこれを解決する方法ではないと思う<nav>使用法を再配置しました。margin-right: -133px;

上部バナーのHTMLは次のとおりです:(コメント化されたコードの束全体が削除されています）

<header role="banner" id="branding">
    <a href="http://dev.zomis.net/talat/">
        <img alt="" src="http://dev.zomis.net/talat/wp-content/themes/talat/talat-logo.png" id="header_logotype">
    </a>
    <nav role="navigation" id="access">
        <a href="http://dev.zomis.net/talat/forening">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_forening_gray.jpg" id="menu_image_forening" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/scen">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_scen.jpg" id="menu_image_scen" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/film">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_film_gray.jpg" id="menu_image_film" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/natverk">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_natverk_gray.jpg" id="menu_image_natverk" class="menu_image">
        </a>
        <div class="menu-talat-container"><ul class="menu" id="menu-talat"></ul></div>
    </nav>
</header>

問題をわかりやすくするために、header要素全体を赤い色でマークし、navを黄色でマークしました。

私はFirebugをよく使って遊んで、これを引き起こしている原因を確認していますが、理解できません。<div class="menu-talat-container">内の空が原因であると疑っていましたが<header>、Firebugで何度もその部分を削除していて、違いは見られませんでした。

このページは次の場所で見ることができます：http：//dev.zomis.net/talat/scen

見た目とわからない部分の画像に「なぜこの黄色い部分が右に突き出ているの？」と書かれています。この黄色い部分が右に突き出ているのはなぜですか？

プロパティを削除すると、margin-right代わりに「ここに画像がないのはなぜですか？」という質問になります。 マークされた領域に画像がないのはなぜですか？

4

2 に答える 2

2

これが発生している理由は、画像の幅が15％に設定されているためです。全体として、それらはコンテナの幅の60％しか占めていません。手動で設定したマージンを追加すると、それでも100％未満になります。したがって、＃accessdivはそのスペースを追加するだけです。

画像の幅をパーセンテージに設定するのは良い考えではないと思います。画像を実際のスペースに合わせて編集し、CSSで画像の幅と高さを設定しないことをお勧めします。

于 2012-05-23T14:14:57.217 に答える
1

画像が小さすぎるのに、なぜ画像が全体のスペースを占めるのでしょうか。

margin-right: -133からプロパティを削除し、id='access' nav写真のサイズを変更するだけです。サイズプロパティをオンに変更します#access img（現在は15％ですが、22％に設定できます）。

画像は拡大縮小されて高くなるため、ヘッダー要素のサイズを変更するか、画像をトリミングすることをお勧めします。

にもう1つの画像を追加しnav、左/右の余白とパディングを付けてフィドルすることもできます#access img。

于 2012-05-23T14:17:40.173 に答える