Foros del Web » Creando para Internet » CSS »

Ayuda necesito insertar dos etiquetas div en este diseño

Estas en el tema de Ayuda necesito insertar dos etiquetas div en este diseño en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/01/2010, 19:05
Avatar de JahierFP  
Fecha de Ingreso: enero-2010
Mensajes: 45
Antigüedad: 7 años, 10 meses
Puntos: 0
Ayuda necesito insertar dos etiquetas div en este diseño

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
  #2 (permalink)  
Antiguo 22/01/2010, 21:38
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

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!
  #3 (permalink)  
Antiguo 23/01/2010, 11:03
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

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.
  #4 (permalink)  
Antiguo 23/01/2010, 15:48
Avatar de JahierFP  
Fecha de Ingreso: enero-2010
Mensajes: 45
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

...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
  #5 (permalink)  
Antiguo 23/01/2010, 16:53
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

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.
  #6 (permalink)  
Antiguo 23/01/2010, 17:10
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

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.
  #7 (permalink)  
Antiguo 24/01/2010, 14:38
Avatar de JahierFP  
Fecha de Ingreso: enero-2010
Mensajes: 45
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

... 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;
   }
  #8 (permalink)  
Antiguo 24/01/2010, 17:35
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

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%;
  #9 (permalink)  
Antiguo 24/01/2010, 18:31
Avatar de JahierFP  
Fecha de Ingreso: enero-2010
Mensajes: 45
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

..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
  #10 (permalink)  
Antiguo 24/01/2010, 18:32
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

De nada, para eso estamos.
  #11 (permalink)  
Antiguo 24/01/2010, 19:47
Avatar de JahierFP  
Fecha de Ingreso: enero-2010
Mensajes: 45
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

... 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
  #12 (permalink)  
Antiguo 25/01/2010, 02:36
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño

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.

Etiquetas: diseño, dos, etiquetas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:18.