entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Este un tema que me tiene negro esta tarde (bueno, ya noche xD).
Primerito dejo el jsfiddle con lo que explico: http://jsfiddle.net/soulchainer/Djk36/
El caso es que tengo dos navs, que contienen una lista con enlaces. Uno con links sociales y otro con links varios. Los links del segundo nav, que es el que me ocupa, tienen un par de efectos de css transform: skew y rotate.
Y el problema está en que al aplicarles este efecto, esos enlaces exceden a su contenedor (el contenedor no se ajusta en tamaño al contenido, el contenido sobresale).
Quiero que los contenedores se ajusten automáticamente al contenido transformado. De otra manera, este contenido que sobresale, al redimensionar la ventana del navegador, termina solapándose con otros elementos de la página. O con elementos de la propia lista (al exceder tanto el tamaño del parent, la etiqueta <li>, como de sus ancestors <ul> y <nav>.

El tamaño de la fuente y los bordes son a efectos de mejor visualización del problema.
Este nav está flotado a la derecha.
Obviamente quedan fuera de toda discusión soluciones que consistan en establecer valores absolutos de ancho-altura. Y también las referentes al uso de js/jquery, porque pregunto por hacer esto con css3 y html.

Muchas gracias por vuestro tiempo :)

EDITADO:
Como "solucion" provisional, he editado la regla .sitemenu li a esto:

.sitemenu li {
    border: 1px solid black;
    display: inline-block;
    /*margin-right: .37em;
    margin-top: 1em;*/
    margin: 1em .37em 1em 0em;
    position: relative;
    right: 0em;
}

(Gracias a +fernando calatayud en Google+ por apuntar esto, aún cuando yo ya lo sabía :p).
Esto es sólo una forma de esquivar el problema, de que parezca que este no existe.
No resuelve el problema real en absoluto, sólo fuerza a los elementos actuales a comportarse con el resto de contenido de la página. Si se cran etiquetas con texto más largo del actual o se cambia el tamaño de la fuente de las mismas, tendríamos que estar ajustando cada vez el tamaño del margen a ojo para compensarlo. Y no es lo más adecuado.

1 Respuesta

2votos

Leonardo-Tadei Puntos227320

Hola Juan,

interesante y complejo problema. Una solución podría ser esta:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
<style type="text/css">.sitemenu{border:1px solid red;float:right;font-size:1.5em;}.sitemenu ul{height:auto;}.sitemenu li{border:1px solid black;display:inline-block;margin-right:.37em;margin-top:1em;position:relative;right:0em;}.sitemenu li:before{content:"";float:left;margin-top:70%;}.sitemenu a{background:#E8EA70;display:block;font-weight:bold;font-size:2em;padding:.185em;text-decoration:none;color:#2E2E2E;-o-transition:color .4s ease-in-out;-webkit-transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;transition:color .4s ease-in-out;}.tape{-moz-transform:rotate(-20deg) skewX(-20deg);-webkit-transform:rotate(-20deg) skewX(-20deg);-o-transform:rotate(-20deg) skewX(-20deg);transform:rotate(-20deg) skewX(-20deg);}.sitemenu a:hover{color:#C42E3F;-o-transition:color .4s ease-in-out;-webkit-transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;transition:color .4s ease-in-out;}</style>
    </head>
    <body>
        <nav class="sitemenu">
            <ul>

                <li><a class="tape" href="tags.html">tags</a></li>
                <li><a class="tape" href="archives.html">archivo</a></li>
                <li><a class="tape" href="tags.html">tags</a></li>
                <li><a class="tape" href="archives.html">archivo</a></li>
                <li><a class="tape" href="tags.html">tags</a></li>
                <li><a class="tape" href="archives.html">archivo</a></li>
            </ul>
        </nav>
    </body>
</html>

Me basé en varios artículos de la red, pero sobre todo en este: http://kizu.ru/en/fun/rotated-text/

El porcentaje lo calculé a ojo, siendo que para una rotación de 90 gradoes es del 100% y será de 0% si no hay rotación, por lo que esto funciona solo si todos los elementos rotan igual.

Saludos!

0voto

soulchainer comentado

Bueno, votada está.
Pero la verdad (y lo primero), no me gusta que se marque como solucionada simplemente por votar una pregunta que te gusta.
Esto no soluciona el problema, @Leonardo+Tadei, pero es interesante :)
He mirado el código y inspeccionado los elementos de la web que citas y realmente ni a el le funciona como cabria de esperar (aún teniendo en cuenta que yo uso, además, skew y fastidia los cálculos).Sólo aparenta que funciona.
He probado dicha solución y genera más problema que solución (los bloques se hacen inmensos cuando alargas el texto). Mi solución termina funcionándome mucho mejor.
Y me gustaría comentarte mejor, pero estoy sudando sangre para escribir esto, porque cada 3 segundos un "script" de entredesarrolladores me peta el firefox y me aparece una ventanita de si quiero pararlo. Hace esto innavegable. Y escribo el comentario sin verlo.
Gracias ;)

0voto

Leonardo-Tadei comentado

Hola Juan,

es raro lo que decís, porque hasta dónde sé, el único que puede marcar una respuesta como válida eres tu mismo. Le podrías poner un mensaje a @Peter para que si la marcaste erróneamente te la desmarque o mejor todavía, poner tu propia respuesta y marcarla como la solución.

Respectoa tu problema, siempre habtrá que hacer una estimación, porque el modelo de caja en CSS no contempla la rotación. Luego, habrá estimaciones o peores para cada caso.

Saludos cordiales!

PD: a mi hoy también me tiene mal es JS que consume todos los recursos :-(

0voto

Peter comentado

@soulchainer Los votos no tienen nada que ver con seleccionar la mejor respuesta. Por favor intenta darle click de nuevo a mejor respuesta.

En cuanto al problema de JS que comentan, les agradecería que por favor abran un tema en las conversaciones y señalen el error que aparece para poder revisar el problema.

De cualquier forma hare algunas pruebas para ver si puedo replicar el problema.

Saludos.

1voto

soulchainer comentado

@Leonardo-tadei, @Peter Imagino que lo del voto fue la madrugada de anoche, que no andaba muy fino, mis disculpas. Edito: curioso, parece que no se puede citar a dos personas seguidas de forma apropiada :p
Ahora he entrado y he visto claramente donde votar. Ya me parecía raro que no hubiera una manera...

@Peter, ya no puedo señalar el error porque sea lo que sea, ya no se produce. Lo que es un alivio, aunque entiendo que conocer que lo provocaba sería útil. Pero anoche no estaba para ponerme a revisar/reportar eso debidamente :(
Ya, me figuro lo de la estimación, @Leonardo-tadei. Debería de hacer algo aquel al que le corresponda (la W3C, los navegadores...) para solventar mejor este problema :p Para hacerlo a ojímetro siempre se está a tiempo ññ Pero son eso: soluciones provisionales. Creo que es básicamente porque es como si la transformación fuera lo último que se aplicara. Y entonces, las medidas de ancho y altura que se tienen en cuenta son las anteriores a dichas transformaciones. Y ahí viene todo el problema ><

Un saludo a ambos ;)

Nota: de todas formas, la solución provisional/parche se comporta bastante bien. Es simplemente que... no es bonita/elegante, ya sabéis.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta