Bueno, entre ayer y hoy he logrado hacer un código medio decente, eso si, no he usado las etiquetas nuevas, solo capas con id y su correspondiente css. Os lo pongo para que veáis como me ha quedado. He variado un poco el diseño.
Por otra parte, lo único que me falla por el momento es la capa que contiende "Texto de bienvenida", que al reducir el ancho del navegador, se mete el texto debajo. Tampoco he probado como se ve en teléfonos, que sería bastante importante debido a que hay muchos usuarios que entran con estos aparatos. Pero no soy capaz de usar las etiquetas de html5, como para intentarlo con diseño orientado a moviles :D
Pongo los códigos que he hecho al final:
Html
Código:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
<div id="logotipo">
<div id="textoLog">Logotipo</div>
<div id="descripcion">Texto de bienvenida</div>
</div>
<div id="contenido">
<nav>
<ul id="menu">
<li><a href="#" id="enlace1">Enlace 1</a></li>
<li><a href="#" id="enlace2">Enlace 2</a></li>
<li><a href="#" id="enlace3">Enlace 3</a></li>
<li><a href="#" id="enlace4">Enlace 4</a></li>
<li><a href="#" id="enlace5">Enlace 5</a></li>
<li><a href="#" id="enlace6">Enlace 6</a></li>
</ul>
</nav>
<div id="articulo">
<div id="titulo"><h2>Titulo</h2></div>
<div id="publicidad1"><img src="adsense300x250.png" /></div>
<div id="texto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id commodo
lectus. Curabitur a placerat neque, et efficitur velit. Suspendisse ultricies massa
eu eleifend pretium. Nulla facilisi. Aliquam finibus vitae nisl ut sollicitudin.
Integer et volutpat turpis. Nunc lorem elit, blandit et auctor at, facilisis in diam.
<br /><br />Duis vitae purus quis nulla porttitor tempus vel ut massa. Donec in ante convallis elit
venenatis pharetra. Pellentesque maximus venenatis condimentum. Aenean eget mattis est,
sit amet consequat magna. Nunc vel lectus auctor, vehicula diam quis, lobortis ligula.
Donec ante urna, placerat nec mattis ac, lacinia vitae libero.
<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id commodo
lectus. Curabitur a placerat neque, et efficitur velit. Suspendisse ultricies massa
eu eleifend pretium. Nulla facilisi. Aliquam finibus vitae nisl ut sollicitudin.
Integer et volutpat turpis. Nunc lorem elit, blandit et auctor at, facilisis in diam.
<br /><br />Duis vitae purus quis nulla porttitor tempus vel ut massa. Donec in ante convallis elit
venenatis pharetra. Pellentesque maximus venenatis condimentum. Aenean eget mattis est,
sit amet consequat magna. Nunc vel lectus auctor, vehicula diam quis, lobortis ligula.
Donec ante urna, placerat nec mattis ac, lacinia vitae libero.
</p>
</div>
<div id="publicidad2"><img src="adsense320x100.png" /></div>
</div>
<div id="publicidad3"><img src="adsense300x600.png" /></div>
<div id="pie"><p>© 2014 - Todos los derechos reservados</p></div>
</div>
</body>
</html>
CSS
Código:
@import url('reset.css');
@import url('fuentes.css');
body
{
background: url("4.jpg");
}
#logotipo
{
width: 100%;
height: 100px;
background: url("3.jpg");
box-shadow: 0px 3px 5px #000000;
-moz-box-shadow: 0px 3px 5px #000000;
-webkit-box-shadow: 0px 3px 5px #000000;
}
#textoLog
{
width: 300px;
font-size: 40px;
padding-top: 20px;
padding-left: 30px;
float: left;
}
#descripcion
{
width: 600px;
float: left;
padding-top: 40px;
}
#contenido
{
width: 960px;
margin: auto;
background: url("2.jpg");
margin-top: 10px;
box-shadow: 0px 3px 5px #000000;
-moz-box-shadow: 0px 3px 5px #000000;
-webkit-box-shadow: 0px 3px 5px #000000;
}
nav
{
margin: auto;
width: 960px;
clear: both;
float: left;
overflow: hidden;
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
}
nav ul li
{
display: inline;
}
#menu
{
float: left;
left: 50%;
list-style-type: none;
margin:0 auto;
position: relative;
}
#menu li
{
float: left;
position: relative;
right: 50%;
padding-left: 5px;
}
nav ul li a
{
color: #000000;
font-size: 14px;
padding: 15px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 0px 3px 5px #000000;
-moz-box-shadow: 0px 3px 5px #000000;
-webkit-box-shadow: 0px 3px 5px #000000;
}
nav ul li a:hover
{
font-size: 20px;
}
#enlace1
{
background-color: #FA1F1F;
}
#enlace2
{
background-color: #73C4CB;
}
#enlace3
{
background-color: #FF6B20;
}
#enlace4
{
background-color: #2085FF;
}
#enlace5
{
background-color: #8C9DFF;
}
#enlace6
{
background-color: #F6FF8C;
}
#articulo
{
float: left;
width: 650px;
}
#titulo
{
padding-left: 50px;
}
#publicidad1
{
width: 300px;
height: 250px;
background-color: red;
float: left;
margin-right: 10px;
margin-left: 5px;
}
#texto > p
{
font-size: 18px;
text-align: justify;
padding: 10px;
}
#publicidad2
{
margin: auto;
width: 320px;
height: 100px;
}
#publicidad3
{
float: right;
width: 300px;
background-color: aqua;
margin-top: 70px;
margin-right: 5px;
}
#pie
{
width: 960px;
padding-top: 20px;
clear: both;
}
#pie > p
{
text-align: center;
}