0

小さな問題があります。関連する問題を検索しましたが、何も見つかりませんでした。可能であれば、スクリプトを作成せずに、本文の幅を調整せずに、この問題を修正したいと考えています。

それでは、行きましょう。最大化されたウィンドウに表示されるように、ロゴをボックス領域の内側に表示したいと思います。

また、ヘッダーとナビゲーション バーの間に大きなマージンを設定するため、要素に相対的な位置を設定したくありません。

ボディ幅で遊んで、他のコンテナに設定してみました。運がない。

http://imageshack.us/g/43/q3qr.jpg/で私の意味がわかります。

コードは次のとおりです: http://jsfiddle.net/NCZg8/4/ `
>

  <div id="page" class="hfeed site">
     <header id="masthead" class="site-header" role="banner">
        <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            <img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
        </a>
      </body>`

注: 「結果」ウィンドウを引き延ばしてみてください。意味がわかります。事前にタイ。

4

1 に答える 1

0

要素が右側の境界からはみ出さないようにするには、左側ではなく右側のプロパティを設定する必要があります。

.Logo_wrapper{
    position:absolute;
    top:40%;
    right:5%;
    z-index:10;
}

更新されたフィドル: http://jsfiddle.net/NCZg8/6/

また、ヘッダーとナビゲーション バーの間に大きな余白を置くため、要素に相対位置を設定したくありません。

ヘッダー内にロゴを表示するにはposition:relative、ヘッダー要素に設定することが重要です。相対位置と絶対位置の詳細については、http: //css-tricks.com/absolute-positioning-inside-relative-positioning/を参照してください。

マージンの問題は、おそらく css で修正できます。

于 2013-09-27T18:52:11.540 に答える