espacio de las columnas de los articulo

fanny0 · #1 (**permalink**) 29/06/2009, 07:40

Espacios entre las columnas de abajo de los articulos

he intentado de todo pero aun no se bien por que no me quedan iguales los espacios o el espacio que le doy a cada columna de los articulos

alguien ve algo que yo no haya visto???

http://publidis.cl/joom/index.php?op...id=5&Itemid=61

muchas gracias!!

willyfc · #2 (**permalink**) 29/06/2009, 08:05

Podrías graficar bien lo que pasa, solo en visto un espacio blanco entre las 3 columnas de abajo pero no estoy seguro de si eso debe o no ir ahí ya que colocaste entre cada div un span con una class que se llama separator.O sea no se si te refieres a eso.

#3 (**permalink**) 29/06/2009, 08:07

Siempre ie da problemas, en Firefox se ve perfectamente...

fanny0 · #4 (**permalink**) 29/06/2009, 08:16

ocupo de tool bar web developer para ver detalles... no, pero en realidad no me refiero a los espacios que separan, yo encuentro que están bien, si no que al ancho de cada uno lo doy 30%...ustedes los ven a todos iguales, por que a mi me parece que el del medio se ve un poquitin más chico..será por los espacios que separan??...

fanny0 · #5 (**permalink**) 29/06/2009, 08:17

incluso el del costado left o el más cercano al costado left encuentro que se ve mucho más ancho que los otros...

Mikmoro · #6 (**permalink**) 29/06/2009, 08:29

Si, el espacio derecho es más pequeño, pero es que ahí hay un lio considerable: tienes una tabla arriba de 579px; luego debajo hay tres tablas de 213px cada una, con diversos padding, etc.
Pero lo peor de todo es que tienes cada caja en un div y dentro de estos en cada uno una tabla. El jaleo es importante.

Tú sólo dibuja cómo quieres que quede ese trozo y alguien te regalará el trozo de código necesario, con la única promesa de que lo estudiarás para entenderlo y aplicarlo en el futuro.

willyfc · #7 (**permalink**) 29/06/2009, 08:29

Entonces lo que quieres es que las cajas se vean exactamente iguales una al lado de la otra?, pienso que no serían necesarias tantas clases y la tabla no se para que la utilizas. Tal vez este ejemplo te sirva de algo:

Código html:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.articulos{width:500px; min-height:150px; height:auto!important; height:150px; background:transparent; overflow:auto; border:1px solid #333;}
.cajas{width:30%;min-height:140px; height:auto!important; height:140px; float:left; background:#666; margin:5px 8px;}
</style>
</head>
 
<body>
<div class="articulos">
    <div class="cajas"></div>
    <div class="cajas"></div>
    <div class="cajas"></div>
</div>
</body>
</html>

EDITO: Sorry por el choque Mik.

Mikmoro · #8 (**permalink**) 29/06/2009, 08:32

¿Lo ves? hasta sin decir cómo lo quieres

Perfecto, willyfc

willyfc · #9 (**permalink**) 29/06/2009, 08:39

Gracias Mik. Habrá que esperar para ver si eso le sirve.

fanny0 · #10 (**permalink**) 29/06/2009, 09:14

no las tablas...son solo para vizualizar más menos el ancho...

acá está el css ...es de una template ya existente, yo solo lo estoy modificando

Cita:

/**
* @version $Id: position.css 10387 2008-06-03 10:59:16Z pasamio $
* @author Design & Accessible Team ( Angie Radtke / Robert Deutz )
* @package Joomla
* @subpackage Accessible-Template-Beez
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant to the
* GNU General Public License, and as distributed it includes or is derivative
* of works licensed under the GNU General Public License or other free or open
* source software licenses. See COPYRIGHT.php for copyright notices and
* details.
*/

*
{
margin: 0;
padding: 0;
}

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

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

#page { }

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

}

#contentarea,#contentarea2
{
border: solid 0px #000;
margin: 0;
padding: 0px 0px 0px 0px;
position: relative;
overflow: hidden;
}
#wrapper { margin: 0 0 0 0%}
#left
{
background: #FFF;
border-right: solid 0px #009900;
float: left;
margin: 0px 0 0 0;
width: 0%;
}

#right
{
color: #000;
float:left;
width: 0%;
padding-top:0px

}

#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;
padding: 0px 0px 0px 0px;
position: relative;
}

/* ###################### 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: #ffffff ;
border: solid 0px #ffffff;
color: #666666;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
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: 30%; }
.cols3 { width: 30%; }

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

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

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

.column3
{
float: right;
margin: 0;
width: 30%;
}

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

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

.row_separator2
{
display: block;
clear: both;
margin: 0;
border: solid 0px;
}

fanny0 · #11 (**permalink**) 29/06/2009, 09:15

este es el index.php

Cita:

<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

defined('_JEXEC') or die('Restricted access');

$url = clone(JURI::getInstance());
$showRightColumn = $this->countModules('user1 or user2 or right or top');
$showRightColumn &= JRequest::getCmd('layout') != 'form';
$showRightColumn &= JRequest::getCmd('task') != 'edit'
?>
<?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/beez/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/position.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/layout.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/general.css" type="text/css" />
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/template_rtl.css" type="text/css" />
<?php endif; ?>


<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/beez/javascript/md_stylechanger.js"></script>
</head>
<body>
<div id="all">
<div id="header">
<h1 id="logo">
<img src="<?php echo $this->baseurl ?>/templates/beez/images/logo-ancona_03.png" border="0" alt="<?php echo JText::_('Logo'); ?>" width="300" height="50" />
<span class="header1"><?php echo JText::_(''); ?></span>
</h1>

<ul>
<li><a href="#content" class="u2"><?php echo JText::_('Skip to Content'); ?></a></li>
<li><a href="#mainmenu" class="u2"><?php echo JText::_('Jump to Main Navigation and Login'); ?></a></li>
<li><a href="#additional" class="u2"><?php echo JText::_('Jump to additional Information'); ?></a></li>
</ul>

<h2 class="unseen">
<?php echo JText::_('Search, View and Navigation'); ?>
</h2>

<div id="fontsize">
<div id="breadcrumbs">
<p>
<jdoc:include type="modules" name="breadcrumb" />
</p>
</div>

</div>

<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="user4" />
<div class="wrap"> </div>
</div>

<div id="<?php echo $showRightColumn ? 'contentarea2' : 'contentarea'; ?>">

<div id="wrapper">
<div id="<?php echo $showRightColumn ? 'main2' : 'main'; ?>">
<?php if ($this->getBuffer('message')) : ?>
<div class="error">
<h2>
<?php echo JText::_('Message'); ?>
</h2>
<jdoc:include type="message" />
</div>
<?php endif; ?>

<jdoc:include type="component" />
</div>

<?php if ($showRightColumn) : ?>
<div id="right">

<a name="additional"></a>
<h2 class="unseen">
<?php echo JText::_('Additional Information'); ?>
</h2>

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

</div>
<?php endif; ?>

<div class="wrap"></div>
</div>
</div>

<div id="footer">
<p class="syndicate">
<jdoc:include type="modules" name="syndicate" />
</p>

<p> </p>

<div class="wrap"></div>
</div>
</div>

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

</body>
</html>