Problemas con transform-rotate y columnas de txt fijas

[rw523252]

Hola chicos, puse unas propiedades a una imagen, de rotación y transformación,

Está en esta url: http://zonatest.comuf.com/

Y quiero ponerle debajo, tres columnas de texto, y me toman la transformación de la foto, en la url está solo la foto, el tema es para mí como separar las columnas de la transformación de las fotos,

Este es el css3 de las columnas de texto:

#contenedor div {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
text-decoration: none;
}

.multicolumna{
clear:both;
-moz-column-width: 300px;
-moz-column-gap: 15px;
-webkit-column-width: 300px;
-webkit-column-gap: 15px;
-webkit-column-rule: 1px solid #ccf;
-moz-column-rule: 1px solid #ccf;
}

Nota:Apliqué la clase .multicolumna al div, además, de las características de la fuente.

Espero me den una mano con esto, saludos y gracias!

[alem_x]

Ahora le puse las columnas debajo para mostrarle como se heredan los estilos, y ese es el tema que quisiera solucionar, dejar las columnas de texto fijas.

[rw523252]

Ahora le puse las columnas debajo para mostrarle como se heredan los estilos, y ese es el tema que quisiera solucionar, dejar las columnas de texto fijas.

-Recién postié con un nick de un correo que ya no tengo, pero esto les quería mostrar, para que vean el problema-

[kseso?]

El texto (span) forma parte del enlace que es quien tiene las trasnform, por lo tanto su código funciona.

Si quiere que el texto sea ajeno a ellas, debe sacarlo del enlace y que sea hijo directo de #foto (hermano de a.foto)
O "anular" la transformación declarando las propiedades necesarias para | a.foto span | que contrarresten las de | a.foto |

[rw523252]

Hola Kseso? Te cuento haber si entendí, saco la estique <span></span>, eso hice y la reemplacé por <p></p>.
El texto me queda azul, y las columnas, me toman la transformación todavía, seguro estoy haciendo algo mal.
Me gustaría me dijeras, que está mal, y si conocés algún link de donde estudiar esto por ejemplo, por uqe no pude buscarlo en google, por que no sabía como, muchas gracias y saludos!

[C2am]

Hola
Estas aplicando lo siguiente:

Código CSS:

a.foto {....}
 

tanto a la foto como a las columnas, en consecuencia ambos se verán transformados.
Solución:

Kseso?:
Si quiere que el texto sea ajeno a ellas, debe sacarlo del enlace y que sea hijo directo de #foto (hermano de a.foto)
O "anular" la transformación declarando las propiedades necesarias para | a.foto span | que contrarresten las de | a.foto |

[kseso?]

Perdón, perdón.
Olvide mi respuesta anterior.

Son las columnas,

Sus columnas de texto se mueve porque el div que las contiene (#multicolumna) está dentro de un enlace (a) al que le tiene aplicada la clase .foto

Eso es un error.
En las spec del doctype que utiliza (XHTML 1.0 Transitional) un enlace por ser un elemento de línea (inline) no puede contener elementos de bloque (block).

Para que su texto no sufra las transform al :hover corrija ese error. Elimine

<a class="foto" href="#">

antes del #multicolumna y el cierre del enlace (</a>) despues de él.

Si no sabe a qué me refiero, le adjunto una captura de pantalla.

[rw523252]

Hola amigos, entiendo que está bien lo que me dicen, sucede es que no se como hacerlo, como sacar el texto, y que sea hijo directo de #foto (hermano de a.foto).
O "anular" la transformación declarando las propiedades necesarias para ( a.foto span ) que contrarresten las de ( a.foto ).
Estoy empezando con esto de las pseudo clases, y pongo la mayor voluntad, estoy leyendo https://developer.mozilla.org/es/CSS_din%C3%A1mico pero no me queda muy claro. Si pudieran explicarme un poco más se los agradecería mucho.

[rw523252]

Se me complica un poco, si tenés una captura de pantalla sería fantastico, y desde ya muchas gracias!

[kseso?]

Uploaded with ImageShack.us

[C2am]

En estos momento tienes:

Código HTML:

<div id="foto">
 
<a href="#" class="foto">
<img src="imagenes/rango_deep.jpg" alt="Underworld"/>
<span>Texto descriptivo al pie de foto</span>
 
</div><!--foto-->
 
<div id="multicolumna">
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere, quam nec pulvinar dignissim, tortor risus mattis nibh, vitae accumsan justo metus nec nisi. </p><p>Vivamus nec enim ultrices leo placerat sodales in id metus. Ut fermentum nunc quis tortor bibendum lacinia. Sed bibendum sodales aliquet. Fusce a pretium magna. Donec lobortis purus ac nulla blandit fermentum. Nullam vitae magna ipsum. Sed ultricies dictum felis, sed vulputate lacus feugiat nec. Vivamus molestie erat id dui condimentum commodo.</p><p> Duis congue lacus id eros hendrerit tempor. Nunc sagittis commodo consectetur. Quisque scelerisque facilisis dui, luctus ullamcorper diam faucibus sagittis. Quisque blandit sagittis nisi, nec volutpat tellus pretium eget. Phasellus porta dui quis mauris laoreet quis molestie ante tincidunt. Quisque convallis scelerisque lobortis. Proin eu lacus tortor, in venenatis turpis. Morbi diam quam, dignissim non laoreet eu, dapibus vitae est. Suspendisse condimentum, sem non gravida convallis, dui justo tincidunt urna, sed tincidunt lectus odio non purus. Aenean a commodo sapien.</p>
<p>Suspendisse ut nulla sed sem faucibus ultrices. Etiam suscipit nisl non arcu lacinia vestibulum. Pellentesque commodo nisi posuere ipsum suscipit in scelerisque urna porta. Morbi faucibus dignissim augue ut euismod. Proin ut risus nunc. Donec purus enim, aliquam sit amet euismod facilisis, posuere eget quam. Fusce at elit sapien, in egestas lacus.</p><p> In in leo eros, vel posuere mauris. Morbi ullamcorper convallis sapien, at suscipit mauris adipiscing molestie. Morbi magna urna, porttitor vitae iaculis ut, tincidunt at massa. Nunc purus urna, blandit dapibus gravida quis, molestie eget eros. Curabitur varius, ligula nec fermentum adipiscing, dolor nisl rhoncus neque, eget accumsan mauris enim non purus. Vivamus lectus mi, ultrices vel mollis ac, posuere quis nisl.</p><p>Nulla dictum ante vitae felis eleifend lobortis. Nunc elementum gravida viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
 
 
</div><!--multicolumna-->
 

Si te fijas bien NO CIERRAS la etiqueta <a>, lo cual hace que todo lo que sigue esté dentro del <a>

[kseso?]

Coño!!!
Vaya una jugada del intérprete del html de Firefox Crome. Cierran y abren para mostrar más o menos bien la página. Los dos lo hacen igual.

Bien visto C2am!!!

De todas formas, rwNº, esto se solventa haciendo uso del validador:
http://validator.w3.org/check?verbos...t.comuf.com%2F

[rw523252]

Gracias amigos, enseguida lo pruebo, son unos genios!

[rw523252]

Ya lo cambié en el host, gracias por tenerme paciencia y enseñarme, esta tarde aprendí mucho gracias a ustedes, estoy sumamente agradecido, saludos a ambos!!!!

http://zonatest.comuf.com/

[rw523252]

Hola chicos, una cosa más el validador de código, puede ayudarme a encontrar un error como el que tenía yo hoy, o el inspector de código del mozilla, o solamnete el estudio, que obviamnete ayuda y mucho, pero digo en el camino, existen herraminetas que colaboren con nuestro aprendizaje, saludos!