Foros del Web » Creando para Internet » CSS »

Problema Div Css

Estas en el tema de Problema Div Css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/05/2010, 09:00
 
Fecha de Ingreso: mayo-2010
Mensajes: 6
Antigüedad: 7 años, 6 meses
Puntos: 0
Problema Div Css

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?

Última edición por Yufiro; 19/05/2010 a las 12:34 Razón: añadir etiqueta html
  #2 (permalink)  
Antiguo 19/05/2010, 12:32
 
Fecha de Ingreso: mayo-2010
Mensajes: 6
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema Div Css

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 */
  #3 (permalink)  
Antiguo 19/05/2010, 18:48
 
Fecha de Ingreso: mayo-2010
Mensajes: 6
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema Div Css

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

Etiquetas: Ninguno
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




La zona horaria es GMT -6. Ahora son las 00:19.