Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » Joomla »

se rompe el diseño cuando utilizo K2

Estas en el tema de se rompe el diseño cuando utilizo K2 en el foro de Joomla en Foros del Web. Hola gente, este componente " K2 " es lo que necesitaba Joomla para equipararse a Drupal y no tener nada que envidiarle a este CMS ...
  #1 (permalink)  
Antiguo 18/11/2010, 10:22
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 22 años, 5 meses
Puntos: 8
se rompe el diseño cuando utilizo K2

Hola gente, este componente "K2" es lo que necesitaba Joomla para equipararse a Drupal y no tener nada que envidiarle a este CMS ; pero el tema es que con el diseño que tengo (y con otras plantillas que he probado pasa más de lo mismo), en la página de inicio tengo puesto que salgan los contenidos de los artículos de una categoría en concreto de K2, y el problema es que la columna de la derecha se descoloca totalmente y se coloca donde terminan los artículos. He requetemirado con firebug pero no logro dar con la solución (seguramente me faltan algunas cosillas de CSS (:: ), pero el tema es que en el resto de páginas del sitio mi columna permanece firme como si fuera espartana (:: , es solo donde aparece el K2 ; como decía más atrás he probado con otros themes de Joomla que vienen por defecto y sucede lo mismo.

¿Alguien me puede echar un cable?.

Mil gracias
__________________
Videotutoriales de Drupal
  #2 (permalink)  
Antiguo 18/11/2010, 21:04
 
Fecha de Ingreso: julio-2007
Ubicación: Bolivia, Cochabamba
Mensajes: 104
Antigüedad: 17 años, 3 meses
Puntos: 5
Respuesta: se rompe el diseño cuando utilizo K2

Hola Dundee, como bien lo dices es nada mas que un problema de CSS, pero es como si trabajaramos a ciegas, si nos posteas tu web recibiras mas ayuda.

Saludos.
__________________
Jorge A. Inturias C.
Tutoriales | Recursos | Ejemplos | www.disenopaginasweb.com
  #3 (permalink)  
Antiguo 19/11/2010, 05:17
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 22 años, 5 meses
Puntos: 8
Respuesta: se rompe el diseño cuando utilizo K2

Cita:
Iniciado por inturias Ver Mensaje
Hola Dundee, como bien lo dices es nada mas que un problema de CSS, pero es como si trabajaramos a ciegas, si nos posteas tu web recibiras mas ayuda.

Saludos.
Gracias por la respuesta , pero la web no está subida está en local, voy a postear el HTML y el CSS en la medida de lo posible (porque es bastante).

Este es el index.php que tengo en el theme que he modificado
Código:
<?php
defined('_JEXEC') or die('Restricted access');
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template.css" type="text/css" />
    
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/position.css" type="text/css" media="screen,projection" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/layout.css" type="text/css" media="screen,projection" />
	
	
	<!--[if lte IE 6]>
		<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/ieonly.css" rel="stylesheet" type="text/css" />
	<![endif]-->
	<!--[if IE 7]>
		<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/ie7only.css" rel="stylesheet" type="text/css" />
	<![endif]-->
	
</head>
<body>
	<div id="all">
		<div id="header">
			<jdoc:include type="modules" name="user3" />
			<jdoc:include type="modules" name="user4" />
          <!--
			<div id="breadcrumbs">
				<p>
					<?php echo JText::_('You are here'); ?>
					<jdoc:include type="modules" name="breadcrumb" />
				</p>
			</div>
              -->
		</div><!-- end header -->
		
		<div id="wrapper" style="border:1px #000 solid">
            	
			<div id="cuerpo" style=" width:78%; border:1px solid #F90; float:left">
                <jdoc:include type="modules" name="galeria" />
			

			<jdoc:include type="component" />
                
                
			</div><!-- end cuerpo -->      
      	<div id="right">  <!-- menu de la derecha -->

		 	 <jdoc:include type="modules" name="right" style="beezDivision" headerLevel="3" />

			 </div><!-- right -->       
       	
         
                 
                      
		</div><!-- wrapper -->
            
		

		
	</div><!-- all -->
    
    
    <div id="footer" style="clear:both">
        
			<p class="syndicate">
				
                <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/images/uio_peq.jpg" />
		
			</p>

		</div><!-- footer -->

	<jdoc:include type="modules" name="debug" />

</body>
</html>
Y este los css principales:
position.css
Código:
*
{
	margin: 0;
	padding: 0;
}

body
{
	background: #FFFFFF;
	color: #000000;
	font-family: arial, helvetica, sans-serif;
	font-size: 100.1%;
	padding: 0px;
	text-align: center;
}

/* ################   Position ################  */
#all
{
	background: #FFFFFF;
	border: solid 0px #DBB0CD;
	color: #000000;
	font-size: 0.8em;
	margin: 0 auto;
	max-width: 993px;
	padding: 0 3px 3px 3px;
	text-align: left;
}



#header
{
	background: #fff;
	color: #000000;
	margin: 0;
	position: relative;
	text-align: right;
	border-bottom: solid 4px #ccc;
}

#contentarea,#contentarea2
{
	border: solid 0px #000;
	margin: 0;
	padding: 0px 0px 0px 0px;
	position: relative;
	overflow: hidden;
}
#wrapper { margin: 0 10px; /* background: #fff url(../images/galeria_fnd.png) no-repeat top left;  width:712px; height:305px */}
#left
{
	background: #FFFFFF;
	border-right: solid 0px #EEEEEE;
	float: left;
	margin: 20px 0 0 0;
	width: 21%;
}

#right
{
	color: #000;
	float:right;
	width:20%;
	padding-top:10px

}

#main2
{
	background: #fff;
	width:64%;
	padding: 25px 20px 20px 20px;
	position: relative;
	min-height:520px;
	float:left;


}

#main
{
	background: #fff;
	margin: 0 0px 0 0;
	position: relative;
	float:left;
	width:78%;
}

/* ###################### generell ###################### */
.unsichtbar,.u2,.invisible , .unseen
{
	display: inline;
	height: 0px;
	left: -3000px;
	position: absolute;
	top: -2000px;
	width: 0px;
	z-index: 200;
}

.wrap
{
	border: 0;
	clear: both;
	float: none;
	font-size: 1px;
	height: 0;
	line-height: 1px;
	margin: 0;
	padding: 0;
	visibility: hidden;
}

#logo
{
	font-size: 1em !important;
	font-weight: bold !important;
	position: relative;
	text-align: left;
	text-transform: none !important;
	z-index: 0;
	margin-top: 1em;
}

#logo  img { display: block; }

#logo span
{
	display: block;
	margin: 0px 0 0 100px !important;
	border-bottom: solid 1px #666;
}

/* ###############  main * ########################### */
/* position */
.leading
{
	/* background: #EFDEEA url(../images/biene.gif) no-repeat top left; */
	border: solid 1px #CCCCCC;
	color: #000000;
	margin: 30px 0px 10px 0px;
	padding: 20px 20px 40px 120px;
	position: relative;
}

.leading_separator
{
	border-bottom: solid 0px #333333;
	display: block;
	height: 10px;
	margin: 0 0 0px 0;
}

.article_separator
{
	border: solid 1px #333333;
	display: none;
	margin: 0px 0 0px 0;
}

.blog { padding: 0; }

.cols1
{
	display: block;
	float: none !important;
	margin: 0 !important;
}

.cols2 { width: 45%; }
.cols3 { width: 30%; }

.column1 , .column2
{
	border: solid 0px #D4A7C5;
	margin: 0 5px 0 0;
	position: relative;
}

.column2 , .column1
{
	float: left;
	margin: 0;
}

.column2
{
	float: right;
	margin: 0;
	width: 45%;
}

.article_row
{
	margin: 0px 0 0px 0;
	padding: 0;
	overflow: hidden;
}

.article_column
{
	border: solid 0px #ccc;
	padding: 10px 10px 10px 0;
}

.row_separator2
{
	display: block;
	clear: both;
	margin: 0;
	border: solid 0px;
}
Código:
template.css
body
{
	background: #FFFFFF;
	color: #000000;
	font-family: arial, helvetica, sans-serif;
	font-size: 100.1%;
	padding: 0px;
	text-align: center;
}



body.contentpane {

width : auto;
margin : 10px;
line-height : 1.4em;
text-align: left;
}

/* TOC */
table.contenttoc{
	float: right;
}

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
	text-align:left;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}
/* sobrescritura de estilos */
.nsp_bottom_interface .pagination li, .nsp_top_interface .pagination li {
-moz-border-radius:2px 2px 2px 2px;
background:none repeat scroll 0 0 #4379BA;
cursor:pointer;
float:left;
height:16px;
margin-right:2px;
text-indent:-999em;
width:16px;
}
Perdonar por el chorizo pero no veía otra forma de mostrar el código.
Mil gracias por la ayuda

De todas formas quiero volver a decir que he probado con otras plantillas de Joomla y sucede lo mismo (con las que estan maquetadas con tablas no pero con las que tienen DIVS si), por ello creo que el problema esta en el K2 no en el Css del theme pero bueno ahí lo dejo por si acaso.

Acabo de comprobar quitando el K2 como página de inicio y poniendo las últimas noticias que vienen por defecto en Joomla y veo que también en algunos casos el dichoso menú de la derecha se descoloca, por lo que parece que va a ser del CSS no del K2 sino del theme , pero no entiendo como pasa con tanto themes que se suponene están más que probados. Es mas , puedo asegurar que con los únicos themes que no pasa son los que además de los DIvs usan tables para maquetar , cosa que intento no tener que hacer.
__________________
Videotutoriales de Drupal

Última edición por Dundee; 19/11/2010 a las 05:41 Razón: ampliar información
  #4 (permalink)  
Antiguo 19/11/2010, 06:07
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 22 años, 5 meses
Puntos: 8
Respuesta: se rompe el diseño cuando utilizo K2

Un amigote muy generosamente me dejo en su hosting un espacio donde poder subir el código html para poder ver online mi problema, este es el enlace :
http://www.andanuncios.com/prueba/
He recogido el código que el navegador tiraba y subido los css , fijarse como la columna de la derecha se descoloca , esto me está trayendo de cabeza.
Voy a postear esto en el foro de CSS que creo que es donde debería de estar.
Mil gracias
__________________
Videotutoriales de Drupal
  #5 (permalink)  
Antiguo 19/11/2010, 11:39
Avatar de Larenz
Colaborador
 
Fecha de Ingreso: enero-2007
Ubicación: Nicaragua
Mensajes: 1.398
Antigüedad: 17 años, 10 meses
Puntos: 55
Respuesta: se rompe el diseño cuando utilizo K2

El problema se debe porque en el div#central hace falta dar cierre con un </div>. Ya que el div#right está dentro del div#central y debería de estar afuera.

Según veo las propiedades del div central es así:

Código CSS:
Ver original
  1. #central {
  2.     border: 1px solid #FF0000;
  3.     float: left;
  4.     margin-bottom: 50px;
  5.     width: 70&#37;;
  6. }

y el ID de la columan derecha:

Código CSS:
Ver original
  1. #right {
  2.     float: left;
  3.     overflow: hidden;
  4.     width: 20%;
  5. }

Como te decía anteriormente, puedes estar omitiendo un </div> de cierre y esto hace que el id right se meta dentro del id central.

Una pregunta, ¿el link demo que pusistes es el mismo contenido y error que en local? Ya que veo que en este ejemplo de código que dejastes en tu post no cuadran los nombres de los id con los que aparecen en el link. Deberías de checar eso para así ayudarte con los nombres de las clases o id que son.

Te recomendaría subieras el sitio tal y como lo tienes en local para darte una mano.
__________________
¡No lo sé todo! Pero comencé como tú, ¡sin saber nada!
Encuéntrame en Facebook: Perfil + Página
  #6 (permalink)  
Antiguo 19/11/2010, 12:02
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 22 años, 5 meses
Puntos: 8
Respuesta: se rompe el diseño cuando utilizo K2

Cita:
Iniciado por Larenz Ver Mensaje
Te recomendaría subieras el sitio tal y como lo tienes en local para darte una mano.
Como sabrás el contenido de Joomla varía según el componente que cargue en el centro (en este caso) , pero el problema sucede cuando carga SOLAMENTE el componente K2 que es el html que he subido en la demo.

Voy a ver eso que dices y ahora comento.

Acabo de comprobar mirando el html que tira el navegador que si esta cerrado central
</div> <!-- fin central --> justo antes de abrir el div cuya id es right

Gracias
__________________
Videotutoriales de Drupal
  #7 (permalink)  
Antiguo 12/08/2011, 03:44
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 2
Respuesta: se rompe el diseño cuando utilizo K2

Se que a lo mejor es un poco viejo; pero... lo ha solucionado?

Me pasa exactamente igual:
http://www.pcrednet.com/portatiles/reparacion-portatiles

Si entras en Blog se ve el menu de la derecha que solo debe mostrar con el blog; pero si entras en un artículo del blog; desaparecen los módulos de la derecha.

Pensaba que el problema era con Joomsef, pero estoy viendo que tiene que ver con k2.
Uso un plantilla gavick pro.

Gracias.

Etiquetas: cuando, diseño
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 16:02.