0

さて、これで完全に新しいことを告白します。私はデザイナーであり、何よりもまず、事前に作成されたテンプレートを解体してそれらを研究することにより、コーディング方法を学ぼうとしています。

私がやりたいのは、短いテキスト行（左フロート）、中央に配置されたロゴ（幅/高さはファイナライズによって異なる場合があります）、およびテキストナビゲーション（右フロート）を用意することです。テーマを変更しています。

これが私が持っているものです：

 <header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">

    <div class="header_top clearfix">
        <div id="logo" class="left_float">
            <a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>  
        </div>

        <?php  if(function_exists('wp_nav_menu')) : ?>  
            <?php 

            wp_nav_menu(  
                array(  
                    'theme_location'  => 'primary-menu', 
                    'container'       => 'nav',                     
                    'container_id'    => 'nav',  
                    'container_class' => 'right_float',  
                    'menu_class'      => '', 
                    'menu_id'         => '' ,
                    'walker' => new custom_menu_output()
                ));  
            ?>  
        <?php else: ?>  
            <nav id="nav" class="right_float">  
                <ul>  
                    <?php wp_list_pages('title_li=&depth=0'); ?>  
                </ul>  
            </nav>  
        <?php endif; ?> 

    </div>

以下はCSSです。テストとして.left_floatを.centerクラスと交換しようとしましたが、ナビゲーションが下に押されてしまいます。

.left_float { 
    float: left; 
    }

.center {
    display: block;
    margin-left: auto;
    margin-right: auto }


 .right_float { 
     float: right; 
     }

長い投稿-ごめんなさい！どんな助けでもありがたいです-私が読んで学び、自分で始めることができるいくつかのリンクでさえ。

本当にありがとう！

4

2 に答える 2

0

あなたwp_nav_menuにはdivがありません。Enclose は div内にありclass=lfloat、3 つすべてのdivs に 1 つのクラスだけを追加します。

`.lfloat{
float: left;
}`
于 2012-06-27T19:06:45.857 に答える
0

パート 1:まず、コードに<div>with クラスがありません。とタグの間にあるすべてのコードを独自のタグにcenter入れることから始めます。私はあなたが次のようなものが欲しいと仮定しています:left_floatright_float <div><div class="center">...</div>

<header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">

    <div class="header_top clearfix">
        <div id="logo" class="left_float">
            <a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>  
        </div>
        <div class="center">
        <?php  if(function_exists('wp_nav_menu')) : ?>  
            <?php 

            wp_nav_menu(  
                array(  
                    'theme_location'  => 'primary-menu', 
                    'container'       => 'nav',                     
                    'container_id'    => 'nav',  
                    'container_class' => 'right_float',  
                    'menu_class'      => '', 
                    'menu_id'         => '' ,
                    'walker' => new custom_menu_output()
                ));  
            ?>  
        <?php else: ?>
        </div>
            <nav id="nav" class="right_float">  
                <ul>  
                    <?php wp_list_pages('title_li=&depth=0'); ?>  
                </ul>  
            </nav>  
        <?php endif; ?> 

    </div>
    <br clear="all" />

<div class="center">...</div>追加して追加したことに気付くでしょう<br clear="all" />（これは次の部分で重要です...）

パート 2: CSS を次のように変更します。

.left_float, .center, .right_float { 
    float: left; 
}

ただし<br clear="all" />、コードに新しいものを保持するようにしてください。最後に、すべてdivの s を左にフロートさせると、すべてが隣り合わせになります。そこから、各 の幅をdiv好きなように変更できます!

それが役に立てば幸いです、
Hope4You

于 2012-06-27T00:24:40.627 に答える