Ver Mensaje Individual
  #4 (permalink)  
Antiguo 21/03/2009, 09:57
Avatar de jomaruro
jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: Desbordamientos y posición de capas

Hola:

No sé si esto es lo que quieres pero se descalabra menos, este es tu CSS modificado

Código:
 * {                                                /*    Añadir selector Universal */
    padding:0;
    margin: 0 auto;
}

body {														 		 			    
	color:#A6A292;					 	  				   
	background-color:#312E1D;
}	

img{
	border: none;
}

#contenedor{
	margin:1em;
	/*width: auto;*/                                /*  Quitar                  */
	width:770px;                                    /*  Dar un ancho concreto   */
}

#inireg{
	background:url(../images/up.jpg) top left no-repeat;
	height:49px;
	color:#787465;
	font-family:Tahoma,Arial;
	font-size:9px;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
}

#inireg a {
	-x-system-font:none;
	background:transparent url(../images/under.gif) repeat-x scroll left bottom;
	color:#BD9959;
	font-family:Tahoma,Arial;
	font-size:9px;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	padding:0;
	text-decoration:none;
}

#inireg a:hover {
	text-decoration:none;
}

#menu{
	height: auto;
	background-repeat: no-repeat;
	background-position: right top;
}

#menu ul{
	position: absolute;
	/*top: 10.9em;*/                                /*  Cambiar Este  */
	top:12.25em;                                    /*  Por Este      */
	left:2.5em;                                     /*  Añadir        */
}

#menu ul li{
	background: url(../images/0m6.jpg);
	position: relative;
	display: inline;
	padding:0.7em;
}

#menu ul li a{
	padding: 0.5em 1.0em 0.9em 1.0em;
	color: #fff;
	text-decoration: none;
}

#menu ul li a:hover{
	text-decoration: underline;
}

#contenido{
	height:auto;
	width:auto;
	background-image: url(../images/main_bg.jpg);
	background-repeat: no-repeat;                   /*  Cambiar repeat-x por no-repeat  */
}

#division1{
	background:url(../images/0gl1.jpg);
	width:auto;
}

#division2{
	/*width:auto;*/                                 /*  Cambiar Esto    */
	width:99%;                                      /*  Por Esto        */
	background-image: url(../images/division2ce.png);
	background-repeat: repeat-x;
	overflow:auto;                                  /*  Añadir          */
}

#bloqueiz{
	margin: 0.5em;
	float:left;
	width:30em;                                     /*  Cambiar 31em por 30em*/
}
.titulo{
	padding:0.3em;
	background:url(../images/0t3.jpg);
	width:12em;
	height:22px;
}

.contenido{
	margin:1em;
	padding:0.3em;
}

#bloque1{
	width:30em;
	height:auto;

}

#bloque2{
	width:14em;                                     /*  Cambiar 15em por 14em   */
	height:auto;
	float:left;
	margin:0.1em;                                   /*  Añadir  */

}

#bloque3{
	width:14em;                                     /*  Cambiar 13em por 14em   */
	height:auto;
	float:right;
	margin:0.1em;
}

#bloquede{
	margin: 0.5em;
	float: right;
	width: 13em;
	/*margin-right:4em;*/                           /*  Quitar  */
}

#bloque4{
	/*width:12em;*/                                 /*  Cambiar Esto */
	width:12.7em;                                   /*  Cambiar Esto */
	height:auto;
	padding:0.3em;
	background-attachment:scroll;
	background-color:transparent;
	background-image:url(../images/cbg_btm1.jpg);
	background-position:left bottom;
	background-repeat:repeat-y;
}

#bloque5{
	/*width:12em;*/                                 /*  Cambiar Esto    */
	width:12.7em;                                   /*  Por Esto        */
	height:auto;
	padding:0.3em;
	background-attachment:scroll;
	background-color:transparent;
	background-image:url(../images/cbg_btm1.jpg);
	background-position:left bottom;
	background-repeat:repeat-y;                     /*  Cambiar no-repeat por repeat-y  */
}

#pie{
	position: relative;
	margin: 0em 5.2em 0em 0.2em;
	height: 53px;
	width:100%;
	clear: both;
	text-align:center;
}

#pie a:hover {
	text-decoration:underline;
}

#pie a {
	-x-system-font:none;
	color:#BD9959;
	font-family:Tahoma,Arial;
	font-size:9px;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	text-decoration:none;
}	

#pieinfo{
	position:absolute;
	/*margin: 0em 5.2em 0em 0.2em;*/                /*  Cambiar Este    */
    margin: 0em 5.2em 0em 25px;                     /*  Por Este        */
	/*right:3em;*/                                  /*  Quitar          */
	height: 53px;
	/*width:100%;*/                                 /*  Cambiar Este    */
	width:95%;                                      /*  Por Este        */
	clear: both;
	text-align:center;
	background-image: url(../images/piece.png);
	background-repeat: repeat-x;
}

.right{
    position:absolute;
    right:0em;
}
y en el HTML cambia lo siguiente.

Código:
	        <div id="contenido">
<!--				<div style="text-align:center"> -->
		            <img src="images/0bnr1.jpg" alt="" />
		            <img src="images/0bnr2.jpg" alt="" />
		            <img src="images/0bnr3.jpg" alt="" />
<!--		        </div>  --> 
Ahora revísalo y adáptalo a tus necesidades.

Saludos.