Comunidad de diseño web y desarrollo en internet online

Las tablas versus CSS

Citar            
MensajeEscrito el 04 Dic 2004 04:28 am
Holas
He estado los últimos dias estudiando mucho sobre CSS, y bue... mucha gente habla en internet de eliminar el uso de tablas para hacer el layout de la pagina, pero esto aun no me convence, no se si es que no he entendido bien como funciona o que.
He visto que todos tienen que recurrir a trucos externos para lograr que las paginas sin tablas se vean bien en todos los navegadores, por ejemplo:
Si quiero centrar el contenido de la pagina en un espacio de 780px, si no uso una tabla centrada, tengo que recurrir a un monton de calculos matematicos por medio de javascript para lograr que una capa sepa que tiene que ir en el medio de la ventana de cualquier navegador?
Bien, supongamos que logre centrar mi capa, como hago para dividirla en tres columnas, y que se vean siempre alineadas correctamente? mas calculos??
no me parece una solución, es como una especie de escape forzado mas bien.
Por qué en CSS no hay un "position: center;"?


creo que me estoy haciendo un 8, pero en realidad no he visto aun una solución realmente confiable, fácil y que demuestre una verdadera ventaja de diseñar una pagina sin tablas.

:crap:

Alguna sugerencia??? :D

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 04 Dic 2004 05:43 am
Si lo hay; pero la verdad, si no sabes mucho de CSS, mejor hazlos con el asistente de CSS de Dreamweaver, ese si sabe mucho

La cosa es sencilla, las tablas son para datos tabulados y los DIVs para organización de layout; los SPAN para formateado de texto, las H* para los titulos (siempre) y las font ... para el infierno

Eso es XHTML+CCS o web semantica ... en muy MUY resumidas cuentas

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 04 Dic 2004 04:16 pm
a ver, primero deberías checar este link
http://glish.com/css/

para centrar un div, es bastante sencillo:

#centrado{
width: 400px;
margin: 0px auto; /* aquí está el truco */
background: #ccc;
color: #900;
}

<div id="centrado">div centrado</div>

la verdad es que como todo en la vida, la práctica hace las cosas mucho más fáciles, los tips que te puedo dar de css es que: no uses position; no sirve de nada y aprende a usar floats, pues sirven de manera espectacular para hacer que en firefox e ie se vea igual el contenido

mi página así la hice, sí hay que implementar un par de hacks pero al final de cuentas no es tanto (los hacks son los que tienen !important)

suerte, saludos

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 05 Dic 2004 02:52 am
Gracias Fredd,

Fael, el link esta muy bueno, de hecho ya empece a hacer unas pruebas con los tutos de ahi y me ha ido bien (por el momento)

Una pregunta:
si anido divs, sin darle posicionamiento, ni alineacion ni nada con css, se me van pegando una detras de otra? :? (ni yo me entendi)

Vean esto
icad

Los cuadritos que estan a la derecha, son tablas, con fondos de imagen, la tabla esta centrada en un espacio de 150px de lado derecho de la tabla central de contenido.
Quisiera cambiar eso (toda la pagina) por divs pero no supe como hacerlo, queria eliminar las imagenes que sirven de titulo en esos cuadritos y dejar solo un fondo de de imagen para escribir el titulo dinamicamente encima, pero nunca logre cuadrarlo, siempre me quedaban espacios entre los divs, o no obedecian el tamaño etc,
pero aun quiero hacerlo.
Estoy estudiando CSS para lograr que esa pagina la pueda armar igualita pero sin tablas, y luego de ahi en adelante hacerlo todo asi. (el futuro se acerca)

Gracias por su ayuda y espero que sigan.....

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 05 Dic 2004 07:31 am

ramm escribió:

Estoy estudiando CSS para lograr que esa pagina la pueda armar igualita pero sin tablas

Tarde mas o menos 4 meses antes de que el home de Cristalab pudiera no tener tablas (Y aun usa algo similar para un hack de los titulos, pero no como eso xD )

Aunque la verdad, la tardanza fue esperar a tener muchas ganas de experimentar mas que conocimiento u otra cosa, porque esto es eso, experimentación

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 13 Dic 2004 06:12 pm
La mejor referencia:
aquí.

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 13 Dic 2004 06:36 pm
Algo gratis....? Pues hay tesoros en un par de links que buho compartió hace unos meses :lol::lol::lol:

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 14 Dic 2004 02:22 am

Por TuX.NET

16 de clabLevel



Genero:Masculino  

Bogotá, Colombia

firefox
Citar            
MensajeEscrito el 14 Dic 2004 03:33 am
Mucho mejor es el propio editor que trae Dreamweaver MX 2004

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 14 Dic 2004 03:41 am
Cierto le voy mas a Dreamweaver ... , solo una cosa lo ke me molesta es ke se descuadra en FF y en IE :S

Por Mazk

8 de clabLevel



 

msie
Citar            
MensajeEscrito el 14 Dic 2004 03:57 am
no pus kien sabe deja luego cuando tenga el codigo lo posteo :D

Por Mazk

8 de clabLevel



 

msie
Citar            
MensajeEscrito el 14 Dic 2004 04:07 am
no, no se trata de nada de estándar. se trata de cómo lo interpretan los navegadores, ahí está el reto de css; hacer una sola hoja de estilo que sea compatible [mínimo] con ambos navegadores

esto es, saber más o menos cómo funcionan los objetos y saber utilizar -más que nada- el float

oye mazk.. como que el wallpaper de tu firma está muy grande, no crees?

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 14 Dic 2004 02:19 pm

freddie® escribió:

Mucho mejor es el propio editor que trae Dreamweaver MX 2004

En mi opinión, y no solo mía, TopStyle le da varias vueltas a DreamWeaver en css, puede que no en edición de html y demás, pero en css...

Por TheOm3ga

267 de clabLevel

1 tutorial

1 ejemplo

 

To your south!!!

firefox
Citar            
MensajeEscrito el 14 Dic 2004 02:40 pm
no sé, pero css es un 'lenguaje'? que no importa qué editor se use; sino el conocimiento del usuario acerca de hojas de estilo

a diferencia del html, que con cualquier editor wysiwyg, cualquier usuario puede hacer una página web; mal diseñada y todo pero la puede hacer, no así con css, pues requiere saber algunos conceptos básicos y obtener un poco de experiencia con lo referente a navegadores.

así que no se fijen mucho en la herramienta; fíjense en cómo agarrarla.

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 14 Dic 2004 02:51 pm

Por _david

565 de clabLevel


1 articulo

Genero:Masculino  

Bogota, Colombia

msie
Citar            
MensajeEscrito el 14 Dic 2004 02:59 pm
Pero vamos, solamente nVu y Dreamweaver me dan soporte pleno de CSS en WYSWYG; eso es muuuuy bueno

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 14 Dic 2004 04:06 pm

fael escribió:

...no importa qué editor se use; sino el conocimiento del usuario acerca de hojas de estilo...

De acuerdo!

freddie® escribió:

...solamente nVu y Dreamweaver me dan soporte pleno de CSS en WYSWYG; eso es muuuuy bueno

De acuerdo!

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 14 Dic 2004 06:31 pm

freddie® escribió:

Pero vamos, solamente nVu y Dreamweaver me dan soporte pleno de CSS en WYSWYG; eso es muuuuy bueno


el problema del wysiwyg es qué motor lo interpreta. es decir, en qué navegador se va a ver así.

yo en dreamweaver llevo algunos años usando sólo el panel de código, para probar tengo abierto ie y ff y cada cambio abro la ventana correspondiente y un f5 para recargar la página.

vamos, que lo que ayudan esos editores es un poco de sintaxis (y dreamweaver tiene algunos muy malos, como el font)

pero en fin, no hay nada como el código

p.d. y no es discusión.

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 14 Dic 2004 06:46 pm
Pero si no hay nada como la discusión

No dudo de lo que dices fael, pero si no existiera WYSIWYG muy pocos diseñadores se habrian aventurado a la web; es como dice Jeffrey Veen en su "Arte y Ciencia del diseño web", en antaño tenian que usar una media de 12 programas distintos para hacer un diseño decente en HTML, ahora mismo todo podemos hacerlo bien en Flash o bien en una combinación de Dreamweaver+Fireworks

Si no es porque Dreamweaver no incluye de facto un excelente sistema WYSIWYG para CSS, este no se habria extendido tanto en los diseñadores como ahora, asi como su asistente de CSS; nVu hara en su momento una revolución similar, ya que como motor de render utiliza Gecko, que es el mismo que usan Mozilla y Firefox, ademas es libre, solo le faltan cosillas a mejorar

Muchos aqui preferimos el codigo a muerte, pero tambien es cierto que muchas obras de arte de la web son hechas por diseñadores graficos que "usan" las herramientas y lo que ellas les ofrecen :)

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

firefox
Citar            
MensajeEscrito el 15 Dic 2004 05:45 pm
Yo en el caso de CSS tambien prefiero escribirlo a mano, para el html si uso la vista de diseño. :D
no he probado aun ningun editor WYSIWYG para CSS pero lo hare si lo necesito.
Me he fijado que algunos diseñadores no usan CSS porque no les funciona igual en los diferentes navegadores, en mi caso es al reves, lo empece a usar para lograr que se vean iguales, y, a duras penas lo he logrado (a duras penas porque como diseñador gráfico aun me cuesta pensar en codigo):crap:

PD: esa pagina csszengarden es buenisima, me gusto mucho lo que hicieron ahi .

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 02 Ene 2005 03:24 am
Hey ramm. Sabes lo que te ocurre?
estas buscando algo que nadie te ha especificado. Lo que tu buscas es CSS-P.
Una ves que hayas leido y entendido todos esos links que leeras, entenderas que el CSS es un lenguaje, Muy Complicado, pero demasiado efectivo, y bueno.
Tan bueno, que no necesitaras hacer 30 paginas distintas para 30 Disenios distintos de la misma web. Solo haras 1 CSS, y 30 paginas de ahi solo una pequenio codigo en PHP.
Y luego?? La felicidad. Suerte con eso, recuerda que el camino al poder, luz y sabiduria no es nada facil. :bofh:

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 03 Ene 2005 11:46 pm
:D

Gracias the_NEO_JP, muy interesantes los links, la verdad ya habia buscado en macromedia algo de eso pero no lo encontre, me gustan las lecciones de macromedia.
Ya estoy haciendo mis pruebas. Veremos como me va.

:love: CSS.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 04 Ene 2005 03:35 pm

ramm escribió:

:love: CSS.

Es increíble cuántas cosas buenas se pueden hacer con CSS, pero el &%$@# de IE no lo soporta en ninguna de sus versiones. Cuando leía el libro de Eric Meyer en su segunda Edición (donde cubre hasta CSS 2.1), me sentía frustrado por tantas cosas buenas que uno podría lograr con sitios web, pero como hay que desarrollar para que los sitios se vean bien en LA MAYORÍA de navegadores... no se pueden usar porque el &%$@# de IE no lo soporta :twisted: :twisted: :twisted:

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 04 Ene 2005 09:21 pm
exacto, IE sucks.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 05 Ene 2005 06:22 pm
hey ramm dale una mirada a esta web que estoy haciendo.

http://www.aquitperu.com/elas/index.php
http://www.aquitperu.com/elas/elas.php
http://www.aquitperu.com/elas/sin.php

comparen y vean el poder del CSS, la web es crossbrowser.

PD: el Web Developer Toolbar de Firefox es MUY util para examinar webs.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 06 Mar 2005 01:55 am
Ya estoy en la ruta :D

Gracias the_NEO_jp, tus links me han ayudado mucho, de hecho estoy trabajando ahorita en una web siguiendo estos principios, pueden ver aqui.

Ahora como veran ahi, el archivo no tiene tablas, y hasta ahora, tampoco errores :lol:

Mi pregunta ahora es, como puedo hacer que las dos columnas tengan siempre la misma altura, independientemente de el contenido que tengan. Se puede ver que la columna azul es mas pequeña que la blanca, pero se ve muy mal ahi abajo.

Otra pregunta, se puede hacer el fondo de un <div> semi transparente? (que no sea con "filter") cross-browser y tal...
Es que quiero ponerle una imagen se fondo que se vea al fondo del area central y sobresalga a la izquierda.

PD: las imagenes son de prueba.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 06 Mar 2005 05:34 am
transparencias = png
png+ie = problemas

créeme, si quieres hacer algo con transparencias vas a batallar como nunca
para hacer que un elemento tenga una mínima altura utilizas min-height, pero como ie no lo entiende debes aplicar un pequeño hack que no recuerdo cuál es pero si buscas en google seguramente lo hallas

suerte

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 06 Mar 2005 04:36 pm
:crap:
y sigo.....IE :ownz: :zombie:

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

opera
Citar            
MensajeEscrito el 06 Mar 2005 07:56 pm

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

clabbrowser
Citar            
MensajeEscrito el 08 Mar 2005 03:38 pm
Esto me tiene enfermo ya...

No he podido lograr que el div de la derecha quede de la misma altura que el de la izquierda

aqui

Lo peor es que FF deja el espacio con el color de fondo de la pagina y no blanco que es el color de fondo del div contenedor.

Alguna sugerencia? :crap:

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.