Question

我需要一些帮助，将我的css元素放在wordpress主题中。这是我的情况。

首先，我打电话给我的标题。在我的标题内是我的水平导航菜单。

接下来，我从index.php调用我的滑块。创建滑块的方式是占用屏幕宽度的100％，边距为0。这样做可以使我的菜单位于我的滑块图像中。

我的问题是我调用的下一个元素直接放在我的菜单下，但是我希望它放在我的滑块图像下面。我该怎么做呢？我是否必须给下一个元素一个与滑块图像高度相等的边距？似乎可能有更好的方法来做到这一点。

滑块仅用于索引页面，而不用于任何子页面。

我想也许正确的答案与位置标记有关，但我没有任何运气功能。

这是滑块定位的CSS。

.slider {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1500;
}

这是我的index.php文件

<?php get_header();?>

    <section>
        <?php get_template_part('slider', 'index');?>
    </section>

    <section>
        <div class="row">
            test
        </div>
    </section>

<?php get_sidebar();?>
<?php get_footer();?>

这是我的标题

<body>
    <header>

        <section>
            <div class="row">
                <nav class="top-bar" data-topbar>
                    <ul class="title-area">
                        <li class="name"><h1><a href="<?php echo get_option ('home');?>"><?php bloginfo('name');?></a></h1></li><li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                    </ul>
                <section class="top-bar-section">
                    <?php wp_nav_menu( array( 'main-menu' => 'Main Menu', 'container' => false, 'walker' => new Top_Bar_Walker(), 'menu_class' => 'right'));?>
                </section>
                </nav>
            </div>
        </section>

    </header>

这是我的slider-index.php文件

<div class="row full-width slider">
        <div class="preloader"></div>
        <ul class="example-orbit" data-orbit data-options="timer_speed: 6000; slide_number: false; pause_on_hover: false; animation:fade;">
            <?php
            $args = array('category_name' => 'Featured');
            $query = new WP_Query($args);
            while($query->have_posts()) : $query->the_post();
            ?>
                <li><?php the_post_thumbnail('featured');?>
                <div id="<?php echo get_post_meta($post->ID, 'caption', true);?>" class="orbit-caption"><?php the_excerpt();?></div>
                </li>
            <?php
                endwhile;
            ?>

        </ul>

        <div class="row shadow"><img src="<?php bloginfo('template_url');?>/img/bottom-shadow.png"></div>
    </div>

感谢您的帮助。

滑块wordpress后css定位文本

0 个答案: