Foros del Web » Creando para Internet » CSS »

Problemas con transform-rotate y columnas de txt fijas

Estas en el tema de Problemas con transform-rotate y columnas de txt fijas en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 17/03/2012, 23:30
Avatar de rw523252  
Fecha de Ingreso: julio-2009
Mensajes: 122
Antigüedad: 10 años, 3 meses
Puntos: 5
Problemas con transform-rotate y columnas de txt fijas

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!
  #2 (permalink)  
Antiguo 18/03/2012, 11:37
 
Fecha de Ingreso: abril-2009
Mensajes: 2
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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.
  #3 (permalink)  
Antiguo 18/03/2012, 11:42
Avatar de rw523252  
Fecha de Ingreso: julio-2009
Mensajes: 122
Antigüedad: 10 años, 3 meses
Puntos: 5
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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-
  #4 (permalink)  
Antiguo 18/03/2012, 15:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 4 meses
Puntos: 539
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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 |
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 18/03/2012, 16:54
Avatar de rw523252  
Fecha de Ingreso: julio-2009
Mensajes: 122
Antigüedad: 10 años, 3 meses
Puntos: 5
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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!
  #6 (permalink)  
Antiguo 18/03/2012, 17:38
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 8 meses
Puntos: 306
Respuesta: Problemas con transform-rotate y columnas de txt fijas

Hola
Estas aplicando lo siguiente:
Código CSS:
Ver original
  1. a.foto {....}
tanto a la foto como a las columnas, en consecuencia ambos se verán transformados.
Solución:
Cita:
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 |
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 18/03/2012, 17:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 4 meses
Puntos: 539
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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
Cita:
<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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 18/03/2012, 17:55
Avatar de rw523252  
Fecha de Ingreso: julio-2009
Mensajes: 122
Antigüedad: 10 años, 3 meses
Puntos: 5
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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.
  #9 (permalink)  
Antiguo 18/03/2012, 18:08
Avatar de rw523252  
Fecha de Ingreso: julio-2009
Mensajes: 122
Antigüedad: 10 años, 3 meses
Puntos: 5
Respuesta: Problemas con transform-rotate y columnas de txt fijas

Se me complica un poco, si tenés una captura de pantalla sería fantastico, y desde ya muchas gracias!
  #10 (permalink)  
Antiguo 18/03/2012, 18:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 4 meses
Puntos: 539
Respuesta: Problemas con transform-rotate y columnas de txt fijas



Uploaded with ImageShack.us
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 18/03/2012, 18:16
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 8 meses
Puntos: 306
Respuesta: Problemas con transform-rotate y columnas de txt fijas

En estos momento tienes:
Código HTML:
Ver original
  1. <div id="foto">
  2.  
  3. <a href="#" class="foto">
  4. <img src="imagenes/rango_deep.jpg" alt="Underworld"/>
  5. <span>Texto descriptivo al pie de foto</span>
  6.  
  7. </div><!--foto-->
  8.  
  9. <div id="multicolumna">
  10.  
  11. <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>
  12. <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>
  13.  
  14.  
  15. </div><!--multicolumna-->

Si te fijas bien NO CIERRAS la etiqueta <a>, lo cual hace que todo lo que sigue esté dentro del <a>
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #12 (permalink)  
Antiguo 18/03/2012, 18:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 4 meses
Puntos: 539
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 18/03/2012, 19:19
Avatar de rw523252  
Fecha de Ingreso: julio-2009
Mensajes: 122
Antigüedad: 10 años, 3 meses
Puntos: 5
Respuesta: Problemas con transform-rotate y columnas de txt fijas

Gracias amigos, enseguida lo pruebo, son unos genios!
  #14 (permalink)  
Antiguo 18/03/2012, 19:42
Avatar de rw523252  
Fecha de Ingreso: julio-2009
Mensajes: 122
Antigüedad: 10 años, 3 meses
Puntos: 5
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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/
  #15 (permalink)  
Antiguo 18/03/2012, 20:40
Avatar de rw523252  
Fecha de Ingreso: julio-2009
Mensajes: 122
Antigüedad: 10 años, 3 meses
Puntos: 5
Respuesta: Problemas con transform-rotate y columnas de txt fijas

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!

Etiquetas: columnas, css3, fijas, txt
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:37.