Consejo, eliminar cualquier estilos de un div

Myakire · #1 (**permalink**) 15/04/2009, 20:35

Ni yo sabría de que se trata el tema con el título, pero paso a explicarme:

Tengo una sitio que esta relativamente bien maquetado, no tengo tablas, tengo mis clases, mis estilos globales y todo eso, dicha web tiene algunos apartados que eran con texto fijo hasta este momento, pero resulta que ahora necesito obtener el texto de un editor WYSIWYG, y los TAGS que dicho editor utiliza están considerados con algunos atributos de manera general. Esto me "ha dado al traste" con la presentación de dichos contenidos, obiamente.

¿Cómo me aconsejan solventar este problema?

Es decir, podría empezar a tocar los atributos que me estan afectando pero eso me tocaría a otras páginas y esto se volvería una bola de nieve en una pendiente.

No se si puedo definir una capa que tenga algún estilo (que desconozco) que haga que no sea afectada por los demás estilos, para que así los tags del editor trabajen de manera nativa (estoy pensando en voz alta)

gracias de antemano por lo que me pudieran comentar

David · #2 (**permalink**) 15/04/2009, 21:09

Yo me considero un novato en todo ésto, así que si responde alguien más no me hagas caso

. Lo que podrías hacer es pisar los valores de los estilos globales dentro del contenedor donde está el texto. Un caso teórico con meros propósitos ilustrativos:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
    <head>
        <title>I AM YOUR DOCUMENT TITLE REPLACE ME</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            a {
                color: Green;
            }
            .contenedor a {
                color: Blue;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="#">Enlace</a>
            <div class="contenedor">
                <a href="#">Enlace</a>
            </div>
        </div>
    </body>
</html>

Así, todos los enlaces heredarán el color Verde, pero siendo .[clase] a un selector más específico, tiene precedencia, por lo que los enlaces que estén dentro de un contenedor de clase "contenedor" (vaya redundancia) tendrán un color diferente.

Myakire · #3 (**permalink**) 16/04/2009, 10:39

Cierto, ya lo había pensado, al redefinir los estilos de manera "local" pudiera funcionar, pero buscar cada tag y hacerle un "contra-llave" me da un poco de pereza aunque quizá sea lo que tenga que hacer y ni modo, aunque se me ha ocurrido colocar el contenido del editor wysiwyg dentro de un iframe libre de los estilos del sito y bien maquetado para que sea transparente al usuario, supongo funcionaría y sería más fácil y rápido

Deja veo los dos caminos, quizá mientras tanto alguien con más sapiencia que nosotros en este tema pueda opinar algo más.

Gracias mi estimado David

(OT: ¿hay algún foro en el que no te metas?, jejeje

)

pitufoweb · #4 (**permalink**) 16/04/2009, 12:14

Podrías probar algo como esto:

Primero creamos el DIV donde se aparecerá el código generado por el editor wysiwyg y le ponemos una ID. En este caso la ID sera "wysiwygCode"

<div id="wysiwygCode">
Aquí iría el código que genere el editor wysiwyg.
</div>

En el CSS pondría algo parecido a esto:

div#wysiwygCode * {
margin: 0; padding: 0;
color: #000; background: #FFF;
border: 0;
font-weight: normal; font-style: normal; font-size: 100%;
}

Habría que ver cuales son los atributos que siguen interfiriendo y "resetealos" a su estado normal.

Saludos
Bye