Re: [Ovillo] Duda-Problema con float
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
Re: [Ovillo] Duda-Problema con float
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
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
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
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
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
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
