Foros del Web » Creando para Internet » CSS »

Div autoajustable - repeat x y repeat y

Estas en el tema de Div autoajustable - repeat x y repeat y en el foro de CSS en Foros del Web. Hola amigos!! Tengo un div padre que en su interior obtengo una tabla de 3x3 también echa con divs el div padre tiene una anchura ...
  #1 (permalink)  
Antiguo 23/01/2009, 03:03
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Div autoajustable - repeat x y repeat y

Hola amigos!!
Tengo un div padre que en su interior obtengo una tabla de 3x3 también echa con divs
el div padre tiene una anchura de 785px
y quiero que en el 3x3 se me auto adapte.

Les dejo el codigo HTML

Código:
        <div id="right">
            <div id="top_left"></div>   
            <div id="top_center"></div>   
            <div id="top_right"></div>   

            <div id="div_clear"></div>

            <div id="middle_left"></div>   
            <div id="middle_center">&nbsp;</div>   
            <div id="middle_right"></div>   

            <div id="div_clear"></div>

            <div id="bottom_left"></div>   
            <div id="bottom_center"></div>   
            <div id="bottom_right"></div>   
        </div>

Codigo CSS
Código:
	#right{
		position:relative;
		float:left;
		border: red thin solid;
		width:785px;
		height:auto;
		margin-left:10px;
	}
		#right #top_left{
			position:relative;
			float:left;
			background-image:url(../img/content/top_left.gif);
			width:7px;
			height:7px;
		}
		#right #top_center{
			position:relative;
			float:left;
			background-image:url(../img/content/top_center.gif);
			background-repeat:repeat-x;
		}
		#right #top_right{
			position:relative;
			float:right;
			background-image:url(../img/content/top_right.gif);
			width:7px;
			height:7px;
		}
		

		#right #middle_left{
			position:relative;
			float:left;
			background-image:url(../img/content/middle_left.gif);
			background-repeat:repeat-y;
		}
		#right #middle_center{
		}
		#right #middle_right{
			position:relative;
			float:right;
			background-image:url(../img/content/middle_right.gif);
			background-repeat:repeat-y;
		}


		#right #bottom_left{
			position:relative;
			float:left;
			background-image:url(../img/content/bottom_left.gif);
			width:7px;
			height:7px;
		}
		#right #bottom_center{
			position:relative;
			float:left;
			background-image:url(../img/content/bottom_center.gif);
			background-repeat:repeat-x;
		}
		#right #bottom_right{
			position:relative;
			float:right;
			background-image:url(../img/content/bottom_right.gif);
			width:7px;
			height:7px;
		}
no consigo que el top_center y el bottom_center se me alarguen o repitan la imagen en horizontal y tampoco que le middle_left y el middle_right se me repitan en vertical




Como podeis observar las esquinas estan bien, pero las partes centrales nop



a ver como puedo hacerlo, gracias!!!!!

Última edición por Laufwerk; 23/01/2009 a las 05:14
  #2 (permalink)  
Antiguo 23/01/2009, 05:15
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

seguro que lo veis rapido, ayuda please!
  #3 (permalink)  
Antiguo 23/01/2009, 05:29
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Div autoajustable - repeat x y repeat y

si tenes que tabular datos, no te vuelvas loco/a utiliza una tabla y listo!

  #4 (permalink)  
Antiguo 23/01/2009, 05:45
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

pero yo se que se puede, verdad?
  #5 (permalink)  
Antiguo 23/01/2009, 05:49
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Div autoajustable - repeat x y repeat y

si, pero enrrollarte haciendo mil div para crear una tabla, para mi es una tontería.
  #6 (permalink)  
Antiguo 23/01/2009, 05:52
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: Div autoajustable - repeat x y repeat y

¿Realmente vas a mostrar datos tabulados? ¿qué es lo que vas a mostrar ahí?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 23/01/2009, 05:56
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

solo texto, por lo que solo me interesa alargar en y y en x, pero no se pq no me funciona
  #8 (permalink)  
Antiguo 23/01/2009, 06:01
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: Div autoajustable - repeat x y repeat y

Yo tampoco, ya que debería. ¿Puedes poner un link donde verlo? es que sin ver las imágenes no será fácil saber si está funcionando o no el repeat.

Bueno: ¿has visto que en las de los lados tienes indicada una altura y la del centro no?
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 23/01/2009, 07:19
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y



El codigo CSS para lo que se ve en la imagen es el siguiente:

Código:
	#main #right{
		position:relative;
		float:left;
/*		border: red thin solid;*/
		width:785px;
		height:auto;
		margin-left:10px;
	}
		#main #right #top_left{
			position:relative;
			float:left;
			background-image:url(../img/content/top_left.gif);
			width:7px;
			height:7px;
		}
		#main #right #top_center{
			position:relative;
			float:left;
			background:url(../img/content/top_center.gif) left repeat-x !important;
/*			border: red thin solid;*/
			height:7px;
			width:400px;
		}
		#main #right #top_right{
			position:relative;
			float:right;
			background-image:url(../img/content/top_right.gif);
			width:7px;
			height:7px;
		}
		

		#main #right #middle_left{
			position:relative;
			float:left;
			background-image:url(../img/content/middle_left.gif);
			background-repeat:repeat-y;
			width:7px;
/*			border:red thin solid;*/
			height:100px;
		}
		#main #right #middle_center{
			position:relative;
			float:left;
/*			border:green thin solid;*/
			width:771px;
		}
		#main #right #middle_right{
			position:relative;
			float:left;
			background-image:url(../img/content/middle_right.gif);
			background-position:right top;
			background-repeat:repeat-y;
			width:7px;
/*			border:red thin solid;*/
			height:100px;
		}


		#main #right #bottom_left{
			position:relative;
			float:left;
			background-image:url(../img/content/bottom_left.gif);
			width:7px;
			height:7px;
		}
		#main #right #bottom_center{
			position:relative;
			float:left;
			background-image:url(../img/content/bottom_center.gif);
			background-repeat:repeat-x;
			height:7px;
/*			border:red thin solid;*/
			width:400px;
		}
		#main #right #bottom_right{
			position:relative;
			float:right;
			background-image:url(../img/content/bottom_right.gif);
			width:7px;
			height:7px;
		}
Como podreis observar, en top_center y bottom_center tiene asigando un width fijo de 400px, en el momento que yo le pongo auto no me pinta nada

También vereis que en el middle_left y middle_right tambié tiene un height asignado de 100px, me pasa lo mismo, en cuanto le pongo auto, no se me ve.

En los dos casos no me repite la imagen de 1px horizontalmente ni verticalmente.

Saludos!
  #10 (permalink)  
Antiguo 23/01/2009, 08:46
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

help please!!!
no tengo cojones a sacarlo.
He probado en poner en el body
background:url(../img/content/bottom_center.gif) repeat-x left;

y si que me la repite a lo ancho de la pantalla, pero no entiendo porque entonces no me lo hace dentro de un div?

es cuestion de psitions y floats?



Gracias!!!
  #11 (permalink)  
Antiguo 23/01/2009, 09:21
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: Div autoajustable - repeat x y repeat y

Te decía que es difícl sin ver las imágenes que usas, como esta (img/content/bottom_center.gif), no sin ver la imagen del resultado.
Pon el HTML incluyendo la cabecera que usas e intento ayudarte a ver si damos con el problema.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 23/01/2009, 10:00
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

Ok
Ahi va el HTML
Código:
<!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>
 <!-- Estilos de la web -->
 <link rel="stylesheet" type="text/css" href="css/default.css"> </head>
 <script src="scripts/funciones.js" type="text/javascript"></script>
</head>

<body>
<div id="wrap">
    <div id="header">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
    
    <div id="div_clear"></div>
    
    <div id="main">
        <div id="left">
            <div id="top"></div>
     
            <div id="div_clear"></div>
           
            <div id="middle">
                <ul> 
                    <li  class="carpeta">Usuario 1</li>
                    <ul >
                        <li class="pagina"><a onclick='cargarPagina("pag1.txt","c:\\prueba1")'>Pagina 1</a></li>
                        <li class="pagina"><a onclick='cargarPagina("pag2.txt","c:\prueba2")'>Pagina 2</a></li>
                        <li class="pagina"><a onclick='cargarPagina("pag3.txt","c:\prueba3")'>Pagina 3</a></li>
                    </ul>
                </ul>
                <ul> 
                    <li  class="carpeta">Usuario 2</li>
                    <ul >
                        <li class="pagina"><a onclick='cargarPagina("pag1.txt","c:\prueba1")'>Pagina 1</a></li>
                        <li class="pagina"><a onclick='cargarPagina("pag2.txt","c:\prueba2")'>Pagina 2</a></li>
                    </ul>
                </ul>
            </div>
       
            <div id="div_clear"></div>
         
            <div id="bottom"></div>   
        </div>
        
        <div id="right">
            <div id="top_left"></div>   
            <div id="top_center"></div>   
            <div id="top_right"></div>   

            <div id="div_clear"></div>

            <div id="middle_left"></div>   
            <div id="middle_center">&nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf  sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
            &nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf  sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
            &nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf  sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
            &nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf  sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
            &nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf  sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
            &nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf  sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
            &nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf  sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
            </div>   
            <div id="middle_right"></div>   

            <div id="div_clear"></div>

            <div id="bottom_left"></div>   
            <div id="bottom_center"></div>   
            <div id="bottom_right"></div>   
        </div>
    
    </div>
    
    <form name="myform" method="post" action="destino.php">
    	<input type="text" name="myFileName" style="visibility:hidden">
        <input type="text" name="myPath" style="visibility:hidden" >
        <input type="submit" style="visibility:hidden"  />
    </form> 
    
    <div id="div_clear"></div>
    
    <div id="footer">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>

</div>
</body>
</html>
y el CSS
Código:
@charset "utf-8";
/* CSS Document */
body{
	background-color:#FFFFFF;
	margin:0 auto;
	border-top:#b2b2b2 thin solid;
	font-family:Arial, Helvetica, sans-serif;	
}

#wrap{
	margin: 0 auto;
/*	border: orange thin solid;*/
	width:1000px;
	height:auto;
}

#div_clear{
	clear:both;
}


/*H E A D E R*/



#header{
	margin: 0 auto;
	/*border: red thin solid;*/
	width:1000px;
	height:28px;
}

	#header #left{
		/*border: red thin solid;*/
		background-image:url(../img/header/left.gif);
		width:5px;
		height:28px;
		float:left;
	}
	#header #center{
/*		border: red thin solid;*/
		background-image:url(../img/header/center.gif);
		background-repeat:repeat-x;
		height:28px;
		width:99%;
		float:left;
	}
	#header #right{
		/*border: red thin solid;*/
		background-image:url(../img/header/right.gif);
		width:5px;
		height:28px;
		float:right;
	}


/*M A I N*/



#main{
	position:relative;
	float:left;
	margin: 0 auto;
	margin-top:10px;
	margin-bottom:10px;
/*	border: blue thin solid;*/
	width:1000px;
	height:auto;
}



/*M E N U*/


	#main #left{
		position:relative;
		float:left;
		/*border: red thin solid;*/
		width:200px;
		height:auto;
		float:left;
	}
	/* Menu de 1x3*/
		#main #left #top{
			background-image:url(../img/menu/border/top.gif);
			background-repeat: repeat-x;
			background-position:left;
			width:200px;
			height:7px;
			position:relative;
			float:left
		}
		
		#main #left #middle{
			position:relative;
			float:left;
			background-image:url(../img/menu/border/middle.gif);
			background-repeat:repeat-y;
			height:auto;
/*			margin-right:20px;*/
			background-color:#f7f7f7;
			width:200px;
		}

		#main #left #bottom{
			background-image:url(../img/menu/border/bottom.gif);
			background-position:left bottom;
			background-repeat:no-repeat;
			width:200px;
			height:7px;
			position:relative;
			float:left
		}
		
		ul{
/*			border:red thin solid;*/
			padding:0;
			margin:0;
			padding-left:5px;
		}
		.carpeta{
			font-weight:bolder;
			font-size: 12px;
			padding-left: 17px;
			margin-left: 2px;
			margin-bottom: 5px;
			background:url(../img/menu/listas/folder.png) top left no-repeat;
			list-style:none;
		}
		.pagina{
			font-size: 11px;
			padding-left: 17px;
			margin-left: 2px;
			margin-bottom: 5px;
			background:url(../img/menu/listas/page.png) bottom left no-repeat;
			list-style:none;
		}


/*C O N T E N I D O     */


		
	#main #right{
		position:relative;
		float:right;
/*		border: red thin solid;*/
		width:785px;
		height:inherit;
		margin-left:10px;
	}
		#main #right #top_left{
			position:relative;
			float:left;
			background-image:url(../img/content/top_left.gif);
			width:7px;
			height:7px;
		}
		#main #right #top_center{
			position:relative;
			float:left;
			background:url(../img/content/top_center.gif) left repeat-x !important;
			/*border: red thin solid;*/
			height:7px;
			width:771px;
		}
		#main #right #top_right{
			position:relative;
			float:right;
			background-image:url(../img/content/top_right.gif);
			width:7px;
			height:7px;
		}
		

		#main #right #middle_left{
			position:relative;
			float:left;
			background-image:url(../img/content/middle_left.gif);
			background-repeat:repeat-y;
			width:7px;
			/*border:red thin solid;*/
			height:inherit;
		}
		#main #right #middle_center{
			position:relative;
			float:left;
			
/*			border:green thin solid;*/
			width:771px;
		}
		#main #right #middle_right{
			position:relative;
			float:left;
			background-image:url(../img/content/middle_right.gif);
			background-position:right top;
			background-repeat:repeat-y;
			width:7px;
/*			border:red thin solid;*/
			height:auto;
		}


		#main #right #bottom_left{
			position:relative;
			float:left;
			background-image:url(../img/content/bottom_left.gif);
			width:7px;
			height:7px;
		}
		#main #right #bottom_center{
			position:relative;
			float:left;
			background:url(../img/content/bottom_center.gif) repeat-x left;
			background-repeat:repeat-x;
			height:7px;
/*			border:red thin solid;*/
			width:auto;
		}
		#main #right #bottom_right{
			position:relative;
			float:right;
			background-image:url(../img/content/bottom_right.gif);
			width:7px;
			height:7px;
		}



/* F O O T E R*/


#footer{
/*	border: green thin solid;*/
	width:1000px;
	height:28px;
	padding:0 0 0 0 ;
	margin: 0 auto;
}
	#footer #left{
		/*border: red thin solid;*/
		background-image:url(../img/footer/left.gif);
		width:5px;
		height:28px;
		float:left;
	}
	#footer #center{
/*		border: red thin solid;*/
		background-image:url(../img/footer/center.gif);
		background-repeat:repeat-x;
		height:28px;
		width:99%;
		float:left;
	}
	#footer #right{
		/*border: red thin solid;*/
		background-image:url(../img/footer/right.gif);
		width:5px;
		height:28px;
		float:right;
	}
av er si damos con el problema
seguro que es una tonteria, luego nos tiraremos de los pelos, ejjejeje

Gracias!!1
  #13 (permalink)  
Antiguo 23/01/2009, 10:02
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

te subo el archivo de imagenes para que lo veas mejor img.rar

Gracias por tu tiempo
  #14 (permalink)  
Antiguo 23/01/2009, 10:10
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: Div autoajustable - repeat x y repeat y

Lo voy a mirar pero mientras corrige:
Cita:
<link rel="stylesheet" type="text/css" href="css/default.css"> </head>
<script src="scripts/funciones.js" type="text/javascript"></script>
</head>
¿Podrías hacer un zip en lugar de rar?
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 23/01/2009, 10:13
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

webEntera.zip


Gracias
  #16 (permalink)  
Antiguo 23/01/2009, 10:24
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: Div autoajustable - repeat x y repeat y

Sí, mira, tu error es de concepto y bastante sencillo: si el div central de contenido, el que tiene el texto, no esta dentro de los laterales, ¿por qué los laterales habrían de crecer porque lo haga el texto? Simplemente no lo hacen. El height inherit que has intentado no sirve de nada.

Esto se resuelve conteniendo esas cajas unas dentro de otras: primero la derecha, dentro de esta la izquierda y dentro de esta la central. Si no ves claro cómo hacerlo luego te lo paso corregido o te explico.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 23/01/2009, 10:35
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

seria perfecto que me pudieras pasar el codigo....

Gracias!!!
  #18 (permalink)  
Antiguo 23/01/2009, 11:31
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: Div autoajustable - repeat x y repeat y

Mira: en tu HTML ponlo así:
Cita:
<div id="middle_right">
<div id="middle_left">
<div id="middle_center">&nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
&nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
&nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
&nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
&nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
&nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
&nbsp; fsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsd ffsdf sdfsdfsd fsd fsdf sdf sdfsdf sdf sdfsdf sdf dsf dsfdsf dsfsdfdsfsdfsd fs dfsdf sd fsdfs dfdsf sdfsd<br />
</div>
</div>
</div>
y en la CSS cambia esto y ponlo así:
Cita:
#main #right #middle_left{
position:relative;
background: url(../img/content/middle_left.gif) repeat-y;
margin-right: 7px;
}
#main #right #middle_center{
position:relative;
width:771px;
margin-left: 7px;
}
#main #right #middle_right{
position:relative;
background: url(../img/content/middle_right.gif) repeat-y right top;
}
#main #right #bottom_center{
position:relative;
float:left;
background: url(../img/content/bottom_center.gif) repeat-x left;
height:7px;
width: 771px;
}
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 26/01/2009, 02:18
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

ya veo, lo que no queria era ponerle un width fijo a los divs centrales, pq entonces ya no es algo autoadaptable. Cuando quiera hacerlo mas grande tendré que buscar en todo el codigo el witdh y cambiarlo.

No hay ninguna otra forma?


Gracias de todos modos!!!
  #20 (permalink)  
Antiguo 26/01/2009, 03:49
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: Div autoajustable - repeat x y repeat y

Te lías. No tiene nada que ver: yo le he dejado el width que tú tenías en el contendor principal, y decías:
Cita:
Tengo un div padre que en su interior obtengo una tabla de 3x3 también echa con divs
el div padre tiene una anchura de 785px
¿Cómo vas a hacer que el interior sea adaptable si el div padre tiene una anchura fija?
__________________
Visita mi nueva web idplus.org
  #21 (permalink)  
Antiguo 26/01/2009, 03:51
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

pq ahora la tiene fija, pero si fuera width:auto;??? ya no funcionaria!!, verdad?
  #22 (permalink)  
Antiguo 26/01/2009, 03:52
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: Div autoajustable - repeat x y repeat y

Sí, claro que funcionaría, retocando un poco, lo necesario.
__________________
Visita mi nueva web idplus.org
  #23 (permalink)  
Antiguo 26/01/2009, 03:58
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

yo creo que tengo algo mal en mi codigo, esto de position:relative y el float:left.... quizas si el padre no lo tiene, los hijos se vuelven locos buscando anchuras y alturas
  #24 (permalink)  
Antiguo 26/01/2009, 04:07
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: Div autoajustable - repeat x y repeat y

Quizá si dijeras qué quieres conseguir "exactamente" alguien te podría ayudar.
__________________
Visita mi nueva web idplus.org
  #25 (permalink)  
Antiguo 26/01/2009, 07:18
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

Hola de nuevo!
Depués de romperme el coco y probar las mil y una, he dado con algo que se parece bastante a lo que quiero hacer, aunque no tenga la distribución de 3x3 como queria inicialmente

Web ejemplo, con ejemplo


Un saludo a todos y gracias por vuestro tiempo
  #26 (permalink)  
Antiguo 26/01/2009, 09:58
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Div autoajustable - repeat x y repeat y

A ver, dejame adivinar, quieres esquinas redondeadas? o algo asi? la verdad que te han dado bastante soluciones pero no te apegas a ninguna uhmmm.

Vamos a ver el site y a ver que te digo ok?
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #27 (permalink)  
Antiguo 26/01/2009, 10:07
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Div autoajustable - repeat x y repeat y

Asuuuuu estoy encontrando la mar de horrores en el site, ¿Pq usas tantos divs con el mismo ID? usa una clase -.- ¿De donde sacas que es bonito usar clear:both? voy corrigiendo algunas cosas y te paso las corecciones.


Saludos!!

Demonios, se perdió lo que postee =S ni modo lo reescribo.

Hice las correcciones del caso puedes descargarlas desde aqui

Te he corregido muchos errores de sintáxis, repetías muchos ids no debes repetir un ID luego, dentro de una lista, si anidas otra lista, lo haces dentro de un <li> no los pones de frente, te pongo la parte del CSS que he variado más:

Código:
#main #right{
		position:relative;
		float:right;
/*		border: red thin solid;*/
		width:785px;
		height:inherit;
		margin-left:10px;
	}
	
<-- he borrado todos los divs que había ahi y que no tenían nada que ver -->
	
	#main #right #contenedoro{
	position:relative;
	left:0;
	top:0;
	width:100%;
	min-height:100px;
	overflow:hidden;
	
	}

<--cree un div que va a contener la caja redondeada, le di un ancho de 100% para que se amolde al div de arriba además un min-height y un overflow:hidden, para que crezca hacia abajo si se sobrepasa el espacio. -->
	
	*html #main #right #contenedoro{
	width:775px;
	height:100px;
	overflow:visible;
	}

<-- hack para ie6 para que crezca hacia abajo, me olvide quitarle el height 775px, quítalo, no es necesario que esté ahí-->
	
	#main #right #contenedoro img.esquinaizquierda{
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	}
	
	#main #right #contenedoro img.esquinaderecha{
	position:absolute;
	right:0;
	top:0;
	z-index:10;
	}
	
	#main #right #contenedoro img.esquinabajoiz{
	position:absolute;
	left:0;
	bottom:0;
	z-index:10;
	}
	
	#main #right #contenedoro img.esquinabajodere{
	position:absolute;
	right:0;
	bottom:0;
	z-index:10;
	}
	
<-- aqui presta atención, he cerado 4 imágenes como las que tenías, pero no son las mismas son un poco más grandes, las metí en tu div, y luego le di una clase a cada una, según su clase, las imágenes se acomodarán en las esquinas, además tienen un z-index de 10 para que se coloquen delante del div que viene, cada vez que quieras redondear esquinas de un div del color de este mismo, solo copia y pega las imágenes, si las quieres de otro color, solo cambia el src de la imagen pero ponles las mismas clases, asi se acomodarán sea dodne sea-->

	
	
		
		#main #right #contenedoro #middle_center{
			position:relative;
			width:783px;
			height:100%;
			border:1px solid #cfcfcf;
			overflow:hidden;
						z-index:1;
			
		}

<--este es el único de los divs que quedó de lo que pusiste, le he puesto un ancho igual al del div right, pero restandole dos pixeles, ¿Por qué? porque si no se vería uno de los bordes que he puesto, los bordes irán para lo que sirve, delimitar de las esquinas ya se encargan las imágenes, el z-index es de 1 para que las imágenes estén encima.-->
		
				#main #right #contenedoro #middle_center p{
				position:relative;
				margin:0;
				padding:0;
				margin:7px;
				
}

<--el texto no lo vas a poner sobre el div directamente, eso no debería hacerse, ponlo sobre etiquetas p le he dado un margen de 5 sin especificar tamaño, pero antes les quité el margin y el padding, asi se amoldan al div que tienes y dejan un marco limpio de 7 pixeles.-->

Espero que te sirva, no he podido comprobarlo en ie6 porque no tengo esa basura aqui, pero en mi casa lo compruebo, auqnue debería servir.

Saludos y hasta luego!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Última edición por Dalvenjha; 26/01/2009 a las 11:27
  #28 (permalink)  
Antiguo 28/01/2009, 02:07
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div autoajustable - repeat x y repeat y

Merci!!!
Ya tenemos varias soluciones! asi que os lo dejo en vuestras manos cual querais utilizar.

Un saludo
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:45.