logo al lado de menu

gines86 · #1 (**permalink**) 16/09/2013, 10:11

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;}

pzin · #2 (**permalink**) 16/09/2013, 14:46

Aplícale un tamaño mínimo y/o fijo al contenedor de la cabecera:

Código CSS:

Ver original.encabezado {
  width: 1024px;
  min-width: 1024px;
}

Una de las dos propiedades, no ambas. Ya depende de si quieres un ancho fijo a un ancho mínimo.