Problema para alinear capas

xarlyp3 · #1 (**permalink**) 20/05/2010, 05:19

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

dluxox_ · #2 (**permalink**) 20/05/2010, 08:16

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

xarlyp3 · #3 (**permalink**) 20/05/2010, 08:30

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.

dluxox_ · #4 (**permalink**) 20/05/2010, 08:43

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

xarlyp3 · #5 (**permalink**) 20/05/2010, 10:43

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

dluxox_ · #6 (**permalink**) 20/05/2010, 10:53

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

BloodShadow · #7 (**permalink**) 20/05/2010, 11:08

Cita:

Iniciado por dluxox_

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

dluxox_ · #8 (**permalink**) 20/05/2010, 11:16

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

dluxox_ · #9 (**permalink**) 20/05/2010, 11:17

en esto sera http://www.w3.org/TR/CSS2/visuren.html

BloodShadow · #10 (**permalink**) 20/05/2010, 11:40

Cita:

Iniciado por dluxox_

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

xarlyp3 · #11 (**permalink**) 21/05/2010, 03:18

Cita:

Iniciado por BloodShadow

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

fiu · #12 (**permalink**) 21/05/2010, 06:12

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<style>
#content { margin: 0 auto; width: 100%; height:100%; background-color:#F00; }
.left { float: left; height:100%; width: 200px; background-color:#0F0; }
.right { float: right; height:100%; width: 200px; background-color:#00F; }
</style>
<div id="content">
  <div class="left">Columna Izquierda</div>
  <div class="right">Columna Derecha</div>
</div>

si no te gusta que ocupe todo, ponle una altura menor.

fiu · #13 (**permalink**) 21/05/2010, 06:55

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.

BloodShadow · #14 (**permalink**) 21/05/2010, 08:27

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

jomaruro · #15 (**permalink**) 22/05/2010, 06:28

Hola:

Échale un vistazo a este ejemplo del maestro kseso?

Saludos.