Foros del Web » Creando para Internet » CSS »

Problemas con la posición del div.

Estas en el tema de Problemas con la posición del div. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/12/2010, 15:19
 
Fecha de Ingreso: diciembre-2010
Mensajes: 11
Antigüedad: 7 años
Puntos: 0
Problemas con la posición del div.

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;
	}
  #2 (permalink)  
Antiguo 05/12/2010, 15:28
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problemas con la posición del div.

Puede poner un link a tu web, en el caso de que la tengas subida.
Sino postea tambien el html
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 06/12/2010, 04:23
 
Fecha de Ingreso: diciembre-2010
Mensajes: 11
Antigüedad: 7 años
Puntos: 0
Respuesta: Problemas con la posición del div.

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.

Última edición por Anel87; 06/12/2010 a las 04:39
  #4 (permalink)  
Antiguo 06/12/2010, 04:51
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problemas con la posición del div.

En el html te faltan cerrar 2 div (fondo y fondo1 )
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 06/12/2010, 05:07
 
Fecha de Ingreso: diciembre-2010
Mensajes: 11
Antigüedad: 7 años
Puntos: 0
Respuesta: Problemas con la posición del div.

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

Etiquetas: descuadra, movimiento, capas
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 04:19.