0
ここには私が書いた、動作するコードを見るcodepenがあります。インラインにする必要があるときにヘッダーの上にあるWordpress Body
私のワードプレスのテーマで同様のコードを書くと、私の体はヘッダの上に現れます。どのようにしてヘッダの隣の本文を取得できますか？
[BONUS]ヘッダーの右端と画面の右側の中央にボディを配置する最適な方法は何ですか？
アドバイスはありがとうございます。事前に感謝いたします。
[編集]私は私のcodepenで行ったようにbodyを対象にする前に私のWordPressサイト用にコードを変更しましたが、class .siteでdivを作成してbodyとして使用しています。これは一時的な修正ですが、意図したとおりに動作しています。ビーバービルダーなどのビジュアルプラグインビルダーを統合できるように、この影響をどのようにして達成することができますか？
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 -->
おそらく、両方の要素のヘッダーと本文の中央に配置する方法はありますか？ – ERIC