problema al maquetar con el header

Dundee · #1 (**permalink**) 27/12/2008, 04:49

Buenas , estoy iniciándome a maquetar sitios con CSS cuando antes lo hacía con tablas. Cada dia lo hago mejor jejeje pero todavía me surjen problemillas como este:
Tengo este código (abajo) con el siguiente problema . Tengo un header que mide 120px de height y yo quiero que el menú que se presenta mediante una lista en horizontal se vea al final del header , es decir si mide el header 120px púes inmediatemente antes de terminar el header (115px + o -). El problema es que si hago esto :

Código:

#header ul  
{margin.top: 115px;
padding: 0;
list-style-type: none;
text-align: center; 
}

Se estira el header y yo no quiero eso , quiero que el header mida 120 px si o si ¿como puedo hacer esto?.
El código entero está aquí abajo:
EL HTML

Código:

<div id='container'>
<div id='header'>

	<ul>
	<li>Inicio</li>
	<li>Nuevo anuncio</li>
	<li>Registro</li>
	<li>Login</li>
	<li>Ayuda</li>
	<li>Directorio</li>
	</ul>

</div>
<div id='cuerpo'>
<!-- aquí dentro va todo el cuerpo de la web (menos la cabecera) -->
<div id='left_menu'> dd</div>
<div id='main'> </div>
<div id='right_menu'> </div>

EL CSS


Código:

	/* capas del sitio */
#container {width:99%; border:1px solid #003366}
#header {height:120px}
#cuerpo {background-color:#CC9900;height:620px }
#left_menu {float:left; width:120px ;border:1px solid #003366;height:320px}
#main {background-color:#003300}
#right_menu {float:right; width:120px ;border:1px solid #003366;height:320px}

/* listas y estilos*/

#header ul  
{margin: 0;
padding: 0;
list-style-type: none;
text-align: center; 
}
#header ul li {display: inline;}
 

</div>

Un saludo y mil gracias de antemano

Dundee · #2 (**permalink**) 27/12/2008, 05:17

Bueno me autorespondo , acabo de encontrar la solución aquí:

http://www.forosdelweb.com/f53/aline...a-capa-339740/

Un saludo y gracias a tod@s

Aresillo · #3 (**permalink**) 27/12/2008, 05:25

Buenos días!
Mira esto que pones el en código del header
#header ul
{margin.top: 115px;
padding: 0;
list-style-type: none;
text-align: center;
}
Ahí tendría que ir un guión, te recomiendo que valides el css y el html cuando estés trabajando porque detalles como este te los dice..

De todas formas no me hago mucho a la idea de lo que quieres, pon una explicación visual, todo el código o una url...

Aresillo!!

Dundee · #4 (**permalink**) 27/12/2008, 06:26

Cita:

Iniciado por Aresillo

Buenos días!

Ahí tendría que ir un guión, te recomiendo que valides el css y el html cuando estés trabajando porque detalles como este te los dice..

Aresillo!!

Interesante respuestas , pero ¿como se valida el CSS? , nunca había oído eso.

Acabo de ver lo del guión , simplemente fué un fallo de copiar y pegar nada más .
Como he dicho he solucionado en parte mi problema , pero sigo sin conseguir poder poner el menú del header donde quiero , si le digo que ponga el menú donde termina el header se estira todo.

Un saludo y gracias

Aresillo · #5 (**permalink**) 27/12/2008, 13:55

Vale te explico...
Para validar HTML: http://validator.w3.org/
Para validar CSS: http://jigsaw.w3.org/css-validator/

No logro ver que es lo que quieres lograr con el menú y el header... hazte explicar...

Un saludo!!

Aresillo!!

Dundee · #6 (**permalink**) 28/12/2008, 04:29

Cita:

Iniciado por Aresillo

Vale te explico...
Para validar HTML: http://validator.w3.org/
Para validar CSS: http://jigsaw.w3.org/css-validator/

No logro ver que es lo que quieres lograr con el menú y el header... hazte explicar...

Un saludo!!

Aresillo!!

Bueno la verdad que no se como explicarlo mejor, pero voy a intentarlo:

Imagínate una web con 5 partes:
<div id='container'>
1 header
2 menú_izquierdo
3 contenido_central
4 menú_derecho
</div>

Todo ello dentro de container claro ; ahora quiero en el header poner un menú tipo lista horizontal ,¿ok?, hasta ahí bien porque lo se hacer , pero quiero que no se muestre arriba de todo pegado al margen sino que tenga un margen , es decir lo quiero al final del header, si el header mide de largo 120px quiero que el menu tenga de margen 110px respecto al comienzo de la capa header. ¿Se entiende mejor?.
El tema es que si lo hago com he puesto arriba se estira todo el header.

Una pregunta aunque parezca muy tonta , ¿para que sirve validar el css y el html?, ¿no es suficiente probar las webs en distintos navegadores y ver si funciona?.

Un saludo y gr@cias

Aresillo · #7 (**permalink**) 28/12/2008, 10:57

Pues bueno, validar las webs sirve para que tu código sea correcto y se interprete bien por los navegadores, evita que tengas errores tontos y hay muchas probabilidades de que se vea bien en diferentes navegadores...
Por otro lado, se considera un mínimo para hacer algo con calidad..
Respecto a lo que comentas del menú, yo haría un capa para ese menú y luego la posicionaría...
Es decir,
<div id="menu">
la lista
<div>

Para el CSS

#menu{
left: 110px;
}

Si pones el código completo o una url lo finiquitamos rápido...

Aresillo!!

Dundee · #8 (**permalink**) 28/12/2008, 12:55

Cita:

Iniciado por Aresillo

Si pones el código completo o una url lo finiquitamos rápido...

Aresillo!!

Aresillo te lo agradezco pero creo que poner otra vez el código sería redundante, atrás pegué entero.
Pero de todas formas pongo un resumen aquí.
<div id='conteinet'>
<div id='header'>
<ul>
<div class='lista'>
<li> Inicio </li>
<li> Página 1 </li>
<li> Página 2</li>
</ul>
</div>

</div>

<div id='left_menu'></div>
<div id='central'></div>
<div id='right_menu'></div>
</div>


Ahora el problema es en el Css en cuestión que es el del header.
#header {height:37px; clear:both}

Es decir que Inicio, PAg1 y Pag 2 no quiero que se muestren arriba de todo sino en el lugar que yo quiera dentro de la capa HEADER (en medio ,abajo etc )¿se entiende?.

Yo hací algo así:
#header .lista{margin-top:115}
El problema es que se estiraba también la capa header y eso es una cosa que no termino de entender de la maquetación con capas, ¿porque se estira la capa CONTENEDORA si yo lo que quiero es decirle el margen que tiene que guardar con respecto a esta la capa CONTENIDA?.

Un saludo y gracias de antemano.

Aresillo · #9 (**permalink**) 28/12/2008, 14:14

Perdón...
Estoy seguro que lo que tú quieres es como el menú de idiomas que está en esta web:
EMDMA (Web en contrucción)

se trata de un menú, dentro de un header, dentro de una lista y posicionado exactamente donde quiero...

Sí, ya sé que el diseño es un tanto feo pero es que desde que la hice hasta ahora han cambiado mucho las cosas...

Un saludo! y a ver si lo consigues..

Aresillo!!

Mikmoro · #10 (**permalink**) 28/12/2008, 17:02

En tu caso, la manera más recomendable es darle al menú una posición relativa, y en lugar de desplazarla con margin-top, hacerlo con el desplazamiento superior (top):

Cita:

#header .lista {position: relative;
top:115px;
left: 0;
}

Dundee · #11 (**permalink**) 29/12/2008, 03:10

Hola , lo que ha mostrado Aressillo es lo que quiero exactamente. (Por cierto seré yo muy malo diseñando ya que lo mio es la programación , pero te aseguro que el diseño de esa web está muy bien).

Ok Mikmoro voy a probar eso de top: , la verdad que creo que debo repasarme y algún manual bueno de css porque tengo algunas lagunas (o más bien mares).
Un saludo

Aresillo · #12 (**permalink**) 29/12/2008, 03:55

pues mirate esto:
Introducción al CSS

Lo que dice Mik, es lo mismo que he hecho yo (creo), le he hecho un desplazamiento desde el top y desde el left... así que si pruebas lo de los dos te saldrá..

Ya sabes que para gustos los colores, pero la verdad es que no está muy bien..

Aresillo!!

Dundee · #13 (**permalink**) 29/12/2008, 08:31

Ok gracias, ese libro ya lo tengo pero por tiempo no he terminado de verlo.
Un saludo y felices fiestas