Tema: Rotar texto + CSS
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 30/03/2012, 04:21
Bugger
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 14 años, 2 meses
Puntos: 17
Respuesta: Rotar texto + CSS
Hola de Nuevo,

antes de nada, daros la gracias por las rápidas respuestas, tanto danihxh como gebremswar!!!!

cuando vuelva la oficina para el desarrollo os cuento!!!


EDITADO

Hola de nuevo,

he separado los css por navegadores. (ya se podrían poner de acuerdo y ahorrarnos esto... pero bueno no es el caso)

me sigue pasando lo mismo, al poner la letra en vertical se me corta en el inicio de la palabra.
ahora mismo tengo lo que ha puesto danihxh en su parte de código de css y se me sigue cortando el texto.


EDITADO 2
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <style>
  4. th
  5. {
  6. font: bold 12px Arial, Helvetica, Verdana;    
  7. background: #d5d5d5;
  8. padding-top: 10px;
  9. padding-left:2px;
  10. padding-bottom: 10px;
  11. text-align:center;    
  12. vertical-align:bottom; 
  13. margin-bottom: 10px;
  14. position:relative;
  15. height:200px;
  16. width:50px; /* ESTE VALOR ES "A" */
  17. }
  18.  
  19.  
  20. .rotar 
  21. {
  22. display:block;
  23. white-space:nowrap;
  24. -webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
  25. -webkit-transform: rotate(-90deg);
  26. -moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
  27. -moz-transform: rotate(-90deg);
  28. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  29. position:absolute;
  30. bottom:125px;
  31. left:0;
  32. text-align: left;
  33. line-height:20px;
  34. background: green;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39.  
  40. <table><tr>
  41. <th>NRO</th>
  42. <th>ALUMNO</th>
  43. <th>&nbsp;<div class="rotar">COMUNICACION 1</div></th>
  44. <th>&nbsp;<div class="rotar">EDUCACION POR EL ARTE</div></th>
  45. <th>&nbsp;<div class="rotar">RAZONAMIENTO LOGICO</div></th>
  46. <th>&nbsp;<div class="rotar">HISTORIA</div></th>
  47. <th>&nbsp;<div class="rotar">EDUCACION FISICA</div></th>
  48. <th>&nbsp;<div class="rotar">ARTES MARCIALES</div></th>
  49. <th>&nbsp;<div class="rotar">RELIGION</div></th>
  50. <th>&nbsp;<div class="rotar">ALGEBRA</div></th>
  51.  
  52. </tr></table>
  53.  
  54. </body>
  55. </html>

el tema está cerquita... pero no acabo de encontrar la manera de que quede bien alineado!!!





Gracias
Última edición por Bugger; 30/03/2012 a las 08:58