Duda estructura básica

gines86 · #1 (**permalink**) 07/02/2014, 03:42

Buenas expertos, se que será algún tipo de chorrada para vosotros pero no se donde la estoy liando...Os adjunto una imagen de lo que quiero y me gustaría que me indicaseis la estructura correcta. Yo he probado con "float" e "inline" pero siempre se me descuadra todo....

Ayuda por favor!!

pzin · #2 (**permalink**) 07/02/2014, 03:54

Hasta que no podamos atravesar las imágenes cual autostereogram y ver el código, mejor poner el código que tengas hasta ahora.

gines86 · #3 (**permalink**) 07/02/2014, 04:03

Buenas pzin, ya me ayudaste y me dijiste que pusiera un tamaño fijo en el encabezado, y lo hice, pero sigue fallandome. Mira, te adjunto otra imagen del descuadre:

Código:

.logo { width: 210px;
display: inline;
}


.menu { width: 600px;
 float: right;}

.submenu {
	height: 60px;
	position: absolute;
	right: 10px;
	top: 70px;
	max-width: 650px;
	z-index: 3;
	width: 400px;
	}

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

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;
	margin-top: 0px;
	width: 1024px;
	}

	

.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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book</title>
<link href="../estilo.css" rel="stylesheet" type="text/css" />
<link href="../menu.css" rel="stylesheet" type="text/css" />
</head>


<!---------------------------------------------------------------------------------------->


<body>
<div class="encabezado">
  <img src="../images/logo.png" / id="logo">


<div class="menu">
	<ul class="nav">
		<script type="text/javascript" src="../menusup1.js"></script>
	</ul>
</div>

 		<div class="submenu">
<span id="titulo">BOOK // </span>

  <a href="#">Julen </a> -
  <a href="#">Diamonds </a> -
  <a href="#">Estefanía Saura </a> - 
  <a href="#">Marina </a> -
  <a href="#">Toni </a> - 
  <a href="#">Ginés </a> -
  <a href="#">Fernando </a> - 
  <a href="ana.html">Ana </a> -
  <a href="#">Belén </a> -
  <a href="#">Café, Tiramisu &amp; Chocolate </a> -
  <a href="#">Angel </a> -
  <a href="#">Yaiza </a> -
  <a href="#">Juanmi </a> - 
  <a href="#">Manuel </a> -
  <a href="#">Gema </a></p>
  </div>
  
</div>


<!---------------------------------------------------------------------------------------->


<div class="cuerpo">

<img src="portada/portada.png">

</div>


<!---------------------------------------------------------------------------------------->


<div class="pie">
Luis Arenas Copyright © Todos los derechos reservados.
<p><a href="https://www.facebook.com/LuisArenasFotografo" target="_blank"><img src="../images/face.png" alt="facebook" /></a>

</div>

</body>
</html>

gines86 · #4 (**permalink**) 08/02/2014, 09:53

¿¿ninguna ayuda??

alzacon · #5 (**permalink**) 08/02/2014, 12:55

Lo raro es que no se te acoplase teniendo

Código CSS:

Ver original.logo { width: 210px;
display: inline;
}
 
 
.menu { width: 600px;
 float: right;}

gines86 · #6 (**permalink**) 09/02/2014, 06:49

y como lo arreglo?

JustinKO · #7 (**permalink**) 09/02/2014, 07:30

Yo de momento no entiendo esa posición absoluta que le has dado al .submenu y al logo. Además teniéndolo como lo tienes es normal que cuando reduces la pantalla se te monte uno encima de otro.

Flota los elementos en vez de darle position:absoluta

(Eso si he entendido lo que quieres conseguir)

Zeromm · #8 (**permalink**) 09/02/2014, 15:40

Aquí tienes un ejemplo, solo, para el contenido que has puesto en la imagen.

http://codepen.io/zeromm/pen/hDrcu

Esque solucionar los problemas unicamente leyendo los códigos como los poneis en el foro, en vez de ponerlos usando "codepen", es muy dificil xDDD