Hola, Diego.
Coincido con Ignacio en que sería mejor que subieras el ejemplo para
poderlo estudiar más cómodamente. De todas formas, se agradecen las
imágenes.
Entiendo que la línea vertical la consigues especificando un borde
izquierdo para div#right. Tal y como está declarado, este borde se
muestra en IE, pero no en otros navegadores. Mejor, cámbialo por:
border-left: 1px solid #000;
Para conseguir que esta línea llegue hasta el pie, tienes varios
métodos. Dejando a un lado javascript, dispones del método de las
columnas falsas (faux columns) que consiste en utilizar una imagen de
fondo en el contenedor, de forma que simule la columna (en este caso,
que contenga la línea vertical).
Otro truco que te propongo consiste en añadir a la columna que menos
altura tenga (el div#right) un relleno (padding) contrarrestado por un
margen negativo. Añade lo siguiente a tu css:
#right {
border-left: 1px solid #000;
padding-bottom: 300px; /* Valor arbitrario lo suficientemente alto */
margin-bottom: -300px;
}
Puesto que tu plantilla tiene pie de página, el borde se verá a través
de éste. Para evitarlo, declara explícitamente un background-color al
pie.
Una observación: para que #container se extienda para englobar los
flotantes que contiene, puedes añadirle overflow: hidden (auto también
vale). Para IE6, height: 1%.
Saludos.
El 16 de julio de 2009 20:50, DIEGO ACEVES
LÓPEZ<diego69...@hotmail.com> escribió:
>
>
>
>
> Vive Cada Dia Como Si Fuera El Ultimo De Tu Vida... by Diego
>
>
>
> hola a todos, buen dia,
>
>
> tengo un problema con una plantilla joomla, al parecer esta bien el codigo
> html pero un modulo quiero que me lo mueste hasta abajo, aqui les adjunto la
> imagen y ojala me puedan hechar la mano, creo que el problema es el css les
> adjunto el codigo.
>
>
> codigo HTML
>
> <div id="container" style="margin: 0 auto">
> <div id="header">
>
> </div>
> <div id="banner">
> </div>
>
> <div id="right">
> </div>
>
> <div id="content">
> </div>
>
> <div id="forms">
> </div>
>
>
> <div id="user">
> </div>
>
>
>
> <div id="lineaH">
> </div>
>
> <div id="footer1">
> </div>
>
> <div id="footer">
> </div>
>
> </div>
>
>
> gracias
>
>
>
> codigo CSS
> #header{height: 50px;}
>
> #container{width:763px; border-color:#000; border-left:solid;
> border-right:solid; border-width:2px;}
>
> #header ul{list-style:none; margin:0px; padding-right: 1em; padding: 0px 0px
> 0px 0px; text-align:center; display: block; padding-top: 0em;}
>
> #header li{float:left;height:50px; width:109px; display: block;}
>
> #header li:hover{background:green;}
>
> #header a:link, a:visited{color:#000; text-decoration:none; font-family:
> Arial, Helvetica, sans-serif; font-weight:bold; text-align:center;
> font-size:13px;}
>
> #header a.mainlevel{width:109px; height:37px; display: block; color:#5FB404;
> padding-top: 1em;}
>
> #header a:hover{color: #fff;}
>
> #banner img{border:none;}
>
> #content{float:left; width:500px; font-family: Arial Helvetica sans-serif;
> font-size:12px; margin-left:8px;}
>
> #content a:hover{text-decoration:underline;}
>
> #forms{float:left; width:500px; font-family: Arial Helvetica sans-serif;
> font-size:12px; margin-left:20px;}
>
> #user{float:left; width:500px; font-family: Arial Helvetica sans-serif;
> font-size:12px; margin-left:8px;}
>
> #user a:hover{text-decoration: underline;}
>
> #right {float:right; width:200px; height:100%; text-align:left;
> border-color:#000; border-left:solid; background: #EEE; border:1px;
> font-size:16px; font-family: Arial Helvetica sans-serif;}
>
> #right a:hover{text-decoration:underline;}
>
> #footer1{float:left; width:200px; text-align:left; font-family:Arial,
> Helvetica, sans-serif; font-size:12px;}
>
> #footer {float:right; width:550px; text-align:left; font-size:10px;}
>
> #footer a:link, a:visited{text-decoration:none;}
>
> #footer a:hover{color:#000; text-decoration: underline;}
> _________________________________________________________________
> Actualiza tu Perfil y gana!
> http://www.actualizatuperfil.com.mx/
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
