Foros del Web » Creando para Internet » CSS »

problema al maquetar con el header

Estas en el tema de problema al maquetar con el header en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/12/2008, 04:49
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
problema al maquetar con el header

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
  #2 (permalink)  
Antiguo 27/12/2008, 05:17
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema al maquetar con el header

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

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

Un saludo y gracias a [email protected]
  #3 (permalink)  
Antiguo 27/12/2008, 05:25
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: problema al maquetar con el header

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!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #4 (permalink)  
Antiguo 27/12/2008, 06:26
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema al maquetar con el header

Cita:
Iniciado por Aresillo Ver Mensaje
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
  #5 (permalink)  
Antiguo 27/12/2008, 13:55
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: problema al maquetar con el header

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!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #6 (permalink)  
Antiguo 28/12/2008, 04:29
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
De acuerdo Respuesta: problema al maquetar con el header

Cita:
Iniciado por Aresillo Ver Mensaje
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 [email protected]
  #7 (permalink)  
Antiguo 28/12/2008, 10:57
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: problema al maquetar con el header

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!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #8 (permalink)  
Antiguo 28/12/2008, 12:55
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
De acuerdo Respuesta: problema al maquetar con el header

Cita:
Iniciado por Aresillo Ver Mensaje
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>
<!-- fin de capa lista -->
</div>
<!-- fin de div header -->
<div id='left_menu'></div>
<div id='central'></div>
<div id='right_menu'></div>
</div>
<!-- fin de div container -->

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.
  #9 (permalink)  
Antiguo 28/12/2008, 14:14
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: problema al maquetar con el header

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!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #10 (permalink)  
Antiguo 28/12/2008, 17:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema al maquetar con el header

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;
}
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 29/12/2008, 03:10
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema al maquetar con el header

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
  #12 (permalink)  
Antiguo 29/12/2008, 03:55
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: problema al maquetar con el header

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!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #13 (permalink)  
Antiguo 29/12/2008, 08:31
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema al maquetar con el header

Ok gracias, ese libro ya lo tengo pero por tiempo no he terminado de verlo.
Un saludo y felices fiestas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:47.