Foros del Web » Creando para Internet » CSS »

como maquetar con div en filas y columnas sin espacio en blanco

 Estas en el tema de como maquetar con div en filas y columnas sin espacio en blanco en el foro de CSS en Foros del Web. Hola , quiero maquetar con div en filas y columnas. pero quiero eliminar espacio en blanco entre columna de fila1 a fila2 La verdad es ...
  #1 (permalink)  
Antiguo 21/06/2012, 13:22
 
Fecha de Ingreso: septiembre-2010
Mensajes: 41
Antigüedad: 14 años, 2 meses
Puntos: 0
como maquetar con div en filas y columnas sin espacio en blanco
Hola ,
quiero maquetar con div en filas y columnas.
pero quiero eliminar espacio en blanco entre columna de fila1 a fila2
La verdad es que no se explicar bien a si que pongo el codigo y al visualizar creo que mi pregunta va a ser mas clara.
<!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">
div#contenedor{

float:left !important;
width: 500px;
border:1px solid black;

}
div#capa1{
border:1px solid black;

float: left !important;
padding:20px;

}



</style>
</head>

<body>
<div id="contenedor">
<div id="capa1"> <h2>capa1</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa2</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa3</h2>
hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa4</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>

<div id="capa1"><h2>capa5</h2>
hola<br />hola<br /></div>
<div id="capa1"><h2>capa6</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa7</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa8</h2>
hola<br />hola<br />hola<br />hola<br /></div>

<div id="capa1"><h2>capa9</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1">
<h2>capa10</h2>
hola<br />hola<br /></div>
<div id="capa1"><h2>capa11</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1">
<h2>capa12</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>

<div id="capa1"><h2>capa13</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa14</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa15</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa16</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
</div>





</body>
</html>
Código HTML:
<!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">
div#contenedor{

float:left !important;
width: 500px;
border:1px solid black;

}
div#capa1{
border:1px solid black;

float: left !important;
padding:20px;

}



</style>
</head>

<body>
<div id="contenedor">
<div id="capa1"> <h2>capa1</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa2</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa3</h2>
hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa4</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>

<div id="capa1"><h2>capa5</h2>
 hola<br />hola<br /></div>
<div id="capa1"><h2>capa6</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa7</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa8</h2>
hola<br />hola<br />hola<br />hola<br /></div>

<div id="capa1"><h2>capa9</h2>
 hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1">
<h2>capa10</h2>
hola<br />hola<br /></div>
<div id="capa1"><h2>capa11</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1">
<h2>capa12</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>

<div id="capa1"><h2>capa13</h2>
 hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa14</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa15</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
<div id="capa1"><h2>capa16</h2>
hola<br />hola<br />hola<br />hola<br />hola<br />hola<br />hola<br /></div>
</div>





</body>
</html>
alguien puede echar me una mano
  #2 (permalink)  
Antiguo 21/06/2012, 13:49
 
Fecha de Ingreso: noviembre-2003
Mensajes: 61
Antigüedad: 21 años
Puntos: 0
Respuesta: como maquetar con div en filas y columnas sin espacio en blanco
La cuestión es que se esta armando mal el tetris que tienes allí.
A ver, para ayudarte, creo que quieres que capa 5 aparezca justo debajo de capa 1 verdad?
  #3 (permalink)  
Antiguo 21/06/2012, 13:52
 
Fecha de Ingreso: septiembre-2010
Mensajes: 41
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: como maquetar con div en filas y columnas sin espacio en blanco
Hola killerchess , exacto lo que quiero pero no se como hacerlo-
alguna idea??
  #4 (permalink)  
Antiguo 21/06/2012, 16:01
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: como maquetar con div en filas y columnas sin espacio en blanco
¿Necesita presentar una serie de datos relacionados, ordenados en filas y columnas de la forma conocida comúnmente como tabulada?
Use la etiqueta (tag) table y asociadas, que para eso existen.

¿Que no son ese tipo de datos?
Pues no piense de forma "entablada".
Enfoque su problema suprimiendo de su mentalidad las tablas (y sus ventajas/limitaciones).

¿Quiere hacer algo como ésto?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 21/06/2012, 17:26
 
Fecha de Ingreso: septiembre-2010
Mensajes: 41
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: como maquetar con div en filas y columnas sin espacio en blanco
kseso muchissimas gracias , has dado en el clavo, ya me quedo con la pagina para otras cosas.

y ademas primera vez en mi vida tan rápido.
Última edición por taldigi; 22/06/2012 a las 01:49
  #6 (permalink)  
Antiguo 22/06/2012, 01:58
 
Fecha de Ingreso: septiembre-2010
Mensajes: 41
Antigüedad: 14 años, 2 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
  #7 (permalink)  
Antiguo 22/06/2012, 06:05
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: como maquetar con div en filas y columnas sin espacio en blanco
Mejor monte una página de prueba y genere contenido acorde con el que tendrá en la realidad y pase el enlace.

Por cierto, creo que el uso que hace de la etiqueta <hr /> no es el correcto.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 22/06/2012, 09:08
 
Fecha de Ingreso: septiembre-2010
Mensajes: 41
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: como maquetar con div en filas y columnas sin espacio en blanco
Hola kseso y todos que lo lean.
Esta solucionado.
Cuando estaba montando un codigo de prueba me dado la cuenta que
div contenido y div columnas tengo repetido y buscando en codigo php me he dado la cuenta que dentro de loop se llama a la misma funcion y por esto esta repetido
divs
lo he puesto fuera de la funcion y funciona casi perfecto.
asi


<div id="contenedorcategorias">
<div id="columnascategorias">
<?php
$this->recurseCategories( 0, 0, $this->cats,$this->Itemid);
?>
</div></div>


digo casi porque al final las columnas se me alinean como ala derecha y no a la izquierda.
Pero no esta mal , voy a intentar solucionarlo .

muchas gracias a http://ksesocss.blogspot.com
muy bueno

pero no funciona en maldito explorer

has mencionado algo en tu pagina que existen librerias de javascript sobre esto .
Conozcas algunas
Última edición por taldigi; 22/06/2012 a las 10:24
  #9 (permalink)  
Antiguo 01/07/2012, 04:21
 
Fecha de Ingreso: septiembre-2010
Mensajes: 41
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: como maquetar con div en filas y columnas sin espacio en blanco
pare que esto funcione en Explorer
mirad esto
http://www.forosdelweb.com/f53/css3-explorer-count-column-como-hacerlo-1000836/

Etiquetas: blanco, columnas, espacio, filas, html, maquetar
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:46.