Desbordamientos y posición de capas

[Aimarejada]

Estoy creando una web a partir de una imagen de un template y he tenido algunos problemas grandes con desbordamientos de capas, posición etc.

En este enlace podeis ver el descalabro.

Aqui se puede ver que el menu no esta en su sitio y no soy capaz de conseguir que quede encajado correctamente y luego se ve tambien un besbordamiento en la derecha.

El desbordamiento creo que es debido a que las capas llegan mas lejos y por lo tanto las imagenes se ven obligadas a repetirse hasta alcanzar el height adecuado pero a otras imagenes no le pasa lo mismo.



En el pie empezo siendo una sola imagen fija pero como queria que fuese un diseño lo mas liquido posible decidi dividir la imagen en tres, de tal forma que los laterales queden siempre igual pero la imagen central crezca de forma que se adapte a la resolución de pantalla.

En esta imagen se ve que los laterales no se quedan bien alineados.

[Calizman]

Saludos!!

Ufff!!! He visto tu web y te voy a dar un consejo, que creo que te servira.

Inicia una web desde 0! Posiblemente te vas a tardar mas en arreglar los errores que tiene tu web actual, y te tardarias menos en iniciar una web desde 0.

Es mi opinion, si decides dedicarle meses a esa web y tratar de solucionarlo todo, entonces esperemos a que alguien venga y decida ayudarte no?

Suerte!! y Hasta Luego!!

[Aimarejada]

La estoy creando desde cero y me han salido esos problemas que no consigo solucionar.

[jomaruro]

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.

[Aimarejada]

Gracias ahora se ve mucho mejor en general y solo falta resolver lo del pie, por mas que cambio cosas no consigo que las 3 imagenes esten en el mismo nivel, he llegado a conseguir que la imagen de la izquierda y de la derecha este bien alineada, pero cuando pongo la del centro para que se repita en X se superpone a las otras dos imagenes.

Lo que queria hacer es que en pie este formado por tres imagenes.

Imagen 1 que este en la esquina inferior izquierda, imagen 2 que se repita para adaptarse al width que tenga la pagina en ese momento y por ultimo imagen 3 que seria igual que imagen 3 pero a la derecha.

[Aimarejada]

¿Alguien me echa una mano?

[Mikmoro]

No estoy en absoluto seguro de qué es lo que quieres conseguir pero prueba esto a ver si se acerca:

#pieinfo {background-image:url(../images/piece.png);
background-repeat:repeat-x;
clear:both;
height:53px;
margin:0em 0em 0em 0.2em;
position:absolute;
right:0.2em;
text-align:center;
width:100%;
}
Inherited from

[Calizman]

Creo que todos esperabamos a que el Gran Mikel se apareciera a ayudar!

[Adryi19]

Hola CaLiZzZ que creativo tu mensaje jeje me gusto

Saludos!

[Aimarejada]

Lo que quiero hacer es poner en el pie 3 imagenes de fondo ¿Por que 3 y no 1? porque con 1 si la resolución de la pantalla es grande se va a distorsionar por lo que quiero dividir esa imagen en 3 y colocarlas en el pie de forma que quede como si fuera 1 sola.

Aqui en esta imagen señalado las 3 imagenes, las de los laterares serian fijas y no se repetirian pero la imagen central tendria que repetirse y asi adaptarse a la resolución.

[Aimarejada]

He avanzado algo pero las imagenes ya que las imagenes estan bien posicionadas sin ponerles a los div position absolute pero no estan en el mismo nivel.

Las imagenes estan dentro de un div el cual tiene un position relative y los div de las imagenes tienen position absolute con z-index para que se superpongan y las imagenes de los lados esten encima del div ce. Por lo que veo en Mozilla y en IE 6 el resultado es que los div se salen del navegador o no salen bien colocadas .

Código PHP:

  <div id="footer">
     <div id="iz">&nbsp;</div>
          <div id="ce">    
               Contenido pie.
       </div>
     <div id="de">&nbsp;</div>
</div> 
   

Código PHP:

  #footer {
   position: relative;
   margin: 0px auto; 
}

#iz{
    background:url(pieiz.png) no-repeat;
    width:29px;
    height: 53px;
    float: left;
    position:absolute;
        z-index:1;
}

#ce{
    background:url(piece.png) repeat-x;
    width:100%;
    height: 53px;
    float: left;
    position:absolute;
    z-index:0;
}

#de{
    width:29px;
    height: 53px;
    position:absolute;
    z-index:1;
    background: url(piede.png) no-repeat right;
    float:right;
} 
   

[Mikmoro]

Por lo que veo no has probado lo que te puse, ¿verdad?

[Aimarejada]

Si lo he probado pero se me olvido comentar el resultado cambiando los estilos de la imagen central, el resultado fue que la imagen central ocupaba el 100 % del ancho del div y ocultaba las imagenes de los lados por lo que probe otra cosa (lo que comento en el mensaje anterior) y creo que mejora.

El Inherited from no lo puse cuando probe con esos estilos ya que no se para que es.

[Mikmoro]

¿Eso te ocurría con esto que puse?
http://www.forosdelweb.com/f53/desbo...6/#post2836184
Me extraña mucho, pero bueno, tú sabrás bien.

[Aimarejada]

Cambiando los estilos por lo que tu has puesto la imagen central ocupaba el 100 % del ancho del div que contiene el pie con las 3 imagenes, las imagenes de los laterales no se veian pero la imagen central si que salia bien posicionada.

[Mikmoro]

Yo creo que no, pero bueno, si lo has probado... al menos en FF no.

[Aimarejada]

Iniciado por Mikmoro

Yo creo que no, pero bueno, si lo has probado... al menos en FF no.

Tal vez tenemos diferentes versiones de Firefox (Yo tengo la 3.0.7) y la imagen central ocupa el 100% del div como mencione antes, es mas ahora le di un height menor para ver como las imagenes de los laterales estan debajo de esta y se ven.

Aqui en esta imagen se puede ver (En los laterales se ve como asoman las imagenes por detras):




Lo unico que se me ocurre es que modificara los estilos de las imagenes de los laterales y que eso haga que no se vea correctamente, si puedes mirarlo te lo agradeceria, ya que es lo unico que tiene sentido.

En cuanto a IE 6 se ve bastante diferente:

[Mikmoro]

No sé exactamente cómo lo probaste pero si te fijas, ese selector tiene un right:0.2em;, lo que impide que monte sobre la imagen derecha.

¿Tienes lo último que has hecho actualizado en el enlace de antes?

[Aimarejada]

En el enlace que puse ne mi primer mensaje puedes ver la pagina complemtamente actualizada es decir con las utlimas modificaciones que he hecho.

Sobre el right:0.2em; segun dices se supone que que el div con la clase "ce" ¿deberia de quedar por debajo del div con la clase "de"?

[Mikmoro]

Bueno, veamos si lo entiendo: yo creo que si pones esto así consigues lo que quieres.

HTML:

<div id="footer-box">
<div class="de"></div>
<div class="iz"></div>
<div class="ce">© 2008 <a href="index.php?modulo=quienessomos">Mundo Militaria</a> Algunos derechos reservados. [<a href="index.php?modulo=quienessomos">Quienes somos</a> | <a href="index.php?modulo=condicionesdeuso">Condicion es de uso</a> | <a href="index.php?modulo=politicadeprivacidad">Polít ica de privacidad</a>]
</div>
</div>

CSS:

.ce {background:transparent url(../img/piece.png) repeat-x scroll 0%;
height:43px;
margin:0em 1.81em;
text-align:center;
}

con las clases "iz" y "de" como las tienes.

[Aimarejada]

Ahora en FF se ve perfecto y en IE6 casi ya que hay un margen entre las imagenes que no se de donde sale y probando con width:auto; y width:100%; no consigo quitarlo.

[Aimarejada]

Tras probar con diferentes cosas no consigo que en IE6 e IE7 se vea bien el pie y otras partes de la pagina.

En la cabecera de la pagina el fondo (Marron) de la capa no llega hasta el final y queda 1 px o 2 px con el fondo del body (Azul), esto en IE 7 se produce a lo largo de todo el lateral derecho.



En el pie que esta formado por 3 imagenes se ve espacios entre estas cuando no se deberian de ver, de hecho en FF no se ven, y no consigo eliminar esos espacios.

Los espacios se pueden ver fijandose en que entre las imagenes hay un fondo azul.




En este enlace podeis ver la pagina.

[Aimarejada]

¿Alguna idea?

[Aimarejada]

Sigo con el mismo problema aunque con alguno mas. Queria eliminar la barra de desplazamiento horizontal que aparece solo en Ie, supongo que por algun width pero no detecto cual es, otra cosa es que la pagina se queda cargando un elemento o mas pero no se que elementos son los que esta intentando cargar para poder resolver el problema.

¿Alguna ayuda?