Ayuda necesito insertar dos etiquetas div en este diseño

JahierFP · #1 (**permalink**) 22/01/2010, 19:05

Hola amigos, he comenzado a diseñar mi primera plantilla para joomla con Css y xhtml, bueno el tema es que partiendo con un diseño predifinido con 3 columnas flotantes, encabezado y pié, y ya tengo mi hoja de estilos css.

Hasta alli todo bien, el problema es que para el diseño que quiero desarrollar requiero insertar dos nuevas etiquetas div en los lugares que les señalo en esta captura:

Como alli se puede ver la etiqueta sidebar4 debe estar sobre la etiqueta sidebar2, y esto es lo que no puedo hacer no puedo colocar las dos etiquetas una a lado de la otra, dejando abajo la etiqueta sidebar2.

Solamente pude insertar una (sidebar3) hacieno el siguiente procedimiento:

Incertar etiqueta div, Insertar: delante de la etiqueta sidebar1, clase thrColLiqHdr, ID sidebar3.

Se coloca perfectamente donde quiero sidebar3, pero a sidebar4 no logro colocarla a lado de sidebar3, de tal forma que sidebar2 quede abajo.

Espero haberme explicado bien

cristian_cena · #2 (**permalink**) 22/01/2010, 21:38

Hola JahierFP:

No se si te he entendido pero, "sidebar3" y "sidebar3" ¿tienen como div padre a la columna "sidebar2"? de ser así puedes aplicarle position:relative; y ajustar con top, left, right o bottom la posición donde quieras que se ubiquen. Sino podrias utilizar posiciones absolutas. Y de no quedarte alternativa, deberías de crearte dos módulos ( + ) que se adapten a tu diseño.

Si tu problema pasa a mayores

puedes postearlo en el subforo de joomla

Saludos!

Osdiwe · #3 (**permalink**) 23/01/2010, 11:03

Para poder ayudarte mejor estaría bien poder ver el código de la parte donde se declaranlas 4 columnas y así ver como estan anidadas, y a parte el css para ver si es correcto o le falta algo.

JahierFP · #4 (**permalink**) 23/01/2010, 15:48

...bueo el codigo es:

Código:

<body class="thrColLiqHdr">

    <div id="container">
     <div id="header">
        <h1>Encabezado</h1>
      <!-- end #header --></div>
      <div id="sidebar1">
      <h3>Sidebar1 </h3>
        <p>&nbsp;</p>
        <!-- end #sidebar1 --></div>
      <div id="sidebar2">
        <h3>Sidebar2 </h3>
        <p>&nbsp;</p>
        <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <h1> Contenido principal </h1>
        <p>&nbsp;</p>
        <!-- end #mainContent --></div>
    	<!-- Este elemento de eliminación siempre debe ir inmediatamente después del div #mainContent para forzar al div #container a que contenga todos los elementos flotantes hijos --><br class="clearfloat" />
      <div id="footer">
        <p>FOOTER</p>
        <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
</html>

Y aqui el estilo CSS:

Código:

@charset "utf-8";
body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; 
    	padding: 0;
    	text-align: center; 
    	color: #000000;
    }
    .thrColLiqHdr #container { 
    	width: 80%;  
    	background: #FFFFFF;
    	margin: 0 auto; 
    	border: 1px solid #000000;
    	text-align: left; 
    } 
    .thrColLiqHdr #header { 
    	background: #DDDDDD; 
    	padding: 0 10px;  
    } 
    .thrColLiqHdr #header h1 {
    	margin: 0; 
    	padding: 10px 0; 
    }
    
    
    .thrColLiqHdr #sidebar1 {
    	float: left; 
    	width: 22%; 
    	background: #EBEBEB; 
    	padding: 15px 0; 
    }
    .thrColLiqHdr #sidebar2 {
    	float: right; 
    	width: 23%; 
    	background: #EBEBEB; 
    	padding: 15px 0; 
    }
    .thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
    	margin-left: 10px; 
    	margin-right: 10px;
    }
    
    
    .thrColLiqHdr #mainContent { 
    	margin: 0 24% 0 23.5%; 
    }
    
    .thrColLiqHdr #footer { 
    	padding: 0 10px; 
    	background:#DDDDDD;
    } 
    .thrColLiqHdr #footer p {
    	margin: 0; 
    }
    
    /* Varias clases diversas para su reutilización */
    .fltrt { 
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { 
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }

Espero me puedan ayudar esto me esta volviendo loko

cristian_cena · #5 (**permalink**) 23/01/2010, 16:53

CSS

Código:

#sidebar1{
position:relative;
top:/*distancia respecto del borde superior de la pantalla.*/;
right:/*distancia respecto del borde derecho de la pantalla.*/;
left:/*distancia respecto del borde izquierdo de la pantalla.*/;
bottom:/*distancia respecto del borde inferior de la pantalla.*/;
}
#sidebar2{
position:relative;
top:/*modifícalo a tu gusto*/;
right:/*modifícalo a tu gusto*/;
left:/*modifícalo a tu gusto*/;
bottom:/*modifícalo a tu gusto*/;
}

Cualquier cosa pasa una imágen de como quieres que quede el diseño.

Osdiwe · #6 (**permalink**) 23/01/2010, 17:10

Te dejo el código de como lo haría yo. Opciones hay muchas y quizá no es la mejor, pero prueba a ver cual te sirve para lo que quieres hacer. Primero el código con los DIV:

Código HTML:

<body class="thrColLiqHdr">

    <div id="container">
     <div id="header">
        <h1>Encabezado</h1>
      <!-- end #header --></div>
      <div id="sidebar1">
      <h3>Sidebar1 </h3>
        <p>&nbsp;</p>
        <!-- end #sidebar1 --></div>
      <div id="topContent">
            <div id="sidebar3">
            <!-- end #sidebar3 --></div>
            <div id="sidebar4">
            <!-- end #sidebar4 --></div>
     <!-- end #topContent --></div>
      <div id="sidebar2">
        <h3>Sidebar2 </h3>
        <p>&nbsp;</p>
        <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <h1> Contenido principal </h1>
        <p>&nbsp;</p>
        <!-- end #mainContent --></div>
    	<!-- Este elemento de eliminación siempre debe ir inmediatamente después del div #mainContent para forzar al div #container a que contenga todos los elementos flotantes hijos --><br class="clearfloat" />
      <div id="footer">
        <p>FOOTER</p>
        <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
</html>

Y los estilos CSS:

Código:

#mainContent {
    float:right;
    width: /*Aquí el ancho en porcentaje de lo que debe ocupar sidebar3 + sidebar4*/
}

#sidebar3 {
    float:left;
    width: /*Ancho*/
}

#sidebar4 {
    float:right;
    width: /*Ancho*/
}

En principio con esto deberías tener suficiente para añadir el espacio que necesitas para sidebar3 y sidebar4. Si no se muestra como quieres pon una captura de pantalla para ver como queda ya que no he probado el código.

JahierFP · #7 (**permalink**) 24/01/2010, 14:38

... bueno amigos muchas gracias guiendome con la ayuda que me dieron pude logar mas o menos la estructura que queria.

Me surgen problemas, como les dije era una plantilla para joomla. Tuve que hacer modificacions a los codigos que me pasaron para que queden bien.

Aqui les paso el sitio de prueba, fijense que donde esta el video hay un margen blanco en la parte superior que no queda alineado con lo que seria el contenido de sidebar4 donde esta el reproductor mp3

http://dillon.byethost5.com/

Y en mainContent , el contenido se pone desprolijo, alli donde dice Bienvenidos a la portada, eso tendria que ir abajo encabezando lo que seria justamente el contenido de mainContent

Por si quieren el codigo Css es este:

Código:

@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
	padding: 0;
	text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
	color: #000000;
	background-color: #666666;
	background-image: url(../img/fondo.png);
	background-repeat: repeat;
    }
    .thrColLiqHdr #container { 
    	width: 80%; 
    	background: #FFFFFF;
    	margin: 0 auto;
    	border: 1px solid #000000;
    	text-align: left; 
    } 
    .thrColLiqHdr #header {
	padding: 0 0px;  
	background-color: #000000;
	background-image: url(../img/cabe_fondo.jpg);
    } 
    .thrColLiqHdr #header h1 {
    	margin: 0; 
    	padding: 0px 0; 
    }
    
    .thrColLiqHdr #sidebar1 {
	float: left; 
	width: 22%; 
	padding: 15px 0; 
	background-color: #F8F7F6;
    }
    .thrColLiqHdr #sidebar2 {
	float: right; 
	width: 23%; 
	padding: 15px 0; 
	background-color: #F8F7F6;

    }
    .thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
    	margin-left: 10px; 
    	margin-right: 10px;
    }
    
    .thrColLiqHdr #mainContent {
	margin: 0 24% 0 23.5%;
    }
    
    .thrColLiqHdr #footer { 
    	padding: 0 10px; 
    	background:#DDDDDD;
    } 
    .thrColLiqHdr #footer p {
    	margin: 0; 
    }
    
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { 
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    #sidebar3 {
    float:left;
    width: 43%
    padding: 0px 0;
    }

    #sidebar4 {
    float:right;
    width: 35%
    padding: 0px 0;
   }

Osdiwe · #8 (**permalink**) 24/01/2010, 17:35

El vídeo no te queda alineado con el reproductor MP3 porque hay un párrafo en blanco antes, por eso queda el espacio. Si lo insertas con el editor de textos de Joomla (normalmente el tinyMCE) comprueba el código HTML que te genera y elimina el párrafo adicional que muestra.

Y para solucionar lo del contenido principal pon estos estilos en la linia 57:

Código:

.thrColLiqHdr #mainContent {
float:right;
margin:0 24% 0 0;
width:53%;

JahierFP · #9 (**permalink**) 24/01/2010, 18:31

..perfecto! muchas gracias ya con eso tengo el formato de la pagina que deseo. AHora las proximas dudas las voy a plantear en el subforo joomla. Muchas gracias a todos y sobre todo a Osdiwe

Saludos

Osdiwe · #10 (**permalink**) 24/01/2010, 18:32

De nada, para eso estamos.

JahierFP · #11 (**permalink**) 24/01/2010, 19:47

... vuelvo, bueno estaba probando en Explorer y esta todo bien menos el mainContent q sale abajo, dejando un gran espacio blanco. Pero en firefox se ve bien. ¿Que sera?

PD: lo probe con explorer 6.0

Osdiwe · #12 (**permalink**) 25/01/2010, 02:36

Puede ser por el modelo de caja del Explorer. Prueba con diferentes valores en el width a ver que pasa. Si te da problemas busca en el Google un hack css para esto.