Problema Div Css

[Yufiro]

Buenas Gente, estoy haciendo un Theme para wordpress para un proyecto final de curso. y tengo un problema. jejeje

En principio este es el boceto de la web



Como veis lo de abajo es un Div, que ocupara lo de la linea Roja, y siempre estara ahi, digamos que te acompaña por la web, es un gato que vive en una azotea y que mira al horizonte, como si estuviera leyendo la web contigo ((pajas mentales varias))


el problema es que todo lo que esta abajo de esa linea roja, es intocable ((enlaces Etc)), en una resolucion de 1024 practicamente deja la pagina que no puedes presionar nada.

entonces probe a hacer esto:



aunque ahi lo paresca ((es un montaje rapido)) el dibujo nunca toca lo que es la pagina, quitando de lo que seria el div Central pero solo son unos 15 pix de alto, vamos que no molesta, pero el problema es que intentandolo hacer asi, las imagenes van para donde quieren, no consigo que se quede igual que en el dibujo ((se montan encima una de otras)) y para colmo tengo miedo de que al ampliar la resolucion pues se "desmiembre el dibujo y no quede bien)) que coñe puedo hacer? el codigo aun sin terminar vendria a ser algo asi:

Index.php

Código HTML:

<div id="gat1">
</div>
<div id="gat2">
</div>
<div id="gat3">
</div> 

Style.css

Código HTML:

/* begin gat*/
#gat1 {
background-image:url("images/gat1.jpg");
background-position:bottom left;
background-repeat:no-repeat;
bottom:0;
height:552px;
position:fixed;
width:100%;
z-index:5;
}
#gat2 {
background-image:url("images/gat2.png");
background-position:bottom center;
background-repeat:no-repeat;
bottom:0;
height:700px;
position:fixed;
width:100%;
z-index:5;
}
#gat3 {
background-image:url("images/gat3.png");
background-position:right center;
background-repeat:no-repeat;
bottom:0;
height:552px;
position:fixed;
width:500px;
z-index:5;
}
/* end Gat */

En fin, teneis idea de como solucionarlo? sin tener que pensar en cambiar el diseño de esa parte?

[Yufiro]

Bueno mientras me ayuda alguien he estado, intentando arreglar el tema, he credo un div con 3 sub divs, para poder dividir el dibujo en 3 partes, pero me encuentro con el problema en que no lo puedo centrar ni poner encima de todo. os pongo como queda


el dibujo esta cuadrado dentro del Div, ahora lo quiero poner como en los ejemplos de arriba, pero no lo consigo, se me queda ahi, no se centra, no se pone en primer plano sobre todo, Etc... cuando lo hago con un imgen y div sencillo si me pasa, pero si imito los datos en el div principal no sucede nada. pongo elcodigo

Index.php

Código HTML:

<div id="apDiv1">
  <div id="gat1"></div>
  <div id="gat2"></div>
  <div id="gat3"></div>
</div> 

Style.css

Código HTML:

/* begin gat*/
#apDiv1 {
	background-position:center center;
	position:fixed;
	width:1806px;
	height:600px;
	z-index:5;
}
#gat1 {
	background-image: url('images/gat12.png');
	background-repeat:no-repeat;
	position:absolute;
	left:2px;
	top:361px;
	width:552px;
	height:252px;
	z-index:1;
}
#gat2 {
	background-image: url('images/gat22.png');
	background-repeat:no-repeat;
	position:absolute;
	left:553px;
	top:421px;
	width:705px;
	height:180px;
	z-index:0;
}
#gat3 {
	background-image: url('images/gat3.png');
	background-repeat:no-repeat;
	position:absolute;
	left:1256px;
	top:1px;
	width:549px;
	height:600px;
	z-index:1;
}
/* end Gat */

[Yufiro]

Bueno ya lo solucine, lo pongo aqui por si a alguien le puede hacer falta, para poner en sus Webs, themes lo que sea, una imagen sobre todo.

basicamente cree 3 divs en index.php

Código HTML:

 <div id="gat1"></div>
  <div id="gat2"></div>
  <div id="gat3"></div> 

Y en el Style.css

Código HTML:

#gat1 {
	background-image: url('images/gat12.png');
	background-position:center center;
    background-repeat:no-repeat;
    bottom:0;
    height:268px;
    left:50%;
    margin-left:-801px;
    margin-top:-264px;
    position:fixed;
    top:100%;
    width:447px;
    z-index:5;
}
#gat2 {
	background-image: url('images/gat22.png');
background-position:center center;
background-repeat:no-repeat;
bottom:0;
height:135px;
left:50%;
margin-left:-354px;
margin-top:-135px;
position:fixed;
top:100%;
width:700px;
z-index:5;
}
#gat3 {
background-image:url("images/gat3.png");
background-position:center center;
background-repeat:no-repeat;
bottom:0;
height:600px;
left:50%;
margin-left:346px;
margin-top:-589px;
position:fixed;
top:100%;
width:549px;
z-index:5;

}

tienes que dejar el atributo Top y Left en % y luego ajustarlo con margin-top y margin left, si no. cada vez que cambies de resolucion todo se movera de sitio, otro problem es que si en Width y height, no pones el tamaño exacto en pixeles, el Div se hace muy grande ((aunque lo que tengas dentro no)) y tapa lo que tenga debajo como links y cosas asi.

En fin ahora a darme de cabezasos contra otras cosas.. saludos