Foros del Web » Creando para Internet » CSS »

Problema para alinear capas

Estas en el tema de Problema para alinear capas en el foro de CSS en Foros del Web. buenos dias. Estoy intentando cambiar mi web, he decidido hacerla en CSS, hasta el moemnto siempre la habia hecho con tablas. He leido muchos tutoriales ...
  #1 (permalink)  
Antiguo 20/05/2010, 06:19
 
Fecha de Ingreso: mayo-2010
Mensajes: 7
Antigüedad: 7 años, 6 meses
Puntos: 0
Problema para alinear capas

buenos dias.

Estoy intentando cambiar mi web, he decidido hacerla en CSS, hasta el moemnto siempre la habia hecho con tablas.

He leido muchos tutoriales y manuales, he aprendido mucho, pero no consigo completar la estructura principal de la pagina. Resulta que quiero una columna a la derecha y otra a la izquierda con anchos fijos, pero una central que se adapte a la resolucion de pantalla. Algo típico!!!

He conseguido poner las columnas a la derecha y a la izquierda (ambas flotantes y con posicion relativa), pero cuando voy a poner la central empieza a moverse la cosa, ya no aparecen los margenes como toca y no hay manera de posicionar la central de forma relativa.

Os dejo la dirección por si me podeis ayudar.

http://www.licenciaactividadesvalencia.es/

Un saludo
  #2 (permalink)  
Antiguo 20/05/2010, 09:16
 
Fecha de Ingreso: mayo-2010
Mensajes: 39
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema para alinear capas

Este es mi primer post y te envio esto .. a mi me a hecho de utilidad

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css" media="screen">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ... </DIV>
<DIV id="sidebar"> ... </DIV>
<DIV id="main"> ... </DIV>
<DIV id="footer"> ... </DIV>
</BODY>
</HTML>


la central no se posiciona de forma relativa sino como fixed
position: fixed;
position: relativa; funciona bn para los ementos que estan sujetos a fixed :D

sAludos
  #3 (permalink)  
Antiguo 20/05/2010, 09:30
 
Fecha de Ingreso: mayo-2010
Mensajes: 7
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema para alinear capas

Perdona pero no entiendo lo que dices, si les doy una posicion fija a las capas no se me adaptan a la pantalla.

ademas, he pegado el codigo que me has dado y solo ma aparecen capas horizontales y mi problema lo tengo con las capas verticales.

Perdona si no entiendo lo que me quieres decir, soy nuevo en esto.
  #4 (permalink)  
Antiguo 20/05/2010, 09:43
 
Fecha de Ingreso: mayo-2010
Mensajes: 39
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema para alinear capas

para eso es el height: auto; "el largo de la pagina en auto" para que cuando mas pongas cosas se adapte solo el largo pero que raro que no te diviera mira abre un documento nuevo y lo ver en un localhost y veras que funciona y para vizualirzarlo mejor ponele colores y veras que si io hise una forma iwal a esa pero estilo

twitter si quieres me pides el codigo saludos
  #5 (permalink)  
Antiguo 20/05/2010, 11:43
 
Fecha de Ingreso: mayo-2010
Mensajes: 7
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema para alinear capas

Creo que no me has entendido:

lo que yo quiero no es una pagina que se adaapte al ancho de pantalla, eso ya lo tengo, lo que quiero es poner tres columnas dentro de la pagina. la derecha y la izquierda seran de ancho fijo, pero la central se tendra que adaptar al espacio que quede.

un saludo
  #6 (permalink)  
Antiguo 20/05/2010, 11:53
 
Fecha de Ingreso: mayo-2010
Mensajes: 39
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema para alinear capas

ahmmmmm ahora te capte la idea

me meti a una pagina vi dos cosas a la izquierda y derecha pero lo que sobra en el centro que se ajuste

lo que te aconsejo es hacer 3 div pero con anchos limitados la altura "height:100%" la pones asi amm me dices si lo soluciones de otra manera comentando

saludos esa es la unica forma que se mira lo siquiente

#izquierda{
position: fixed;
width: 14em;
height: 100%;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
background-color: white;
}

#central {
position: fixed;
width: 55%;
height: 100%;
top: 15%;
right: 0;
bottom: 100px;
left: 14em;
background-color: transparent;
}
#derecha {
position: fixed;
width: 227px;
height: 100%;
top: 15%;
right: 0px;
bottom: 100px;
background-color: white;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
background-color: #C0C0C0
}
asi lo hice yo :D
  #7 (permalink)  
Antiguo 20/05/2010, 12:08
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Problema para alinear capas

Cita:
Iniciado por dluxox_ Ver Mensaje
ahmmmmm ahora te capte la idea

me meti a una pagina vi dos cosas a la izquierda y derecha pero lo que sobra en el centro que se ajuste

lo que te aconsejo es hacer 3 div pero con anchos limitados la altura "height:100%" la pones asi amm me dices si lo soluciones de otra manera comentando

saludos esa es la unica forma que se mira lo siquiente

#izquierda{
position: fixed;
width: 14em;
height: 100%;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
background-color: white;
}

#central {
position: fixed;
width: 55%;
height: 100%;
top: 15%;
right: 0;
bottom: 100px;
left: 14em;
background-color: transparent;
}
#derecha {
position: fixed;
width: 227px;
height: 100%;
top: 15%;
right: 0px;
bottom: 100px;
background-color: white;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
background-color: #C0C0C0
}
asi lo hice yo :D
Disculpa, por que trabajas tanto con position? yo solo los uso en casos extremos.

xarlyp3
Lo que tu buscas es esto, supongo.

html
Código HTML:
<div id="content">
  <div class="header">Tu encabezado aca</div>
  <div class="left">Columna Izquierda</div>
  <div class="center">Columna Central</div>
  <div class="right">Columna Derecha</div>
  <div class="clear"></div>
  <div class="footer"></div>
</div> 
css

.clear { clear: both; }
#content { margin: 0 auto; width: 960px;<--es un estandar }
.header { width: 100%; <-- si no le pones width, se copla al #content }
.left { float: left; min-height: 100px; _height: 100px; width: 200px; }
.center { float: left; min-height: 100px; _height: 100px; width: 560px; }
.right { float: left; min-height: 100px; _height: 100px; width: 200px; }

PD: recuerda que los tamaños los podes ajustar a tu antojo y recuerda que si das padding a alguno, estos aumentan de tamaño, asi que OJO con eso, aprede bien a usar margin y padding por que si no los entiendes sera un dolor de cabeza para ti por el resto de tu vida :)
  #8 (permalink)  
Antiguo 20/05/2010, 12:16
 
Fecha de Ingreso: mayo-2010
Mensajes: 39
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema para alinear capas

bloowshadow

me base en esto http://www.w3.org/TR/CSS21/cover.html
ahi bn abajo sale algo de css io lo adapte pero si es en caso extremo tratare de no ocuparlo
tambn soy un aprendiz si que veremos que pasa

probare cn tu ejemplo saludos
  #9 (permalink)  
Antiguo 20/05/2010, 12:17
 
Fecha de Ingreso: mayo-2010
Mensajes: 39
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema para alinear capas

en esto sera http://www.w3.org/TR/CSS2/visuren.html
  #10 (permalink)  
Antiguo 20/05/2010, 12:40
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Problema para alinear capas

Cita:
Iniciado por dluxox_ Ver Mensaje
bloowshadow

me base en esto http://www.w3.org/TR/CSS21/cover.html
ahi bn abajo sale algo de css io lo adapte pero si es en caso extremo tratare de no ocuparlo
tambn soy un aprendiz si que veremos que pasa

probare cn tu ejemplo saludos
Nadie nace aprendido man :) a hecharle ganas nomas, eso de las posiciones lo hacen lo editores de texto como dreamweaber o photoshop, asi que mejor aprender a hacer los propios estilos a "pie" es de lo mejor.

Te deseo suerte en tu aprendizaje de xhtml/css, cualquier duda aca estamos para resolverlas, recuerda que si uno no lo sabe, abra alguien que si, asi es la onda jeje

Cuidate, saludos
  #11 (permalink)  
Antiguo 21/05/2010, 04:18
 
Fecha de Ingreso: mayo-2010
Mensajes: 7
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema para alinear capas

Cita:
Iniciado por BloodShadow Ver Mensaje
Disculpa, por que trabajas tanto con position? yo solo los uso en casos extremos.

xarlyp3
Lo que tu buscas es esto, supongo.

html
Código HTML:
<div id="content">
  <div class="header">Tu encabezado aca</div>
  <div class="left">Columna Izquierda</div>
  <div class="center">Columna Central</div>
  <div class="right">Columna Derecha</div>
  <div class="clear"></div>
  <div class="footer"></div>
</div> 
css

.clear { clear: both; }
#content { margin: 0 auto; width: 960px;<--es un estandar }
.header { width: 100%; <-- si no le pones width, se copla al #content }
.left { float: left; min-height: 100px; _height: 100px; width: 200px; }
.center { float: left; min-height: 100px; _height: 100px; width: 560px; }
.right { float: left; min-height: 100px; _height: 100px; width: 200px; }

PD: recuerda que los tamaños los podes ajustar a tu antojo y recuerda que si das padding a alguno, estos aumentan de tamaño, asi que OJO con eso, aprede bien a usar margin y padding por que si no los entiendes sera un dolor de cabeza para ti por el resto de tu vida :)


Primero agradecerte la respuesta, pero sigo sin conseguir lo que quiero. Te explico:

Quiero 3 columnas, la de la derecha e izquierda con ancho fijo, la central con ancho variable, que se ajuste al espacio que quede entre las dos laterales, es decir, con una resolucion de 1280px tendra un tamaño de p.e. 880px y con una resolucion de 1024px tendra un ancho de 624px y asi sucesibamente.

Espero ahora me hayais entendido un poco mejor, un saludo y gracias de nuevo
  #12 (permalink)  
Antiguo 21/05/2010, 07:12
fiu
 
Fecha de Ingreso: diciembre-2006
Ubicación: Barcelona
Mensajes: 128
Antigüedad: 11 años
Puntos: 8
Respuesta: Problema para alinear capas

creo que es mas sencillo si no creas el div central, mira esto, es mas o menos lo que pusieron pero sin el div central y con colorines pa que se vean :P

Código HTML:
Ver original
  1. #content { margin: 0 auto; width: 100%; height:100%; background-color:#F00; }
  2. .left { float: left; height:100%; width: 200px; background-color:#0F0; }
  3. .right { float: right; height:100%; width: 200px; background-color:#00F; }
  4. <div id="content">
  5.   <div class="left">Columna Izquierda</div>
  6.   <div class="right">Columna Derecha</div>
  7. </div>

si no te gusta que ocupe todo, ponle una altura menor.
  #13 (permalink)  
Antiguo 21/05/2010, 07:55
fiu
 
Fecha de Ingreso: diciembre-2006
Ubicación: Barcelona
Mensajes: 128
Antigüedad: 11 años
Puntos: 8
Respuesta: Problema para alinear capas

ah me olvidaba, para que el texto no quede por debajo tendrás que ponerle margenes, ya que sino las capas de los lados quedarán encima. Y ahora viendolo mejor, quiza puedas crear un div en el centro con ese margen para no ir poniendolo en cada texto/imagen, pero olvidate de ponerle anchura, la cogerá segun lo que tenga dentro. Si le pones width, volveras a tener lo anterior.
  #14 (permalink)  
Antiguo 21/05/2010, 09:27
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Problema para alinear capas

Ok, si le das tamaño al div central y lo haces flotante, no te funcionara eso del tamaño variable, yo nunca lo he logrado hacer y si alguien sabe como se hace se lo agradeceria mucho, entonces te recomiendo no darle tamaño al div central asi que se acople al contenido nomas y el div de la derecha dale float: right y al de la izquierda y el del centro un float left, espero que con eso lo arregles, si no ya veremos que hacemos
  #15 (permalink)  
Antiguo 22/05/2010, 07:28
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema para alinear capas

Hola:

Échale un vistazo a este ejemplo del maestro kseso?

Saludos.


Etiquetas: alinear, capas
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 07:32.