Foros del Web » Creando para Internet » CSS »

No cuadra la liquidez!!!

Estas en el tema de No cuadra la liquidez!!! en el foro de CSS en Foros del Web. Hola Amigos estoy teniendo serios problemas con una página que quiero que cuadre al 100% y sin que salgan las barras o scroll. Estoy usando ...
  #1 (permalink)  
Antiguo 29/01/2004, 19:03
 
Fecha de Ingreso: febrero-2002
Ubicación: Lima
Mensajes: 48
Antigüedad: 22 años, 2 meses
Puntos: 0
Exclamación No cuadra la liquidez!!!

Hola Amigos

estoy teniendo serios problemas con una página que quiero que cuadre al 100% y sin que salgan las barras o scroll.
Estoy usando <DIV> e imágenes dentro. El código en cuestión es el siguiente:

Código:
<body leftmargin="0" topmargin="0">

<div cellspacing="0" class="franja" style="height: 33.5%">
	<img src="images/encabezado.jpg" style="height: 100%; width: 100%; cellpadding: 0px; cellspacing: 0px;
margin: 0px; padding: 0px; border: 0px none; border-collapse: collapse;">
</div>
<div class="franja" style="background-color:#FFFFFF; height: 16.5%;">
</div>
<div class="franja" style="background-color:#000000; height: 16.5%;">
</div>
<div cellspacing="0" class="franja" style="height: 33.5%">
	<img src="images/encabezado.jpg"  style="height: 100%; width: 100%;
cellpadding: 0px; cellspacing: 0px; margin: 0px; padding: 0px; border: 0px none; border-collapse: collapse;">
</div>

</body>
Pueden ver como está quedando la página en la siguiente URL: http://www.romacoseguros.com/prueba/index2.php
El problema esta en el alto de la página, pues en cualquier resolución aparece la barra vertical.

Muchas gracias por su ayuda.

Demis

Última edición por demis57; 01/02/2004 a las 23:34
  #2 (permalink)  
Antiguo 30/01/2004, 06:44
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 20 años, 10 meses
Puntos: 1
en mozilla no me aparece ninguna barra :D
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 30/01/2004, 10:19
 
Fecha de Ingreso: febrero-2002
Ubicación: Lima
Mensajes: 48
Antigüedad: 22 años, 2 meses
Puntos: 0
Lo estoy probando con dos resoluciones, 600x800 y 1024x768.
Dos PC's distintas, y a mi si me aparece una barra al lado derecho que me malogra todo.

Gracias

Demis
  #4 (permalink)  
Antiguo 31/01/2004, 11:00
Avatar de ventanazul  
Fecha de Ingreso: noviembre-2002
Ubicación: Lima, Peru
Mensajes: 246
Antigüedad: 21 años, 5 meses
Puntos: 2
Mis comentarios

Hola Demis, antes que nada quiero comentarte que tu CSS aún tiene mucho por pulir.

Según me explicaste aparte estas usando el atributo style inline (es decir dentro de los elementos HTML como DIV) solo para tus pruebas. Lo lógico sería que una vez que todo funcione en orden trabajes con un archivo .CSS que llamas desde tu página.

De todas maneras ayudaría mucho para la claridad, y para determinar problemas, si separas el CSS y el XHTML, los styles inline hacen el codigo dificil de leer y analizar.

Recuerda: HTML (o XHTML para ser más precisos) es para estructura y CSS para apariencia.

Otro detalle:

<body leftmargin="0" topmargin="0">

Rompe completamente las reglas de CSS, lo ideal sería un elemento body en tu archivo CSS, algo como:

body {
margin: 0;
}

Muy sencillo y de acuerdo a los ideales de CSS.

Tu uso de class para los DIV es adecuado pues son características que se repiten en varios elementos (a diferencia de un id que se usa para elementos unicos, ej: <div id="logo">, exite un solo logo en tu pagina).

Utilizar cellspacing="0" dentro de un DIV es un craso error, para empezar cellspacing (como su nombre bien lo indica) se aplica al espaciado entre las celdas de una tabla, no veo ningun <table> en tu codigo, además es un atributo de aperiencia por lo que debería ir junto con el código CSS y no en el HTML.

La imagen encabezado.jpg sería mejor ponerla con la propiedad background para la class "franja" de tus DIV.

Ahora bien, el juego de las alturas y anchos ha sido y es en la mayoría de casos algo confuso de entender, principalmente debido a que para entender eso debes entender primero el CSS Box Model, que involucra margin, padding, width, height y border, y también debido a la interpretación que hacen los navegadores del standard CSS de W3C.

Mozilla/Gecko utiliza la mayoría de recomendaciones W3C mientras que IE implementa MAL el Box Model. Opera implementa el Box Model pero tiene problemas en otras situaciones.

En conclusión, no todos los navegadores implementan de la misma manera CSS en ciertos aspectos, por lo que en algunos casos es necesario usar hacks. No es recomendable el uso de hacks en CSS pues rompe el ideal del uso de estandares web así que en algunos casos es bueno repensar lo que se quiere lograr y como.

Bien, hasta ahora no te he dicho nada sobre tu problema particular, para serte franco no lo he revisado al 100% y como te dije ayer es mejor aprender a pescar que recibir pescado, así que aquí algunas lecturas muy necesarias para empezar:

WestCiv CSS Tutorial
BrainJar CSS Box Model

Y uno de los mejores libros sobre el tema por Eric Meyer, uno de los principales "evangelistas" de CSS: "CSS: The Definitive Guide ".

Finalmente, para problemas puntuales, como el tuyo, te recomiendo buscar en los archivos de CSS-Discuss , una de las mejores listas al respecto donde participan ocasionalmente expertos como Peter Paul Kock, Zeldman e incluso el mismo Meyer. Ojo: Muy recomendable leer los recursos mencionados anteriormente antes de preguntar en dicha lista para evitar ser "flamed" al hacer preguntas muy newbie.

Obviamente toda esta información está en ingles, lamentablemente no he podido, aún, encontrar muy buenos recursos en español. En todo caso, de que sirve saber XHTML, CSS, PHP, etc, si no sabemos ingles?!. :)

Saludos!
__________________
Alexis Bellido

Última edición por ventanazul; 31/01/2004 a las 11:07
  #5 (permalink)  
Antiguo 31/01/2004, 11:05
Avatar de ventanazul  
Fecha de Ingreso: noviembre-2002
Ubicación: Lima, Peru
Mensajes: 246
Antigüedad: 21 años, 5 meses
Puntos: 2
Pssstt, corta el ancho de tu código de ejemplo en este post pues eso está (creo que debido al uso del tag <PRE> por parte de vBulletin) creando un scroll horizontal que dificulta la lectura.

Saludos!
__________________
Alexis Bellido
  #6 (permalink)  
Antiguo 03/02/2004, 02:22
 
Fecha de Ingreso: febrero-2004
Ubicación: Madrid
Mensajes: 59
Antigüedad: 20 años, 2 meses
Puntos: 0
Varias cositas para el que ha escrito el mensaje tan largo:

1- Explorer 5.X implementa mal el box-model. El 6 lo hace bien...

2- Usar hacks para que el CSS funcione en navegadores con mala implementación es totalmente legítimo, ya que queremos que el mayor número posible de visitantes venga a nuestra web ¿verdad? :P

3- Es mejor, en los tiempos que corren, ponerle algún atributo de más a los elementos; aunque, además, se le apliquen los estilos en la hoja de estilos. Hay muchos navegadores (y cada vez va a haber más) que no soportan hojas de estilo y tienen todo el derecho del mundo a ver links con imagen sin borde y la página con el fondo de un color, digo yo... Hablo de PocketPC, teléfono móviles, televisiones, etc...

Hay que ser purista, pero no tanto
  #7 (permalink)  
Antiguo 03/02/2004, 10:22
Avatar de ventanazul  
Fecha de Ingreso: noviembre-2002
Ubicación: Lima, Peru
Mensajes: 246
Antigüedad: 21 años, 5 meses
Puntos: 2
Sobre CSS

Hola:

1. Tienes razón, el problema de Box Model es en IE antes de la versión 6, pero aún hay pequeños detalles que IE 6 no implementa de acuerdo al estandar, detalles como background fixed o algunos detalles de los float, pero sí reconozco que el soporte CSS es mucho mejor que los anteriores IE.

2. El debate de usar o no usar hacks en CSS es muy espinoso, es cierto que nos permiten hacer que ciertos navegadores se comporten como queremos pero que sucede si, por ejemplo, implementamos un hack para Opera 7, y luego sale Opera 8 que ya no necesita el hack pero el hecho de tener el hack para Opera 7 complica la labor de la version 8?.

Terminaremos haciendo paginas como las de antaño con un inmenso bloque de Javascript para detectar las N versiones de navegadores, es ridiculo tener que pensar en esos detalles!.

Lo mejor es diseñar paginas que se ajusten a los estandares, esto además obligará a los desarrolladores de browser a implementar correctamente los estandares en sus productos. CSS 3 trae cosas muy interesantes pero nunca llegaremos a verlas si no ayudamos (diseñando paginas basadas en estandares) a que los desarrolladores de browsers vean la importancia de los estandares.

El ideal es que un documento que usa XHTML y CSS puede mostrarse en cualquier plataforma (navegadores en PC, celulares, PDA, WebTV, etc) y el contenido sea entendible. El ideal NO ES que se vea "bonito", aunque si es muy importante debemos saber que nunca se pretendió que el web sea un medio WYSYWYG.

3. Discrepo tambien en esto, incluso navegadores aureales y braille soportan CSS, el camino al futuro esta orientado hacia estandares: XML, CSS, DOM, incluso un tema tan importante como la accesibilidad. Cada vez vamos a empezar a ver mas navegadores que trabajen con estandares y si no empezamos a utilizarlos hoy será muy dificil adaptarnos.

El salto del diseño de paginas web como lo han venido haciendo la mayoria al diseño estructural y basado en estandares puede ser algo duro para aquellos acostumbrado a "dibujar" sus páginas, pero es sumamente necesario.

Mi objetivo con este post no es crear un debate de que funciona o que no funciona (TODOS nosotros estamos aprendiendo dia a dia eso) sino mas bien el generar conciencia sobre el tema y conocer las opiniones de todos.

Un gran saludo a todos!.
__________________
Alexis Bellido
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




La zona horaria es GMT -6. Ahora son las 09:02.