0

私は HTML/CSS を初めて使います。

headerimg の右側にある site-title 要素と site-desc 要素が必要です。もちろん、フロートオプションを使用して、特定のブラウザー幅でこのように表示されます。ブラウザの幅に関係なく、できるだけ隣接したままにしておきたいです。

また、それらを保持するためにヘッダー コンテナーを拡張したいと考えています。その下の本体は別の色であるため、ブラウザーの幅が狭くなると、画像はその上に移動します。

header.php の関連するものは次のとおりです。 

<hgroup>
   <?php
       // Check to see if the header image has been removed
       $header_image = get_header_image();
       if ( ! empty( $header_image ) ) :
   ?>
  <h1 id="site-logo">
       <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php header_image(); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
       </a>
  </h1>
      <?php endif; // end check for removed header image ?> 
<div id="headertext"><span> 
    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2></span>
        </div>
            <div id="headerimg">
             <img src="/wp-content/themes/catch-box/images/Puzz_letters.png" align="left" />
        </div>
</hgroup>

style.css は次のとおりです。

#headertext {
    float: right;
    margin-bottom: 20px;
}

#headerimg {
    float: left;
    margin-bottom: 20px;
}
4

1 に答える 1

0

PHP:

<hgroup>
<?php
   // Check to see if the header image has been removed
   $header_image = get_header_image();
   if ( ! empty( $header_image ) ) :
?>

<div id="site-logo">
   <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
      <img src="<?php header_image(); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
   </a>
</div>

<?php endif; // end check for removed header image ?> 

<div id="headertext">
    <h1 id="site-title">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    </h1>

    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>

<div id="headerimg">
  <img src="/wp-content/themes/catch-box/images/Puzz_letters.png" align="left" />
</div>

<div class="clear"> </div>

</hgroup>

<div class="clear"> </div>

CSS:

#site-logo {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 30px;
}

#headertext {
  float: left;
}

#site-title {
  margin-bottom: 20px;
}

.clear {
  clear: both; /* Look up what clear:both does. */
}

@media only screen and (max-width: 900px) { /* define your smaller screen styles inside this */
    #site-logo, #headertext {
     float: none;
    }     

}

小さな画面では、CSS を使用してロゴの位置を下に変更することはできません (良い意味ではありません)。

于 2013-02-07T08:08:30.800 に答える