Hola compañeros, en el buscador no he encontrado la solución y se que será una tontería pero no doy con lo que quiero. Me gustaría poner el logotipo de mi página y justo a la derecha el menú y que al reducir la página no se mezclen, para ir más rápidos me gustaría que la estructura de mi página fuera como por ejemplo la de http://www.cuantarazon.com/
Pagina centrada, con el logotipo y el menu en un div superior, el contenido en un div intermedio y el pie en un div inferior.
Este es el código que tengo que seguro que esta fatal...
PÁGINA HTML:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contacto</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!---------------------------------------------------------------------------------------->
<div class="encabezado">
<img src="images/logo.png" / id="logo">
<div class="menu">
<ul class="nav">
<script type="text/javascript" src="menusup.js"></script>
</ul>
</div>
</div>
<!---------------------------------------------------------------------------------------->
<div class="cuerpo">
<div class="contenido">
AQUI VA EL TEXTO CENTRAL
</div>
</div>
<!---------------------------------------------------------------------------------------->
<div class="pie">
Copyright © Todos los derechos reservados.
</div>
</body>
</html>
CÓDIGO CSS:
Código:
html, body {
font-family:"Century Gothic", "book Antiqua", calibri, candara;
font-size: 14px;
margin: 0;
background-image:url(images/bg.jpg);
color: #bbbbaa;}
.encabezado {min-height: 130px;
position: relative;
margin-top: 0px;
width: auto;}
.cuerpo {min-height: 450px;
background-color: #333;
position: relative;
background-image:url(images/bg2.jpg);
text-align: center;}
.contenido {width: 1024px;
text-align: left;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;}
.pie {width: 1024px;
min-height: 50px;
margin: 20px auto auto auto;
position: relative;
text-align: center;}
#logo {
width: 210px;
padding-left: 40px;
padding-top: 10px;
position: absolute;
}
a,img{border:0px}
a:link, a:visited {color: #666;
text-decoration:none;
font-size: 16px;}
a:hover {color: #fff;
text-decoration:none;
font-size: 16px;}
h1,
h2 {
letter-spacing: 3px;
text-transform: uppercase;
color:#E08305;}
h1 {
font-size: 1.6em;
margin: 0px;}
h3 {color:#E08305;}
img.der {float: left;
padding-right: 20px;}
/*-------------------SPAN----------------*/
#titulo {color: #C60;
font-weight:bold;
font-size: 16px;}
CÓDIGO MENU:
Código:
.logo {
min-width: 200px;
min-height: 140px;
position: absolute;
left:0;
}
.menu {
position:absolute;
right: 0px;}
.submenu {
height: 60px;
position: absolute;
right: 10px;
top: 70px;
max-width: 650px;
z-index: 3;
}
.nav > li {
float:left;
text-decoration: none;
list-style: none;
}
.nav li a {
font-size: 26px;
color:#FFF;
display:block;
padding:10px 12px;
text-decoration: none;
}
.nav li a:hover {
color: #E08305;
text-decoration:underline;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
z-index:4;
list-style: none;
padding-left: 0px;
background-image:url(images/bg.jpg);
filter: alpha(opacity=80);
-moz-opacity: .8;
opacity: .8;
}
.nav li:hover > ul {
display:block;
}
.nav li:active {color: white;}