Fíjate que en el segundo de ellos hay un detalle tonto que hace que no funcione, el nombre de la clase del css es "vetical" mientras que en html es "transform". Cuando la he cambiado en el css a "transform" me ha funcionado.
En el segundo te pasa una cosa parecida... 1º Creo que el position:absolute sí hace falta 2º Te has dejado el ";" para indicar el fin de la sentencia CSS para la clase verticaltext. El código corregido: ********************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style> .contiene{ width: 50%; border: 2px solid #CCC; } .verticaltext { -webkit-transform: rotate(90deg)*;* -moz-transform: rotate(90deg)*;* -o-transform: rotate(90deg)*;* transform: rotate(90deg)*;* *position: absolute;* } .*transform*{ -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); position: absolute; } </style> </head> <body> <div class="verticaltext">Lorem ipsum y demás huevadas</div> <div class="contiene"> <div class="*transform*">Lorem ipsum y demás huevadas</div> </div> </body> </html> ********************************** El 17 de diciembre de 2010 01:58, German Bustos <ger...@atarraya.org>escribió: > Este es mi código, que no funciona > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3.org/TR/html4/loose.dtd";> > > <html> > > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Test</title> > <style> > .contiene{ > width: 50%; > border: 2px solid #CCC; > } > > > .verticaltext { > -webkit-transform: rotate(90deg) > -moz-transform: rotate(90deg) > -o-transform: rotate(90deg) > transform: rotate(90deg) > } > .*vetical*{ > -webkit-transform: rotate(270deg); > -moz-transform: rotate(270deg); > -o-transform: rotate(270deg); > position: absolute; > } > > > </style> > </head> > > <body> > > <div class="verticaltext">Lorem ipsum y demás huevadas</div> > <div class="contiene"> > <div class="transform">Lorem ipsum y demás huevadas</div> > </div> > > </body> > > </html> > > > +++++++++++++++++++++++++++++++++++++++++++ > Y este el que bajé de CSS3Maker > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>www.css3maker.com</title> > <style type="text/css"> > body{ font-size:18px; color:#FFF; } > a { color:#FFF} > .classname { border:solid 1px #2d2d2d; text-align:center; > background:#575757; padding:100px 50px 100px 50px; -moz-border-radius: > 5px; -webkit-border-radius: 5px; border-radius: 5px;} > > /* =Your Generated css > > |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/ > .classname a{position:absolute; left:40%; -webkit-transform: > rotate(270deg);-moz-transform: rotate(270deg);-o-transform: > rotate(270deg);writing-mode: bt-lr;} > /* End of Your Generated css > > |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/ > </style> > </head> > > <body> > <div class="classname"><a href="http://www.css3maker.com";> > www.css3maker.com > </a></div> > </body> > </html> > > > El 16 de diciembre de 2010 19:36, Leandro Asrilevich <bea...@gmail.com > >escribió: > > > fijate que el ejemplo que te pase y lo que tenes en el link que diste de > > ejemplo vos es lo mismo.. > > > > pega aca el codigo que estas usando asi veo por que puede no estarte > > andando. > > > > _____________________________________ > > > > Leandro Asrilevich | www.beastxblog.com > > FrontEnd Developer > > Movil: +54 (11) 15 3663 0011 > > > > Web: http://www.beastxblog.com > > MSN: bea...@gmail.com > > Skype User: leandro.asrilevich > > > > Dorrego 328 > > Muniz - Partido de San Miguel > > Buenos Aires - Argentina > > > > > > 2010/12/16 German Bustos <ger...@atarraya.org> > > > > > Hola, > > > > > > No me funciona el código que mandas, pero cuando lo hago con > > > http://www.css3maker.com/text-rotation.html# y lo descargo me > funciona, > > no > > > entiendo cuál es el truco ¿la definición del DOM? ¿position: absolute > > > (probé > > > y no funcionó)? Yo veo mi código casi igual pero no funciona.... > > > > > > Germán > > > > > > El 16 de diciembre de 2010 15:47, Leandro Asrilevich <bea...@gmail.com > > > >escribió: > > > > > > > .verticaltext { > > > > -webkit-transform: rotate(90deg) > > > > -moz-transform: rotate(90deg) > > > > -o-transform: rotate(90deg) > > > > transform: rotate(90deg) > > > > } > > > > > > > > opera no se si lo soporta aun, pero te agregue como seria si lo > > > soportase. > > > > > > > > para webkit (chrome, safari) y firefox estaria andando, y te puse la > > > ultima > > > > declaracion "transform" para cuando los browsers empiecen a > soportarlo > > > > directo sin usar el vendor filder > > > > _____________________________________ > > > > > > > > Leandro Asrilevich | www.beastxblog.com > > > > FrontEnd Developer > > > > Movil: +54 (11) 15 3663 0011 > > > > > > > > Web: http://www.beastxblog.com > > > > MSN: bea...@gmail.com > > > > Skype User: leandro.asrilevich > > > > > > > > Dorrego 328 > > > > Muniz - Partido de San Miguel > > > > Buenos Aires - Argentina > > > > > > > > > > > > 2010/12/16 Ariel <isaacr...@gmail.com> > > > > > > > > > Hola a todos: > > > > > > > > > > Quiero poner un texto en posicion vertical, no con las letras una > > > debajo > > > > de > > > > > la otra si no las palabras en una linea de oracion girada 90 grados > > > hacia > > > > > la > > > > > izquierda, ya sé como hacerlo en internet explorer con unos filtros > > > > > especiales de ese navegador: > > > > > .verticaltext { > > > > > writing-mode: tb-rl; > > > > > filter: flipv fliph; > > > > > } > > > > > > > > > > Lo que quiero saber es como hacerlo para mozilla-firefox, chrome y > > > opera. > > > > > > > > > > Si alguien me puede ayudar y dar una idea se lo agradecería. > > > > > Gracias de antemano > > > > > Saludos > > > > > _______________________________________________ > > > > > 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 > > > > > > > > > > > > > > > > -- > > > > > > *Germán Bustos* > > > Asesor en estrategias de comunicación en Internet para organizaciones > > > sociales > > > http://atarraya.org > > > http://germanbustos.com > > > Tel: (+57) 3177381339 > > > <http://atarraya.org/> > > > <http://germanbustos.com/> > > > <http://www.facebook.com/german.bustos> > > > <http://twitter.com/kommodin> > > > <http://www.linkedin.com/in/germanbustos> > > > _______________________________________________ > > > 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 > > > > > > -- > > *Germán Bustos* > Asesor en estrategias de comunicación en Internet para organizaciones > sociales > http://atarraya.org > http://germanbustos.com > Tel: (+57) 3177381339 > <http://atarraya.org/> > <http://germanbustos.com/> > <http://www.facebook.com/german.bustos> > <http://twitter.com/kommodin> > <http://www.linkedin.com/in/germanbustos> > _______________________________________________ > 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
