Foros del Web » Creando para Internet » CSS »

espacio de las columnas de los articulo

Estas en el tema de espacio de las columnas de los articulo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/06/2009, 08:40
Avatar de fanny0  
Fecha de Ingreso: noviembre-2004
Mensajes: 438
Antigüedad: 13 años, 1 mes
Puntos: 1
Pregunta espacio de las columnas de los articulo

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!!
  #2 (permalink)  
Antiguo 29/06/2009, 09:05
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: espacio de las columnas de los articulo

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.
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 29/06/2009, 09:07
lamek
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: espacio de las columnas de los articulo

Siempre ie da problemas, en Firefox se ve perfectamente...
  #4 (permalink)  
Antiguo 29/06/2009, 09:16
Avatar de fanny0  
Fecha de Ingreso: noviembre-2004
Mensajes: 438
Antigüedad: 13 años, 1 mes
Puntos: 1
Respuesta: espacio de las columnas de los articulo

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??...
  #5 (permalink)  
Antiguo 29/06/2009, 09:17
Avatar de fanny0  
Fecha de Ingreso: noviembre-2004
Mensajes: 438
Antigüedad: 13 años, 1 mes
Puntos: 1
Respuesta: espacio de las columnas de los articulo

incluso el del costado left o el más cercano al costado left encuentro que se ve mucho más ancho que los otros...
  #6 (permalink)  
Antiguo 29/06/2009, 09:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: espacio de las columnas de los articulo

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.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 29/06/2009, 09:29
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: espacio de las columnas de los articulo

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. .articulos{width:500px; min-height:150px; height:auto!important; height:150px; background:transparent; overflow:auto; border:1px solid #333;}
  7. .cajas{width:30%;min-height:140px; height:auto!important; height:140px; float:left; background:#666; margin:5px 8px;}
  8. </head>
  9.  
  10. <div class="articulos">
  11.     <div class="cajas"></div>
  12.     <div class="cajas"></div>
  13.     <div class="cajas"></div>
  14. </div>
  15. </body>
  16. </html>

EDITO: Sorry por el choque Mik.
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 29/06/2009, 09:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: espacio de las columnas de los articulo

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

Perfecto, willyfc
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 29/06/2009, 09:39
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: espacio de las columnas de los articulo

Gracias Mik. Habrá que esperar para ver si eso le sirve.
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 29/06/2009, 10:14
Avatar de fanny0  
Fecha de Ingreso: noviembre-2004
Mensajes: 438
Antigüedad: 13 años, 1 mes
Puntos: 1
Respuesta: espacio de las columnas de los articulo

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;
}
  #11 (permalink)  
Antiguo 29/06/2009, 10:15
Avatar de fanny0  
Fecha de Ingreso: noviembre-2004
Mensajes: 438
Antigüedad: 13 años, 1 mes
Puntos: 1
Respuesta: espacio de las columnas de los articulo

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; ?>
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ie7only.css" rel="stylesheet" type="text/css" />
<![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">&nbsp;</div>
</div><!-- end header -->

<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><!-- end main or main2 -->

<?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><!-- right -->
<?php endif; ?>

<div class="wrap"></div>
</div><!-- wrapper -->
</div><!-- contentarea -->

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

<p>&nbsp;</p>

<div class="wrap"></div>
</div><!-- footer -->
</div><!-- all -->

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

</body>
</html>
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 15:47.