Estoy tratando de girar una variedad de bloques de texto para que se orientan verticalmente, y la posición de ellos en lugares muy específicos en un diagrama que muestra una vista previa y, a continuación, imprimir. CSS gira el texto muy bien en IE, FF, incluso la Ópera.

Pero cuando intento posición de un elemento reiterado, es decir, 7 & 8 (no se preocupa 6) rompe por completo y el elemento permanece en su ubicación original. Alguna forma de evitar esto? Realmente necesito a-la-pixel control de donde estas etiquetas se encuentran.

HTML

  <div class="content rotate">
    <div id="Div1" class="txtblock">Ardvark Avacado<br />Awkward</div>
    <div id="Div2" class="txtblock">Brownies<br />Bacteria Brussel Sprouts</div>
  </div>

CSS

div.content {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 30px;
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; }

.rotate  {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

.txtblock {
    width: auto;
    position: absolute;
    }

#Div1 {
    left:44px; 
    top:70px; 
    border:red 3px solid; }

#Div2 {
    left:13px; 
    top:170px; 
    border:purple 3px solid;  }
  • Cualquier posibilidad de que usted podría proporcionar un enlace en vivo?
InformationsquelleAutor doub1ejack | 2010-04-13

3 Comentarios

  1. 5

    Esto suena como un tema que me pasé una buena parte de su tiempo con. He dejado dos comentarios en Paul Irish del blog los detalles de mis hallazgos. Aquí está lo que escribí:

    IE6 y 7: Que debe declarar, al menos,
    la altura o el ancho del div que
    va a ser rotado ANTES de su
    la rotación de los filtros aparecen en el CSS.
    Incluso si usted hace esto, sin embargo, cualquier
    estilos aplicados a ese div DESPUÉS de la
    la rotación de los filtros aparecen en el código
    no será aplicado. El mismo parece
    de ser cierto para todos los estilos aplicados a la que
    del div a los niños. Raro.

    IE8: Esto parece no ser un problema. Yo
    aplica correctamente los estilos a la etiqueta div
    (incluyendo la declaración de su altura o
    el ancho de la primera vez) después de la
    la rotación de los filtros aparecen en el código.

    …y más CSS rotación rareza informe:

    En IE6 y 7, incluso si usted sigue las
    las reglas que he publicado un par de comentarios atrás,
    usted todavía va a romper totalmente su sitio
    si usted usa más de una rotación
    filtro por archivo CSS externo. Usted
    tienen que tener separados los archivos CSS
    por la rotación del filtro, o simplemente agregar
    cada filtro anidado en su propio y único
    etiquetas de estilo en el head de tu html.
    No hacerlo sólo mostrará el
    primera girar el objeto, pero incluso este
    será borrosa y en la incorrecta
    el ángulo.

    Divertidamente, la eliminación de la DOCTYPE
    hace que todos los que la rotación de procesamiento
    perfectamente, así que estoy asumiendo que las peculiaridades del modo de
    sabe cómo manejar múltiples rotación
    los filtros? También, con una más grande, más
    complejo de la hoja de estilos, incluso hubo
    recien efectos secundarios, pero no pude
    identificar lo que fue el causante de aquellos.
    De todos modos…

    Mensaje:

    Uso solo 1 propietario ms filtro:
    (cuando se utiliza para la rotación, al menos) por
    hoja de estilos externa. y.. Cada
    la rotación del filtro en el código html debe ser
    en su propio conjunto de etiquetas de estilo.

    A pesar de que mi problema era algo diferente, puede estar ejecutando en una situación similar con los dos interiores divs ser girado por el padre. Merece la pena un tiro. Al menos, trate de mover el .gire delclaration a la parte inferior de la hoja de estilos.

  2. 2

    Prueba este código:

    <!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>
        <title>Centrsource najboljše Ponudbe</title>
        <style type="text/css">
        #content {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 30px;
        border-top: black 4px solid; 
        border-right: blue 4px solid; 
        border-bottom: black 4px dashed; 
        border-left: blue 4px dashed; 
        }
    
    .txtblock {
     display:block;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
    
    
        </style>
    </head>
    <body>
    <div id="content">
        <div class="txtblock">Ardvark Avacado<br />Awkward</div>
    </div>
    </body>
    
    </html>

    Se va a aplicar el código para el mal elemento. También como referencia a los demás en la comprensión de este http://snook.ca/archives/html_and_css/css-text-rotation

    • Gracias, pero en cascada hacia abajo ¿no es cierto? Los niños de la posición con relación a sus padres, es decir, deben recibir la misma rotación. Y si no puedo solo tienes que girar el padre tendría que establecer la rotación de cada niño… y eso es un pesado de la lista.
    • Por lo que yo sé de filtro: utiliza javascript como base para hacer todos los cálculos, así que no es realmente css – la cascada no se aplica. También IE siempre ha tenido su manera de manejar las cosas. P. s.: Marcar como solucionado si esto responde ayudado a usted.
    • no su trabajo IE7!!
  3. 0

    Me parece que esto funciona si pones las rotaciones en el txtblocks, en lugar de en el exterior del contenedor.

    Demo

    • He intentado esto también. Los elementos de girar, pero no se muestran de forma consistente entre IE y FF. Se puede girar el recipiente para tratar de conseguir el uniforme de posicionamiento. Me hizo ver que IE7 parece rotar los elementos con posición absoluta, y que es IE8 está teniendo problemas.

Dejar respuesta

Please enter your comment!
Please enter your name here