Hola, soy nueva por este "foro", y quería saludar y dar las gracias por este maravilloso sitio, donde he aprendido muchos trucos de html y css.
Hace muy poquito que empecé con el diseño web, y estoy haciendo mi primera web, tiene varios .html y un css. El problema está solo en el indice.html (es la página inicial)
En esta página hay un titulo, texto (2 palabras), el menú y 2 imágenes de fondo, una con el color de fondo y la otra con una imagen en fondo transparente. En realidad las imágenes están en 2 div distintos.
El caso es que cuando muevo la imagen se me mueve el título, el menú, y el texto, vaya que se descuadra todo. Supongo que tengo un buen lio con el tag position de cada capa.
¿Como lo hago para que los elementos no se influyan el uno al otro?
Este es el codigo CSS:
Código HTML:
@charset "utf-8";
/* CSS Document */
html, body {
height:100%;
width:100%;
background-image:url(objetos/fondo.jpg);
background-position:top;
background-attachment:fixed;
o-background-size:100%; /* Opera */
-webkit-background-size:100%; /* Safari */
-khtml-background-size:100%; /* Konqueror */
-moz-background-size:100%; /* Firefox */
background-repeat:no-repeat;
overflow-x:hidden;
overflow-y:hidden;
}
h1 { //estilo del titulo//
font-family:"28dayslater.ttf";
font-size:50px;
text-align:center;
line-height:50px;
color:#EA8117;
left:-500px;
}
#titulo1{ //posición del titulo//
position:relative;
background-color:transparent;
width:500px;
top:45px;
left:-600px;
}
#menu li { //Menú//
display:inline;
}
#menu li a{
position:relative;
height:100px;
width:1000px;
font-family:"28dayslater.ttf";
font-size: 25px;
text-decoration:none;
text-transform:capitalize;
top: -142px;
padding:5px;
margin:-2px;
background-color:#F9FD64;
color: #EA8117;
border:2px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
}
#menu a:hover { background-color:#FF3;}
#fondo { //Fondo para el color//
position:relative;
background-color:#F9FD64;
[COLOR="Red"]width:1000px;[/COLOR]
height:550px;
top:50%;
left:50%;
margin-top: -255px;
margin-left: -500px;
padding:0px;
border: 2px solid #000;
border-radius: 10px;
opacity: 0.8;
border-radius: 20px;
-moz-border-radius: 20px;
text-align:center;
}
#fondo1 { //Fondo con imagen, que me descuadra todo!//
position:relative;
background-image:url(objetos/cara1.png);
background-repeat:no-repeat;
[COLOR="red"]width:439px;[/COLOR]
height:461px;
left:562px;
bottom: -57px;
border: 0px;
border-radius: 20px;
-moz-border-radius: 20px;
z-index:2;
}
#fondo1:link { background-position: bottom left; }
#fondo1:hover { background-position: bottom right!important; }
#texto_izq1 { //Texto de 2 palabras//
position:absolute;
font-family:url:(grafia/"28dayslater.ttf";
font-size:65px;
left:-450px;
top: 200px;
width:500px;
height:400px;
color:#EA8117;
}