2016-08-03 2 views
0

Вот codepen, чтобы увидеть код, который я написал и работает.Wordpress Body Над заголовком, когда он должен быть Inline

Когда я пишу аналогичный код в своей теме Wordpress, мое тело появляется над заголовком. Как я могу получить тело рядом с заголовком?

[BONUS] Каков наилучший способ/как выровнять тело по центру между правым краем заголовка и правой стороной экрана.

Любые советы приветствуются, и я благодарю вас заранее.

[EDIT]: Я изменил свой код для своего сайта Wordpress, потому что прежде чем я нацелился на тело с помощью css, как в моем кодеде, но вместо этого я создал div с классом .site и использую это как тело. Это временное исправление, но оно работает по назначению. Как я мог бы лучше достичь этого эффекта, поэтому я могу интегрировать визуальные плагины-строители, такие как beaver builder?

HTML:

<div id="header"> 
    <img src="http://placehold.it/100x100"> 

    <ul id="nav"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item Number 3</li> 
     <li>Item #4</li> 
    </ul> 

</div> 
<div id="body"> 
    <div id="container">Body 
    </div> 
    </div> 

</div> 

CSS:

#header, 
#body { 
    display: inline-block; 
} 

#header { 
    white-space: nowrap; 
    width: 15%; 
    height: 100%; 
    float: left; 
    text-align: right; 
    position: fixed; 
    //border: 1px solid green; 
} 

#header img { 

} 

#nav ul { 
    list-style: none; 
} 
#nav { 
    position: absolute; 
    bottom: 4%; 
    right: 0; 
} 

#body { 
    width: 80%; 
    float: right; 
    //border: 1px solid yellow; 
} 

#container { 
    height: 10000px; 
} 

header.php:

<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>" /> 
    <meta charset="<?php bloginfo('charset'); ?>"> 
    <meta name="viewport" content="width=device-width"> 
    <title><?php bloginfo('name'); ?></title> 
     <?php wp_head(); ?> 
</head> 

<body <?php body_class(); ?>> 

    <!-- Site Header --> 
<header class="site-header"> 
    <?php the_custom_logo(); ?> 
     <?php wp_nav_menu(array('theme_location','Primary','menu_class'=>'main-navigation')); ?> 
</header> 
    <!-- /Site Header --> 

<!-- Site Content --> 
+0

Возможно, способ центрировать как элементы заголовка, так и тела? – ERIC

ответ

0

Часть проблемы заключается в том, что у меня была ошибка PHP в моей functions.php. Кроме того, я изменил положение контента сайта на абсолютное, а навигация на сайте - на исправление. Затем я устанавливаю ширину навигационной панели и содержимого сайта. Я также добавил цикл содержимого в свой заголовок, чтобы создать область содержимого. Навигация и контент сайта отображаются в виде строкового блока.

Все теперь работает.

Смежные вопросы