Insertar HTML como un articulo, sin serlo

carscx · #1 (**permalink**) 23/07/2009, 04:29

Buenas, la pregunta es un tanto complicada, o al menos a mi se me hace complicada.

El problema que tengo es el siguiente, quiero hacer una portada para cada seccion de la pagina que tengo en Joomla, es decir tengo un menu superior con 5 seccion, y cada enlace, ahora va a un articulo, pero el caso es que por temas de accesibilidad.

Necesito cambiar ese articulo por otra portada hecha en HTML+CSS y claro al insertar el HTML en articulo, si lo pego con el editor TniyMCE, me "descojona" el código, y si lo pego poniendo no editor, no coge el CSS.

Lo he hecho con un wrapper, pero no me gusta usarlos ya que al final, en alguna resolucion, termina mostrando un scroll en medio de la pagina que no me gusta.

Sabeis alguna manera de poder mostrar el HTML tal cual en el medio de la pagina.

He probado los modulos HTML, pero a la hora de mostrar el contenido, no consigo que lo haga en la posicion de los articulos.

Espero que me puedan ayudar,

Saludos

punkslot28 · #2 (**permalink**) 23/07/2009, 08:03

Crea primero un articulo integrando todo el HTML que quieras poner, si sabes usarlo bien podrás crear hasta menús en ese articulo, y luego en el menú superior ponle que sea de tipo > articulo > presentación de un único articulo.

Saludos

carscx · #3 (**permalink**) 23/07/2009, 10:32

gracias por la respuesta punkslot28,

eso es lo que he hecho, pero es que el propio joomla, no interpreta bien el CSS que aplico sobre el HTML.

punkslot28 · #4 (**permalink**) 23/07/2009, 11:32

Entonces pon un wrapper con los tamaños bien definidos para que parezca un articulo, y que el wrapper que sea un .html creado por ti y alojado en tu host. Por ejemplo menu1.html y lo pones en un wrapper

Saludos!

Larenz · #5 (**permalink**) 23/07/2009, 12:46

Pienso que no deberías de aplicar estilos (style) directamente a tu código html. Lo que deberías de hacer es crear tu código en html a como lo has hecho pero llenarlo de clases en vez de estilos. En vez de hacerlo así:

Código HTML:

<p style="font-size:12px; margin: 10px!>Tu texto aquí</p>

Puedes hacerlo así:

Código HTML:

<p class="parrafo1">Tu texto aquí</p>

Ahora si piensas trabajar con div dentro de tu html es mejor que primero encierres los tags de párrafo (p) en los divs. O sea así:

Código HTML:

<div id="textbox">
  <p class="contenido"> Tu texto aquí </p>
  <div class="box"> Alguna otra info aquí</div>
</div>

De esta manera el editor no te corta los tags usados. Pero si comienzas con los tags p y luego quieres usar divs no los reconocerá.

carscx · #6 (**permalink**) 23/07/2009, 13:50

Buenas Larenz, gracias por la respuesta, mi codigo CSS es el siguiente

Código CSS:

Ver original* { margin: 0px;
padding: 0px; outline: 0;
}
body {
    background-color: #FFF;
    margin:20px;
}
 
h3 {
    color:#cc9900;
}
h2 {
    font-size:12px;
    font-family: Verdana;
}
a   {
    text-decoration: none;
    color:#006699;
}
a:hover {
    text-decoration: underline;
    display:block;
    }
#cabecera {
    margin:0 auto;
    position: left;
    width:100%;
    }
    
#principal ul li span {
    color:#515151;
    font-family: Trebuchet MS;
    font-size: 9pt;
    margin-left:5px;
}
p {
    font-size: 9px;
    font-family: Verdana;
    color:#666;
}
 
#principal {
    margin:0 auto;
    position: relative;
    width:100%;
}
 
#principal ul {
    
}
 
#principal li {
    display:inline;
    float:left;
    margin: 5px;
    padding: 5px;
    background: #FFF;
    width: 40%;
    min-width: 190px;
}
#principal ul li img {
    border:1px solid #EEE;
  float:left;
  margin-right:5px;
}

Y el HTML el siguiente:

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" lang="es-es" xml:lang="es-es">
    <head>
        <meta name="Ciudadanos" content="Pagina principal" />
        <title>Ciudadanos</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="estilo1.css" />
</head>
 
    <body>
        <div id="cabecera"><img src="ban-ciudadanos.png" alt="Ciudadanos" title="Ciudadanos" /></div>
        <div id="principal">
            <h3>Ciudadanos</h3>
            <ul>
            <li><a href="#" target="_parent"><img src="info-ico.png" alt="Información" title="Información" /><h2>Información</h2></a><p>Para los ciudadanos, pacientes, familiares</p></li>
            <li><a href="#" target="_parent"><img src="centros-ico.jpg" alt="Centros y Servicios" title="Centros y Servicios" /><h2>Centros y Servicios</h2></a><p>Centros de salud</p></li>
 
            <li><a href="#" target="_parent"><img src="donaciones-ico.jpg" alt="Donaciones y trasplantes" title="Donaciones y trasplantes" /><h2>Donaciones y trasplantes</h2></a><p>Unidad Autonómica de Trasplantes</p></li>
            <li><a href="#" target="_parent"><img src="#" alt="Epidemiología" title="Epidemiología" /><h2>Epidemiología</h2></a><p>Boletines e indicadores epidemiológicos</p></li>
            <li><a href="#" target="_parent"><img src="tarjeta-ico.jpg" alt="Tarjeta sanitaria" title="Tarjeta sanitaria" /><h2>Tarjeta sanitaria</h2></a><p>Uso y caracteristicas de la Tarjeta sanitaria. Renovación de Tarjeta</p></li>
            
            </ul>
        </div>

¿Lo que me quieres decir es que incruste el codigo CSS en su respectivo lugar?

Te agradeceria que me lo pudieses aclarar. Gracias de todas formas,

Saludos,

Larenz · #7 (**permalink**) 23/07/2009, 14:26

Oye metes ese código html dentro de un módulo y le incluyes los head y el doctype? Si es así puede que por eso no te resulte.

carscx · #8 (**permalink**) 23/07/2009, 16:20

Si, asi lo hago, probare la opcion que me dices. Muchas gracias,