Foros del Web » Creando para Internet » CSS »

Problemon con CSS

Estas en el tema de Problemon con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/08/2005, 11:30
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Problemon con CSS

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.
  #2 (permalink)  
Antiguo 25/08/2005, 16:07
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #3 (permalink)  
Antiguo 25/08/2005, 17:28
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
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
  #4 (permalink)  
Antiguo 25/08/2005, 18:10
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #5 (permalink)  
Antiguo 25/08/2005, 18:12
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
por cierto Sir. Carajodida, tu web va bien en Firefox, en IE va muy lenta la carga...

saludos
  #6 (permalink)  
Antiguo 25/08/2005, 18:38
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
se puede dar posicion relativa a un elemento flotante? la verdad que no sabia eso, habra que probar
  #7 (permalink)  
Antiguo 25/08/2005, 18:42
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
en informática se puede todo

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

saludetes
  #8 (permalink)  
Antiguo 25/08/2005, 19:10
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
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
  #9 (permalink)  
Antiguo 25/08/2005, 19:15
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
antes de cerrar el div izquireda y derecha usa esto:
<div style="clear:both; width: 100%; height: 1px;"></div>

debe funcionar
  #10 (permalink)  
Antiguo 25/08/2005, 19:30
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
?? como voy a poner width:100%, no tiene sentido eso, quiero que mida 150px -_-

ya probe eso y no pasa nada.
  #11 (permalink)  
Antiguo 25/08/2005, 23:47
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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?
  #12 (permalink)  
Antiguo 26/08/2005, 09:31
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
no te parece que queda mejor?
  #13 (permalink)  
Antiguo 26/08/2005, 22:47
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
cuestión de gustos.. creo
  #14 (permalink)  
Antiguo 29/08/2005, 09:12
 
Fecha de Ingreso: agosto-2005
Mensajes: 4
Antigüedad: 12 años, 3 meses
Puntos: 0
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.
  #15 (permalink)  
Antiguo 30/08/2005, 12:46
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Columnas falsas

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.
  #16 (permalink)  
Antiguo 31/08/2005, 05:20
 
Fecha de Ingreso: agosto-2005
Mensajes: 4
Antigüedad: 12 años, 3 meses
Puntos: 0
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
  #17 (permalink)  
Antiguo 24/09/2005, 21:55
 
Fecha de Ingreso: septiembre-2005
Mensajes: 1
Antigüedad: 12 años, 2 meses
Puntos: 0
Javascript para igualar altura columnas

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
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 10:27.