Hier ist ein codepen, um den Code zu sehen, den ich geschrieben habe und funktioniert.Wordpress Body über Header, wenn es Inline sein sollte
Wenn ich ähnlichen Code in meinem Wordpress-Theme schreibe, erscheint mein Körper über der Kopfzeile. Wie kann ich den Körper neben dem Header bekommen?
[BONUS] Was ist der beste Weg/wie der Körper zwischen der rechten Kante der Kopfzeile und der rechten Seite des Bildschirms zentriert wird.
Jeder Rat wird sehr geschätzt, und ich danke Ihnen im Voraus.
[EDIT]: Ich habe meinen Code für meine Wordpress-Website geändert, weil ich zuvor Körper mit CSS gerichtet habe, wie ich es in meinem Codepen getan habe, aber stattdessen habe ich ein div mit Klasse .site erstellt und verwende das als Körper. Dies ist eine vorübergehende Lösung, aber es funktioniert wie beabsichtigt. Wie kann ich diesen Effekt besser erreichen, damit ich visuelle Plugin-Builder wie Biber Builder integrieren kann?
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 -->
Möglicherweise eine Möglichkeit, beide Elemente Header und Körper zu zentrieren? – ERIC