Problemon con CSS

mbavio · #1 (**permalink**) 24/08/2005, 10:30

Hola quisiera que alguien me ayude con un problema que me esta volviendo loko hace 2 dias. Estoy haciendo una maquetacion puramente en css, con un header, 3 columnas y un footer. Las 2 columnas de los costados vendrian a ser las barras de navegacion. Para hacer esto utilize la propiedad float porque me resulta mas simple. El problema esta en que cuando le agrego mas informacion a la columna central, o sea la principal, las otras dos columnas no se extieden correctamente hasta el footer, quedandose en su tamaño original. Con lo que el layout queda espantoso. Yo lei una vez como solucionar este problema, pero no recuerdo como hacerlo. Si alguien me pudiese ayudar, le diria que sin lugar a dudas se gano el cielo. Muchas gracias.

jesusbet · #2 (**permalink**) 25/08/2005, 15:07

dentro de cada una de las dos columnas laterales agrega:

<div style="clear:both; width: 100%; height: 1px;"></div>

por cierto, si puedes, muestra como quieres que te quede, porque no sé si te refieres a la altura de las columnas laterales (que es lo que creo) o a que las columnas laterales no crecen conforme a su contenido...

saludetes

SiR.CARAJ0DIDA · #3 (**permalink**) 25/08/2005, 16:28

viendo esto a mi tambien se me ocurrio extender las 2 columnas de mi web: http://www.torneosnydus.com/

y no entiendo esto: <div style="clear:both; width: 100%; height: 1px;"></div>

que se supone que hace el height:1px ?? y para que el clear:both si las columnas laterales estan flotando??
probe poniendo height:100% y no pasa nada :s

jesusbet · #4 (**permalink**) 25/08/2005, 17:10

height: 1px significa altura de 1 pixel :s

la propiedad clear con el valor both indica que no debe haber nada a los lados del elemento, sin importar si está flotado o no... pero ahora que lo mencionas, a las columnas que dices que están flotadas dales un altura de 100%: height: 100%; y posición relativa

saludos

jesusbet · #5 (**permalink**) 25/08/2005, 17:12

por cierto Sir. Carajodida, tu web va bien en Firefox, en IE va muy lenta la carga...

saludos

RoQ · #6 (**permalink**) 25/08/2005, 17:38

se puede dar posicion relativa a un elemento flotante? la verdad que no sabia eso, habra que probar

jesusbet · #7 (**permalink**) 25/08/2005, 17:42

en informática se puede todo

que te obedezca, es otra cosa, jeje...

saludetes

SiR.CARAJ0DIDA · #8 (**permalink**) 25/08/2005, 18:10

Cita:

Iniciado por jesusbet

por cierto Sir. Carajodida, tu web va bien en Firefox, en IE va muy lenta la carga...

saludos

a que te refieres con eso? hay algo que se pueda hacer?

no va eso de posicion relativa, aca hice un pequeño ejemplo para probar, como harian para que las 2 columnas vayan hasta el foot?

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <style type="text/css">

        #main    {

                    width:800px;

                    border:1px solid #000000;

                    padding:0px;

                    margin:0px auto;

        }

        #izq    {

                    width:150px; /* 156 */

                    height:100%;

                    border:1px solid #000000;

                    padding:0px;

                    margin:4px 0px 0px 4px;

                    * margin:4px 0px 4px 2px; /* hack ie */

                    float:left;

                    position:relative;

        }

        #der    {

                    width:150px; /* 156 */

                    border:1px solid #000000;

                    padding:0px;

                    margin:4px 4px 0px 0px;

                    * margin:4px 2px 4px 0px; /* hack ie */

                    float:right;

                    position:relative;

        }

        #centro    {

                    border:1px solid #000000;

                    padding:0px;

                    margin:4px 160px 0px 160px;

        }

        #foot    {

                    border:1px solid #000000;

                    padding:0px;

                    margin:4px 4px 4px 4px;

                    clear:both;

                    text-align:center;

        }

    </style>

</head>

 
<body>

<div id="main">

    <div id="izq"><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p></div>

    <div id="der"><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p></div>

    <div id="centro"><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p><p>Testing</p></div>

    <div id="foot"><p>Testing</p><p>Testing</p></div>

</div>

</body>

</html>

jesusbet · #9 (**permalink**) 25/08/2005, 18:15

antes de cerrar el div izquireda y derecha usa esto:
<div style="clear:both; width: 100%; height: 1px;"></div>

debe funcionar

SiR.CARAJ0DIDA · #10 (**permalink**) 25/08/2005, 18:30

?? como voy a poner width:100%, no tiene sentido eso, quiero que mida 150px -_-

ya probe eso y no pasa nada.

jesusbet · #11 (**permalink**) 25/08/2005, 22:47

ok ok... 100%, 150px, no importa, el punto es la lógica... dejame ver...

....

....

tienes razón, no funca... por pura curiosidá... para que quieres las columnas a la misma medida?

SiR.CARAJ0DIDA · #12 (**permalink**) 26/08/2005, 08:31

no te parece que queda mejor?

jesusbet · #13 (**permalink**) 26/08/2005, 21:47

cuestión de gustos.. creo

carnivore · #14 (**permalink**) 29/08/2005, 08:12

Llevo ya mucho tiempo leyendo por aqui y al final me decidi a postear, porque mi caso es similar a esto y ya empiezo a perder el juicio. A ver, yo hago algo tan simple como poner un div en el que meto dentro una imagen con align left para que el texto me salga a la derecha. Pues la puñetera imagen se me sale del div por abajo. En firefox lo solucione ya hace mucho metiendo un overflow:auto, pero eso provoca efectos tan inesperados en el explorer que no es viable.
Por lo que veo la solucion debe andar en el clear:both, pero es que yo no se donde diablos poner el clear:both para que me haga algo tan simple como lo que yo quiero.
Metí esta linea que comentais aqui
<div style="clear:both; width: 100%; height: 1px;"></div>
y resulta que POR FIN, explorer se puso del tamaño que yo queria. Pero SORPRESA, el texto dentro del div se ha vuelto invisible. Cuando pasas por encima el cursor se ve, pero cuando haces click en la imagen desaparece. No me creo que sea tan dificil.

mbavio · #15 (**permalink**) 30/08/2005, 11:46

Bueno, yo mismo hice la pregunta y yo mismo me contesto: la forma para extender las columnas hasta el footer es utilizando el metodo de las columnas falsas, que se explica en:

http://www.alistapart.com/articles/fauxcolumns/

http://platea.cnice.mecd.es/~jmas/ma...scolumnas.html

El segundo link es la traduccion. Espero que les sirva. Chau.

carnivore · #16 (**permalink**) 31/08/2005, 04:20

Yo tambien me respondere a mi mismo. Lo que pasaba qeu desaparecia el texto es debido a un bug que se llamaba peekaboo o alguna mierda guiri parecida. Habia varios metodos para solucionarlo, pero a mi me bastó con asignar especificametne un width a la capa contenedora, y seguir utilizando el clear:both. Saludos

jsmith · #17 (**permalink**) 24/09/2005, 20:55

Hola,

Tenia el mismo problema con las columnas div y la maquetacion con CSS. Buscando en internet encontre un Site de recursos para Webmasters y ofrecen un script que te iguala el tamaño de dos o mas columnas con solo pasarle como parametro el ID del DIV de las columnas que contiene la plantilla

Esta en ingles, pero la aplicación es sencilla. Este es el link :

http://www.projectseven.com/tutorial...umns/index.htm

y de aqui pueden descargar el javascript con algunos ejemplos :

http://www.projectseven.com/tutorial...alcolumnsl.zip

Bueno suerte y espero que les ayude