Estancado en un paso de este tutorial - problema de posicionamiento

ralfillo · #1 (**permalink**) 22/01/2016, 12:44

Hola a todos,

Estoy siguendo este tutorial de personalización de temas para Wordpress (que por cierto es muy bueno).

Este es el link del curso: https://www.youtube.com/watch?v=AShql_Ap1Yo&index=4&list=PLpcSpRrAaOaqMA4R dhSnnNcaqOVpX7qi5

Me quedo atascado en el minuto 8:13 del video.

El problema es que la linea que tendría que ir por debajo del header me esta quedando por encima del menu. Además, a la derecha del menu me queda el título del post más reciente (añado captura de pantalla para que se entienda mejor mi pregunta)

Imagen del problema: https://www.dropbox.com/s/1o5rk1ulz5onu6h/screenshot-wordpress.psd?dl=0

A continuación os pongo el código CSS y HTML + PHP.

CSS

Código:

body{
	font-family: Arial, sans-serif ;
	font-size: 14px;
	color: #333;
}

a:link,
a:visited{
	color: #006ec3;
}

p{
	line-height: 1.65em;
	
}

/* General Layout */
div.container {
	max-width: 920px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

article.post{
	border-bottom: 2px dotted #bbbbbb;
}

article.post:last-of-type {
	border-bottom:none;
}

/* Header */

.site-header{
	border-bottom: 2px solid #999;
	margin-top: 100px;
}

/* Footer */
.site-footer{
	margin-top: 30px;
	border-top: 2px solid #999;
}

/* Navigation menus */

.site-nav ul {
	margin: 0;
	padding: 0;
}

.site-nav ul: before, .site-nav ul:after { content: ""; display: table; }
.site-nav ul: after { clear: both; }
.site-nav ul { *zoom: 1; }

.site-nav ul li {
	list-style: none;
	float: left;
	float: top;
}


/* Site Header Menu */

.site-header nav ul li a:link,
.site-header nav ul li a:visited {
	display: block;
	padding: 10px 18px;
	border: 1px solid #BBB;
	border-bottom: none;
}

HTML + PHP

Código:

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

	<head>
		<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(); ?> >
		
		<div class="container">
		
		<!-- site-header -->
		<header class="site-header">
			<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?> </a></h1>
			<h5><?php bloginfo('description'); ?>  </h5>
			
			<nav class="site-nav">  
				
				<?php
				
					$args = array(
						'theme_location' => 'primary'
					);
				
				?>
				
				<?php wp_nav_menu( $args ); ?>
			
			</nav>
			
		</header><!-- /site-header -->

Gracias por vuestra ayuda :)