Re: [Ovillo] Duda-Problema con float

2009-09-20 Por tema Jose Manuel Segovia
Muchas gracias a todos por vuestra ayuda.

Saludos,

Jose

El 19 de septiembre de 2009 19:11, I'm Jepser 
m...@jepserbernardino.comescribió:

 eso es para un bug para IE... Podría funcionar, pero no entiendo por que un
 id con las mismas proporciones de ancho... no crees que sería mejor un
 código así:
 * {
   margin: 0;
 }

 html, body {
   height: 100%;
 }


 #wrap {

 }

 #container {
   margin: 0 auto;
   width: 790px;
   border: #009900 2px solid; /*colocando esto tienes un div #container con
 ancho total de 794px*/
   text-align: left;
   padding: 0;
 }

 /* eliminé el div contenedor por que no hace nada mas que un 1px de borde
 que coloqué en container*/

 #areas{
   border: #FF thin solid; /*con el borde ahora tienes 698px de ancho
 disponibles*/
   position: relative;
 }
 .div area{

 width: 165px;

   height: 143px;
   padding: 16px 0 0 19px;
   font-size: 0.88em;

 float:left;
 display:inline; /*esto es para IE*/

 }
 .clear{
 clear:both;
 width:100%;
 }


 

   body
   div id=container
h1
   Bla Bla Bla
   /h1
   p
   Texto
   /p
   div id=areas
div class=div-area
   p
   Area1
   /p
   /div
   div class=div-area
   p
   Area2
   /p
   /div
   div class=div-area
   p
   Area3
   /p
   /div
   div class=div-area
   p
   Area4
   /p
   /div

 div class=clear/div

   /div
   /div
   /body
 El 19 de septiembre de 2009 10:56, Francisco González
 armij...@gmail.comescribió:

  Hola te doy la solucion, para q esten en horiz  y mantegas el alto dentro
  del contenedor
 
  *Quita los float q tengas* en los areas individuales.
  luego:
 
 
  #areas{
border: #FF thin solid;
position: relative;
  }
  div.areas_enlinea{
display:inline;
  }
 
 
 
  div id=areas
div id=areas_t1 class=areas_enlinea
p
Area1
/p
/div
div id=areas_t2 class=areas_enlinea
  ...
 
  saludos
 
  El 19 de septiembre de 2009 18:07, I'm Jepser m...@jepserbernardino.com
  escribió:
 
   Para no hacerte tantas bolas por que no pruebas con un grid system de
  CSS,
   yo utilizo 960 gs actualmente, apenas pesa 5kb y puedes crear muchas
   combinaciones de columnas dentro de un div de 960px puedes descargar la
   regilla www.960.gs y ver este tutorial http://bit.ly/qO3zW eso te
 podrá
   salvar de algunos dolores de cabeza :)
   Éxitos y espero que te ayude,
  
   El 19 de septiembre de 2009 08:44, Tae Sandoval Murgan
   taeci...@gmail.comescribió:
  
Prueba agrgandole min-height:100%; a #content, #container y #wrap; y
height:100%; a body y html.
   
--
http://procrastinando.netne.net
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
   
  
  
  
   --
   Jepser Bernardino
   www.npixels.net
   twitter jepser
   tel. 52730528
   ___
   Lista de distribución Ovillo
   Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
   Puedes modificar tus datos o desuscribirte en la siguiente dirección:
   http://lists.ovillo.org/mailman/listinfo/ovillo
  
  ___
  Lista de distribución Ovillo
  Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
  Puedes modificar tus datos o desuscribirte en la siguiente dirección:
  http://lists.ovillo.org/mailman/listinfo/ovillo
 



 --
 Jepser Bernardino
 www.npixels.net
 twitter jepser
 tel. 52730528
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


[Ovillo] Duda-Problema con float

2009-09-19 Por tema Jose Manuel Segovia
Hola a todos,

Estoy atascado con unos probleimillas con unos float (no puedo vivir si
ellos pero con ellos tampoco).

Os cuento lo que me ocurre, quiero poner 4 divs (#areas_t1, #areas_t2,
#areas_t3, #areas_t4) alineados horizontalmente, y estos cuatro divs tienen
que estar dentro de otro div contenedor (#areas). La cuestión es que si no
les pongo float a los 4 divs de areas se quedan alineados verticalemnte,
así que los floto; Pero al flotarlos se salen de su contenedor #areas.

Mi primera pregunta es ¿Cómo hago para que esos 4 divs se queden dentro del
su contenedor #areas alinea horizontalmente uno al lado del otro?

Mi siguiente pregunta va un paso más, el #areas está a su vez dentro de otro
que se llama #content y me encantaría que este creciera verticalmente al
100%, es decir que ocupara el tamño completo en vertical de la pantalla. Yo
creía que con ponerle la altura al 100% ya salí pero no me hace caso ¿qué
hago mal?.

Os dejo aquí debajo tanto el CSS que estoy usando como el HTML. Y muchas
gracias por vuestra ayuda.

Saludos,

Jose

-
* {
margin: 0;
}

html, body {
height: 100%;
}

body {
text-align:center;
}

#wrap {
border: #CC thin solid;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 0px auto;
width: 100%;
min-width: 790px;
text-align: left;
}

#container {
margin: 0 auto 0px auto;
width: 790px;
min-height: 100%;
height: auto !important;
height: 100%;
border: #009900 thin solid;
text-align: left;
padding: 0px 0px 0px 0px;
}

#content {
border: #00 thin solid;
}

#areas{
border: #FF thin solid;
position: relative;
}

#areas_t1{
width: 165px;
height: 143px;
padding: 16px 0px 0px 19px;
font-size: 0.88em;
}

#areas_t2{
width: 165px;
height: 143px;
padding: 16px 0px 0px 19px;
font-size: 0.88em;
}

#areas_t3{
width: 165px;
height: 143px;
padding: 16px 0px 0px 19px;
font-size: 0.88em;
}

#areas_t4{
width: 165px;
height: 143px;
padding: 16px 0px 0px 19px;
font-size: 0.88em;
}



body
div id=wrap
div id=container
div id=content
h1
Bla Bla Bla
/h1
p
Texto
/p
div id=areas
div id=areas_t1
p
Area1
/p
/div
div id=areas_t2
p
Area2
/p
/div
div id=areas_t3
p
Area3
/p
/div
div id=areas_t4
p
Area4
/p
/div
/div
/div
/div
   /div
/body
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Duda-Problema con float

2009-09-19 Por tema Reactivo Química Visual
Perdón, no está bien explicada la primera opción sobre los floats, la de
poner un elemento con *clear:both*.
Este elemento debe de estar *justo después de los floats pero aún dentro del
contenedor* para ser efectivo, no como te he dicho antes. Así:


Espero no haberte liado más... :)


El 19 de septiembre de 2009 16:27, Reactivo Química Visual 
conta...@reactivo.es escribió:

 Hola Jose Manuel,
 Para que el contenedor de los float se adapte al tamaño de los mismos,
 tienes varias opciones:

- la clásica, que es añadir un elemento con *clear:both* justo después
de dicho contenedor (por ejemplo, un div vacío o un *br
style=clear:both /*, o tal vez añadirle esa declaración al elemento
que ya tengas y que venga a continuación).
- una más actual que evita la inclusión de elementos innecesarios en el
HTML, que es añadir la propiedad overflow al contenedor de los floats (ej.
*overflow:auto*). Esta es mejor pero a veces crea problemas con barras
de scroll no deseadas.

 Prueba a ver cuál se adapta a lo que quieres hacer.

 Respecto a lo de hacer que un div ocupe el 100% de alto, es un tema
 bastante tratado en internet sobre todo por el hecho de conseguir un pie que
 se quede siempre pegado al borde inferior de la página independientemente
 del contenido. Ahora mismo no creo que pudiera darte una respuesta adecuada
 sobre cómo hacerlo, seguro que alguien en esta lista puede explicártelo
 mejor que yo.

 Un saludo,
 Diego.

 El 19 de septiembre de 2009 15:27, Jose Manuel Segovia 
 josego...@gmail.com escribió:

 Hola a todos,

 Estoy atascado con unos probleimillas con unos float (no puedo vivir si
 ellos pero con ellos tampoco).

 Os cuento lo que me ocurre, quiero poner 4 divs (#areas_t1, #areas_t2,
 #areas_t3, #areas_t4) alineados horizontalmente, y estos cuatro divs
 tienen
 que estar dentro de otro div contenedor (#areas). La cuestión es que si no
 les pongo float a los 4 divs de areas se quedan alineados verticalemnte,
 así que los floto; Pero al flotarlos se salen de su contenedor #areas.

 Mi primera pregunta es ¿Cómo hago para que esos 4 divs se queden dentro
 del
 su contenedor #areas alinea horizontalmente uno al lado del otro?

 Mi siguiente pregunta va un paso más, el #areas está a su vez dentro de
 otro
 que se llama #content y me encantaría que este creciera verticalmente al
 100%, es decir que ocupara el tamño completo en vertical de la pantalla.
 Yo
 creía que con ponerle la altura al 100% ya salí pero no me hace caso ¿qué
 hago mal?.

 Os dejo aquí debajo tanto el CSS que estoy usando como el HTML. Y muchas
 gracias por vuestra ayuda.

 Saludos,

 Jose

 -
 * {
margin: 0;
 }

 html, body {
height: 100%;
 }

 body {
text-align:center;
 }

 #wrap {
border: #CC thin solid;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 0px auto;
width: 100%;
min-width: 790px;
text-align: left;
 }

 #container {
margin: 0 auto 0px auto;
width: 790px;
min-height: 100%;
height: auto !important;
height: 100%;
border: #009900 thin solid;
text-align: left;
padding: 0px 0px 0px 0px;
 }

 #content {
border: #00 thin solid;
 }

 #areas{
border: #FF thin solid;
position: relative;
 }

#areas_t1{
width: 165px;
height: 143px;
padding: 16px 0px 0px 19px;
font-size: 0.88em;
}

#areas_t2{
width: 165px;
height: 143px;
padding: 16px 0px 0px 19px;
font-size: 0.88em;
}

#areas_t3{
width: 165px;
height: 143px;
padding: 16px 0px 0px 19px;
font-size: 0.88em;
}

#areas_t4{
width: 165px;
height: 143px;
padding: 16px 0px 0px 19px;
font-size: 0.88em;
}

 

body
div id=wrap
div id=container
div id=content
h1
Bla Bla Bla
/h1
p
Texto
/p
div id=areas
div id=areas_t1
p
Area1
/p
/div
div id=areas_t2
p
Area2
/p
/div
div id=areas_t3
p
Area3
/p
/div
div id=areas_t4
p
Area4
/p
/div
/div
/div

Re: [Ovillo] Duda-Problema con float

2009-09-19 Por tema Jose Manuel Segovia
Muchas gracias por tu respuesta voy a ver que tal.
Con respecto a lo que me comentas del 100% del alto, para el tema de dejar
el footer al final de la página estoy usando una de las opciones que he
encontrado por internet, la del  Push no me gusta mucho porque hay que
meter elementos en el HTML, pero es al que mejor se adapta. Pero mi problema
con el 100% del alto no es el footer sino que un div que se encuentra dentro
de otro que si ocupa el 100% se adapta a este.

Muchas gracias y un saludo,

Jose

El 19 de septiembre de 2009 16:27, Reactivo Química Visual 
conta...@reactivo.es escribió:

 Hola Jose Manuel,
 Para que el contenedor de los float se adapte al tamaño de los mismos,
 tienes varias opciones:

   - la clásica, que es añadir un elemento con *clear:both* justo después de
   dicho contenedor (por ejemplo, un div vacío o un *br style=clear:both
   /*, o tal vez añadirle esa declaración al elemento que ya tengas y que
   venga a continuación).
   - una más actual que evita la inclusión de elementos innecesarios en el
   HTML, que es añadir la propiedad overflow al contenedor de los floats
 (ej.
   *overflow:auto*). Esta es mejor pero a veces crea problemas con barras de
   scroll no deseadas.

 Prueba a ver cuál se adapta a lo que quieres hacer.

 Respecto a lo de hacer que un div ocupe el 100% de alto, es un tema
 bastante
 tratado en internet sobre todo por el hecho de conseguir un pie que se
 quede
 siempre pegado al borde inferior de la página independientemente del
 contenido. Ahora mismo no creo que pudiera darte una respuesta adecuada
 sobre cómo hacerlo, seguro que alguien en esta lista puede explicártelo
 mejor que yo.

 Un saludo,
 Diego.

 El 19 de septiembre de 2009 15:27, Jose Manuel Segovia
 josego...@gmail.comescribió:

  Hola a todos,
 
  Estoy atascado con unos probleimillas con unos float (no puedo vivir si
  ellos pero con ellos tampoco).
 
  Os cuento lo que me ocurre, quiero poner 4 divs (#areas_t1, #areas_t2,
  #areas_t3, #areas_t4) alineados horizontalmente, y estos cuatro divs
 tienen
  que estar dentro de otro div contenedor (#areas). La cuestión es que si
 no
  les pongo float a los 4 divs de areas se quedan alineados
 verticalemnte,
  así que los floto; Pero al flotarlos se salen de su contenedor #areas.
 
  Mi primera pregunta es ¿Cómo hago para que esos 4 divs se queden dentro
 del
  su contenedor #areas alinea horizontalmente uno al lado del otro?
 
  Mi siguiente pregunta va un paso más, el #areas está a su vez dentro de
  otro
  que se llama #content y me encantaría que este creciera verticalmente al
  100%, es decir que ocupara el tamño completo en vertical de la pantalla.
 Yo
  creía que con ponerle la altura al 100% ya salí pero no me hace caso ¿qué
  hago mal?.
 
  Os dejo aquí debajo tanto el CSS que estoy usando como el HTML. Y muchas
  gracias por vuestra ayuda.
 
  Saludos,
 
  Jose
 
  -
  * {
 margin: 0;
  }
 
  html, body {
 height: 100%;
  }
 
  body {
 text-align:center;
  }
 
  #wrap {
 border: #CC thin solid;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto 0px auto;
 width: 100%;
 min-width: 790px;
 text-align: left;
  }
 
  #container {
 margin: 0 auto 0px auto;
 width: 790px;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 border: #009900 thin solid;
 text-align: left;
 padding: 0px 0px 0px 0px;
  }
 
  #content {
 border: #00 thin solid;
  }
 
  #areas{
 border: #FF thin solid;
 position: relative;
  }
 
 #areas_t1{
 width: 165px;
 height: 143px;
 padding: 16px 0px 0px 19px;
 font-size: 0.88em;
 }
 
 #areas_t2{
 width: 165px;
 height: 143px;
 padding: 16px 0px 0px 19px;
 font-size: 0.88em;
 }
 
 #areas_t3{
 width: 165px;
 height: 143px;
 padding: 16px 0px 0px 19px;
 font-size: 0.88em;
 }
 
 #areas_t4{
 width: 165px;
 height: 143px;
 padding: 16px 0px 0px 19px;
 font-size: 0.88em;
 }
 
  
 
 body
 div id=wrap
 div id=container
 div id=content
 h1
 Bla Bla Bla
 /h1
 p
 Texto
 /p
 div id=areas
 div id=areas_t1
 p
 Area1
 /p
 /div
 div id=areas_t2
 p
 Area2
 /p
 /div
 div id=areas_t3

Re: [Ovillo] Duda-Problema con float

2009-09-19 Por tema Tae Sandoval Murgan
Prueba agrgandole min-height:100%; a #content, #container y #wrap; y
height:100%; a body y html.

-- 
http://procrastinando.netne.net
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Duda-Problema con float

2009-09-19 Por tema I'm Jepser
Para no hacerte tantas bolas por que no pruebas con un grid system de CSS,
yo utilizo 960 gs actualmente, apenas pesa 5kb y puedes crear muchas
combinaciones de columnas dentro de un div de 960px puedes descargar la
regilla www.960.gs y ver este tutorial http://bit.ly/qO3zW eso te podrá
salvar de algunos dolores de cabeza :)
Éxitos y espero que te ayude,

El 19 de septiembre de 2009 08:44, Tae Sandoval Murgan
taeci...@gmail.comescribió:

 Prueba agrgandole min-height:100%; a #content, #container y #wrap; y
 height:100%; a body y html.

 --
 http://procrastinando.netne.net
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo




-- 
Jepser Bernardino
www.npixels.net
twitter jepser
tel. 52730528
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Duda-Problema con float

2009-09-19 Por tema Francisco González
Hola te doy la solucion, para q esten en horiz  y mantegas el alto dentro
del contenedor

*Quita los float q tengas* en los areas individuales.
luego:


#areas{
   border: #FF thin solid;
   position: relative;
}
div.areas_enlinea{
   display:inline;
}



div id=areas
   div id=areas_t1 class=areas_enlinea
   p
   Area1
   /p
   /div
   div id=areas_t2 class=areas_enlinea
...

saludos

El 19 de septiembre de 2009 18:07, I'm Jepser 
m...@jepserbernardino.comescribió:

 Para no hacerte tantas bolas por que no pruebas con un grid system de CSS,
 yo utilizo 960 gs actualmente, apenas pesa 5kb y puedes crear muchas
 combinaciones de columnas dentro de un div de 960px puedes descargar la
 regilla www.960.gs y ver este tutorial http://bit.ly/qO3zW eso te podrá
 salvar de algunos dolores de cabeza :)
 Éxitos y espero que te ayude,

 El 19 de septiembre de 2009 08:44, Tae Sandoval Murgan
 taeci...@gmail.comescribió:

  Prueba agrgandole min-height:100%; a #content, #container y #wrap; y
  height:100%; a body y html.
 
  --
  http://procrastinando.netne.net
  ___
  Lista de distribución Ovillo
  Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
  Puedes modificar tus datos o desuscribirte en la siguiente dirección:
  http://lists.ovillo.org/mailman/listinfo/ovillo
 



 --
 Jepser Bernardino
 www.npixels.net
 twitter jepser
 tel. 52730528
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Duda-Problema con float

2009-09-19 Por tema I'm Jepser
eso es para un bug para IE... Podría funcionar, pero no entiendo por que un
id con las mismas proporciones de ancho... no crees que sería mejor un
código así:
* {
   margin: 0;
}

html, body {
   height: 100%;
}


#wrap {

}

#container {
   margin: 0 auto;
   width: 790px;
   border: #009900 2px solid; /*colocando esto tienes un div #container con
ancho total de 794px*/
   text-align: left;
   padding: 0;
}

/* eliminé el div contenedor por que no hace nada mas que un 1px de borde
que coloqué en container*/

#areas{
   border: #FF thin solid; /*con el borde ahora tienes 698px de ancho
disponibles*/
   position: relative;
}
.div area{

width: 165px;

   height: 143px;
   padding: 16px 0 0 19px;
   font-size: 0.88em;

float:left;
display:inline; /*esto es para IE*/

}
.clear{
clear:both;
width:100%;
}




   body
   div id=container
   h1
   Bla Bla Bla
   /h1
   p
   Texto
   /p
   div id=areas
   div class=div-area
   p
   Area1
   /p
   /div
   div class=div-area
   p
   Area2
   /p
   /div
   div class=div-area
   p
   Area3
   /p
   /div
   div class=div-area
   p
   Area4
   /p
   /div

div class=clear/div

   /div
   /div
   /body
El 19 de septiembre de 2009 10:56, Francisco González
armij...@gmail.comescribió:

 Hola te doy la solucion, para q esten en horiz  y mantegas el alto dentro
 del contenedor

 *Quita los float q tengas* en los areas individuales.
 luego:


 #areas{
   border: #FF thin solid;
   position: relative;
 }
 div.areas_enlinea{
   display:inline;
 }



 div id=areas
   div id=areas_t1 class=areas_enlinea
   p
   Area1
   /p
   /div
   div id=areas_t2 class=areas_enlinea
 ...

 saludos

 El 19 de septiembre de 2009 18:07, I'm Jepser m...@jepserbernardino.com
 escribió:

  Para no hacerte tantas bolas por que no pruebas con un grid system de
 CSS,
  yo utilizo 960 gs actualmente, apenas pesa 5kb y puedes crear muchas
  combinaciones de columnas dentro de un div de 960px puedes descargar la
  regilla www.960.gs y ver este tutorial http://bit.ly/qO3zW eso te podrá
  salvar de algunos dolores de cabeza :)
  Éxitos y espero que te ayude,
 
  El 19 de septiembre de 2009 08:44, Tae Sandoval Murgan
  taeci...@gmail.comescribió:
 
   Prueba agrgandole min-height:100%; a #content, #container y #wrap; y
   height:100%; a body y html.
  
   --
   http://procrastinando.netne.net
   ___
   Lista de distribución Ovillo
   Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
   Puedes modificar tus datos o desuscribirte en la siguiente dirección:
   http://lists.ovillo.org/mailman/listinfo/ovillo
  
 
 
 
  --
  Jepser Bernardino
  www.npixels.net
  twitter jepser
  tel. 52730528
  ___
  Lista de distribución Ovillo
  Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
  Puedes modificar tus datos o desuscribirte en la siguiente dirección:
  http://lists.ovillo.org/mailman/listinfo/ovillo
 
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo




-- 
Jepser Bernardino
www.npixels.net
twitter jepser
tel. 52730528
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo