Cita: lo malo es que no estoy seguro como hacerlo, porque me chocan los position absolute y los relative, y me quedan algunas imagenes atras de otras, como en la parte de abajo, los botones se me iban atras de la barra y no supe como pasarlos.
Uno de mis pilares basicos como Maquetador es no utilizar nada que no necesite, porque solo complica mas las cosas.
El diseño que quieres lograr se puede hacer por completo sin utilizar ni siquiera 1 elemento en position: Absolute;, te recomiendo que no utilices eso.
En tu pagina estas haciendo esto:
Código HTML:
<div id="bg">
<img id="index" src="images/index.jpg" width="778" height="780" alt="" />
</div>
Eso se logra de la misma forma con
Código HTML:
<head>
<style>
div#bg{
width: 778px;
height: 780px;
background: url(images/index.jpg) no-repeat;
}
</style>
</head>
<body>
<div id="bg">
</div>
<body> La gran diferencia entre uno y otro es que en la primera forma estas poniendo una imagen en la pagina web, en la segunda estas poniendo un div (en este caso con el id = bg) con una imagen de fondo.
No se le puede insertar texto adentro de una imagen, pero adentro de un div con fondo no solo se puede insertar un texto, sino que se pueden insertar cualquier cosa.
Te recomiendo que leas algunos manuales/tutoriales sobre html/css para que te vallas acostumbrandoa las tecnicas mas usadas y siempre que estes por utilizar cosas como position absolute y todo eso planteate si vale la pena, hay cosas que solo se logran con eso, pero en general la mayoria de las webs nunca necesitan de esa propiedad.