Foros del Web » Creando para Internet » CSS »

Desbordamientos y posición de capas

Estas en el tema de Desbordamientos y posición de capas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/03/2009, 13:04
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Desbordamientos y posición de capas

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.

  #2 (permalink)  
Antiguo 20/03/2009, 14:33
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Desbordamientos y posición de capas

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!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 21/03/2009, 09:07
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

La estoy creando desde cero y me han salido esos problemas que no consigo solucionar.
  #4 (permalink)  
Antiguo 21/03/2009, 10:57
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 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.

  #5 (permalink)  
Antiguo 21/03/2009, 14:37
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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.
  #6 (permalink)  
Antiguo 23/03/2009, 16:39
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

¿Alguien me echa una mano?
  #7 (permalink)  
Antiguo 23/03/2009, 18:02
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: Desbordamientos y posición de capas

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

Cita:
#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
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 23/03/2009, 18:04
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Desbordamientos y posición de capas


Creo que todos esperabamos a que el Gran Mikel se apareciera a ayudar!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #9 (permalink)  
Antiguo 23/03/2009, 22:37
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

Hola CaLiZzZ que creativo tu mensaje jeje me gusto

Saludos!
  #10 (permalink)  
Antiguo 24/03/2009, 11:46
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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.

  #11 (permalink)  
Antiguo 25/03/2009, 07:26
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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 {
   
positionrelative;
   
margin0px auto
}

#iz{
    
background:url(pieiz.pngno-repeat;
    
width:29px;
    
height53px;
    
floatleft;
    
position:absolute;
        
z-index:1;
}

#ce{
    
background:url(piece.pngrepeat-x;
    
width:100&#37;;
    
height53px;
    
floatleft;
    
position:absolute;
    
z-index:0;
}

#de{
    
width:29px;
    
height53px;
    
position:absolute;
    
z-index:1;
    
backgroundurl(piede.pngno-repeat right;
    
float:right;


Última edición por Aimarejada; 25/03/2009 a las 07:34
  #12 (permalink)  
Antiguo 25/03/2009, 08:20
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: Desbordamientos y posición de capas

Por lo que veo no has probado lo que te puse, ¿verdad?
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 25/03/2009, 08:56
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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.
  #14 (permalink)  
Antiguo 25/03/2009, 12:02
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: Desbordamientos y posición de capas

¿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.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 25/03/2009, 16:04
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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.
  #16 (permalink)  
Antiguo 25/03/2009, 17:20
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: Desbordamientos y posición de capas

Yo creo que no, pero bueno, si lo has probado... al menos en FF no.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 25/03/2009, 17:34
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

Cita:
Iniciado por Mikmoro Ver Mensaje
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:

  #18 (permalink)  
Antiguo 25/03/2009, 17:38
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: Desbordamientos y posición de capas

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?
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 25/03/2009, 17:45
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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"?
  #20 (permalink)  
Antiguo 25/03/2009, 17:48
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: Desbordamientos y posición de capas

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

HTML:
Cita:
<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:
Cita:
.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.
__________________
Visita mi nueva web idplus.org
  #21 (permalink)  
Antiguo 26/03/2009, 11:17
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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.

  #22 (permalink)  
Antiguo 15/04/2009, 15:28
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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.
  #23 (permalink)  
Antiguo 21/04/2009, 16:04
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

¿Alguna idea?
  #24 (permalink)  
Antiguo 28/05/2009, 10:50
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Desbordamientos y posición de capas

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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:05.