Div autoajustable - repeat x y repeat y

[Dalvenjha]

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!!