Problemas con la posición del div.

Anel87 · #1 (**permalink**) 05/12/2010, 15:19

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;
	}

C2am · #2 (**permalink**) 05/12/2010, 15:28

Puede poner un link a tu web, en el caso de que la tengas subida.
Sino postea tambien el html

Anel87 · #3 (**permalink**) 06/12/2010, 04:23

El codigo html es

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EGPP</title>
</head>

<body> 


<div id="fondo"> 

<div id="fondo1"> 
   		

<div id="titulo2">
<h1>E. G.</h1>
</div>

 
<ul id="menu" style="display:inline">
<li><a href="index.html">inicio</a></li>
<li><a href="datos.html">datos personales</a></li>
<li><a href="estudios.html">estudios</a></li>
<li><a href="trabajos.html">trabajos</a></li>
<li><a href="aptitudes.html">aptitudes</a></li>
<li><a href="proyectos.html">proyectos</a></li>
<li><a href="futuro.html">futuro</a></li>
<li><a href="contacto.html">contacto</a></li>
</ul>

<div id=texto_izq1>
<br>
Curriculum Vitae
</div>


</body>
</html>

Y no la tengo subida.

C2am · #4 (**permalink**) 06/12/2010, 04:51

En el html te faltan cerrar 2 div (fondo y fondo1 )

Anel87 · #5 (**permalink**) 06/12/2010, 05:07

Gracias C2am, ¡parece que estoy en una luna mas lejana que en la que estas tu!