Foros del Web » Creando para Internet » Diseño web »

Problema centrado general

Estas en el tema de Problema centrado general en el foro de Diseño web en Foros del Web. Hola, soy nuevo en el tema diseño web, eh ido aprendiendo de a poco. Dreamweaver es lo que utilizo. Hace un tiempo yo armaba paginas ...
  #1 (permalink)  
Antiguo 04/03/2010, 06:00
 
Fecha de Ingreso: enero-2002
Mensajes: 18
Antigüedad: 22 años, 9 meses
Puntos: 0
Problema centrado general

Hola, soy nuevo en el tema diseño web, eh ido aprendiendo de a poco. Dreamweaver es lo que utilizo. Hace un tiempo yo armaba paginas pero utilizando tablas, luego deje de lado el diseño web. Ahora veo que armar paginas "a la antigua" ya ah quedado un poco obsoleto, ademas me parece estupendo la flexibilidad que otorgan las capas al momento de maquetar una pagina.

Tengo un problema: yo quiero que todo el contenido de mi pagina quede centrado horizontalmente en el navegador sin importar la resolucion de pantalla del visitante. Segun lo aprendido, comence construyendo una capa contenedora general, y dentro de esta capa una capa anidada que seria la que deberia contener todo el resto del material. Aqui dentro de esta 2ª capa deberia yo poder anidar mas capas, de manera que al cetrarse esta capa, todo su contenido se mueva con ella. Ahi esta mi problema: no logro anidar mas capas, simplemente no "funciona".

Espero se entienda lo que deseo lograr (debe ser algo sencillo, se todo el tiempo en las paginas actuales)

El codigo actual mio es este:

<! 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<! --
#Layer1 {
width:100%;
text-align:center;
background-color: #CCCCCC;
}
#Layer2 {
margin:auto;
width:627px;
height:101px;
z-index:1;
background-color: #00FFFF;
left: 74px;
top: 8px;
}
-->
</style>
</head>

<body>

<div id="Layer1">
<div id="Layer2"></div>
</div>


</body>
</html>

Espero alguien me de una manito
  #2 (permalink)  
Antiguo 04/03/2010, 06:36
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 16 años, 3 meses
Puntos: 1532
Respuesta: Problema centrado general

error; para centrar la capa 1 solo se necesita:
#Layer1 {
margin: 0px auto;
width: tantospx;
}

text-align se usa para "centrar el texto" da una falsa apariencia de centrado en IE

por defecto los div, o mejor dicho los elementos en bloque (display:block;) tienen un width del 100%

recomendación: manual de CSS , referencia CSS 2.1 y luego CSS Avanzado
  #3 (permalink)  
Antiguo 04/03/2010, 07:58
 
Fecha de Ingreso: enero-2002
Mensajes: 18
Antigüedad: 22 años, 9 meses
Puntos: 0
Respuesta: Problema centrado general

Si, lo de margin = auto es correcto, pero segun lei, ese tipo de centrado no funciona bien en explorer, por eso el codigo que postee es el que me dijeron que usaba , es una especie de artimaña para lograr que la 2ª capa quede siempre centrada, sino no se centra (ya lo probe)

El tema sigue siendo el mismo, por mas que use margin = auto, las capas anidadas entoces tampoco me quedaron centradas luego en cualquier nivel de resolucion de monitor.
  #4 (permalink)  
Antiguo 04/03/2010, 12:32
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 16 años, 3 meses
Puntos: 1532
Respuesta: Problema centrado general

margin: 0px auto; o margin: auto;, funciona en todos los navegadores, si en alguno te falla es porque requiere que coloques el DOCTYPE al principio del archivo, pero estos son casos aislados:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Etiquetas: general, centrar
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 15:34.