Tema: como maquetar con div en filas y columnas sin espacio en blanco
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 22/06/2012, 01:58
taldigi
 
Fecha de Ingreso: septiembre-2010
Mensajes: 41
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: como maquetar con div en filas y columnas sin espacio en blanco
Hola Kseso , ya he pensado que solucionado pero me he encontrado con un problema bastante grande.
Todo funciona bien en un codigo puro html, pero cuando empiezas con loop for y pones <hr> o <br>
las cosas cambian todo y no se porque.
he intentado poner la idea en mi proyecto y me encontrado con varios problemas , asi que he hecho un simple script php para encontrar a que se debe , y he encontrado que cuando
dentro de div "columnas ",
que en mi caso lo he puesto "columnascategorias"
pongo pj. fila <hr> fila <hr> fila <hr> fila <hr>
se estropea todo diseno,
estoy con esto toda la manana, pero no puedo entender porque pasa esto
aqui pongo el script

Cita:

<!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">
#contenedorcategorias {
width: 90%;
max-width: 1170px;
min-width: 800px;
margin: 0 auto;
}
#columnascategorias {
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-fill: auto;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
column-count: 4;
column-gap: 15px;
column-fill: auto;
}
.unidadcategorias {
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
background: #E9EBED;
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px rgba(20,20,20, 0.4);
display: inline-block;
margin: 0 5px 20px;
padding: 10px;
}
#contenedorcategorias #columnascategorias .unidadcategorias img {
border-color: #C5C5C5 #FFFFFF #FFFFFF #C5C5C5!important;
border-style: solid!important;
border-width: 1px!important;
width: 100%!important;
max-width: 100%;
margin: 0!important;
padding: 0!important;
box-shadow: 0 0 transparent;
}
.unidadcategorias p {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.3;
font-family: 'Buda',sans-serif;
text-align: left;
color: #444;
}



</style>
</head>

<body>
<div id="contenedorcategorias">
<div id="columnascategorias">

<?php
$frase=array(
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"pruba<hr/> pruba<hr/> pruba<hr/> pruba<hr/> ",
"",
"pruba<hr/> pruba<hr/> "
);

for($i=0;$i<count($frase);$i++){
?>
<div class="unidadcategorias">
<img alt="Columnas Css" src="categories/1cat.jpg">
<p>
<?php echo $frase[$i];?>
</p>
</div>

<?php } ?>
</div>
</div>
<div style="clear: both;"></div>
</body>
</html>

tambien pongo por si acaso la pagina donde quiero implementarlo
http://misanuncios.16mb.com/

y por si acaso la funcion responsable de esto

Cita:
function recurseCategories( $id, $level, &$children,$itemid) {
// numero de anuncios introducidos en categoria he eliminado lo pongo si voy atener muchos anuncios $row->num_ads

if (@$children[$id]) {?>
<div id="contenedorcategorias">
<div id="columnascategorias">
<?php foreach ($children[$id] as $row) { ?>
<div class="unidadcategorias">
<?php
$link = JRoute::_("index.php?option=com_adsmanager&view=li st&catid=".$row->id."&Itemid=".$itemid);
if ($level == 0)
{
if (file_exists(JPATH_BASE."/images/com_adsmanager/categories/".$row->id."cat.jpg"))
echo '<a href="'.$link.'"><img class="imgcat" src="'.$this->get('baseurl').'/images/com_adsmanager/categories/'.$row->id.'cat.jpg" alt="'.$row->name.'" /></a>';
else
echo '<a href="'.$link.'"><img class="imgcat" src="'.$this->get('baseurl').'/components/com_adsmanager/images/default.gif" alt="'.$row->name.'" /></a>';
?>

<h2 class="adsmanager_main_cat"><a href="<?php echo $link; ?>" ><?php echo $row->name; ?></a></h2>
<?php
}
else
{

echo '<div style="clear: both; display:block;"><h3 class="adsmanager_sub_cat" style="clear: both;"> <a href="'.$link.'" style="clear: both;">'.$row->name.'</a><hr /></h3></div>';

}
if ($level == 0)
{
$this->recurseCategories( $row->id, $level+1, $children,$itemid);
}

?>
</div>
<div style="clear: both;"></div>
<?php

}

?>
</div></div>
<?php }
}
Última edición por taldigi; 22/06/2012 a las 02:47