Hola gente mi problema es el siguiente.. tengo una capa arriba a la derecha la cual la quiero bajar un poquito pero no hay caso.. aca dejo el link de la imagen
ht tp://i50.tinypic.com/6tgvmo.jpg (tiene un espacio entre ht y tp ya que no me deja postear links)
Lo que esta en rojo es mi capa y lo azul es a donde mas o menos quiero llegar
Este es el codigo
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht tp://w ww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="ht tp://w ww.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/estilo.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {}
});
});
</script>
<title>Voomba!</title>
</head>
<body>
<div id="cont-logo">
<div id="logotipo"><a href="index.html"><img src="imagenes/banner.png" alt="Click para ir a la pagina principal" /></a></div>
<div id="buscar"><a href="buscar.html"><img src="imagenes/buscar.gif" alt="Ir al Inicio" /></a></div>
<div id="home"><a href="index.html"><img src="imagenes/home.png" alt="Ir al Inicio" /></a></div>
</div>
<div id="contenedormenu">
<div id="top" class="top">
<img src="imagenes/esqsupiz.png" alt="Esquina superior izquierda" class="esqsupizq" />
<div id="menu">
<ul id="1" class="lavaLampNoImage">
<li><a href="index.html">Inicio</a></li>
<li><a href="juegos/1.html">Juegos</a></li>
<li><a href="appz/1.html">Aplicaciones</a></li>
<li><a href="soft/1.html">Software</a></li>
<li><a href="themes.html">Themes</a></li>
</ul>
</div>
<img src="imagenes/esqsupder.png" alt="Esquina superior derecha" class="esqsupder"/>
<div id="cont-top"></div>
</div>
</div>
<div id="global">
<div id="contenido">
<div id="imagenaleatoria">
<script type="text/javascript">
<!--
var b1dis = "<a href=\"";
var bdis = "\"><img src=\"";
var edis = " alt=\"some text\" /></a>";
var rnumb = "";
var img = "";
rnumb += Math.floor(Math.random()*4);
img = rnumb;
if (img == "0") {
document.write(b1dis+ "juegos/1.html" +bdis+ "imagenes/thumbs/game-prin.png\"" +edis);
}
if (img == "1") {
document.write(b1dis+ "appz/1.html" +bdis+ "imagenes/thumbs/appz-prin.png\"" +edis);
}
if (img == "2") {
document.write(b1dis+ "themes/1.html" +bdis+ "imagenes/thumbs/theme-prin.png\"" +edis);
}
if (img == "3") {
document.write(b1dis+ "soft/1.html" +bdis+ "imagenes/thumbs/soft-prin.png\"" +edis);
}
// -->
</script>
<p>Descarga los mejores y mas variados programas, juegos, aplicaciones, themes, etc. para mejorar y divertirte con tu celular clickeando sobre la imagen</p>
</div>
<div id="contprinparteder" >
<a href="juegos/1.html"><img src="imagenes/thumbs/juegos/thumb-assassin.jpg" alt="Assassins Creed II" /></a><h4>Assassins Creed II</h4><p>Juego multiresolucion basado en la historia de Ezio, un asesino en busca de venganza</p><br /><a href="juegos/1.html">Descargar</a><br /><br /><br /><br />
<hr /><br /><a href="juegos/1.html"><img src="imagenes/thumbs/juegos/thumb-spore.jpg" alt="Spore" /></a><h4>Spore</h4><p>Juego multiresolucion en el que manejaras diversos mounstros para crear un nuevo planeta.</p><br /><a href="juegos/1.html">Descargar</a><br /><br /><br /><br />
<hr /><br /><a href="juegos/1.html"><img src="imagenes/thumbs/juegos/thumb-2012.jpg" alt="2012 Apocalypse" /></a><h4>2012 Apocalypse</h4><p>Juego multiresolucion basado en la pelicula sobre el fin del mundo.</p><br /><a href="juegos/1.html">Descargar</a><br /><br /><br /><br />
</div>
</div>
</div>
<div id="bottom">
<img src="imagenes/esqinfizq.png" alt="Esquina Inferior izquierda" class="esqinfizq" />
<img src="imagenes/esqinfder.png" alt="Esquina inferior derecha" class="esqinfder"/>
<div id="cont-bottom"></div>
</div>
<div id="pie"><p>Todos los derechos reservados. Voomba!</p></div>
</body>
</html> Y aca esta el Css
Código:
body{
text-align: center;
background-image: url(../imagenes/fondo.jpg);
background-repeat: repeat-x;
background-color: #5287fd;
}
h4{
text-transform: uppercase;
font-weight: bold;
text-decoration: underline;
}
#logotipo {
float: left;
padding: 0px;
width: 367px;
}
#cont-logo{
width: 898px;
margin: 0px auto;
height: 120px;
}
#global {
background-color: white;
width: 898px;
height: 400px;
margin: 0px auto;
}
#contenido {
margin: 0px auto;
width: 850px;
height: 400px;
position: relative;
}
#contenido .centrarimagen {
display: block;
margin: auto;
}
#paginas {
width: 898px;
height: 20px;
text-align: center;
position: absolute;
margin: 0px auto;
}
#menu {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu li {
float: left;
}
#menu li a {
text-decoration: none;
padding: 10px;
color: white;
text-align: center;
display: block;
color: black;
}
#cont-top {
height: 42px;
width: 857px;
margin: 0px auto;
background-image: url(../imagenes/bordsup.png);
background-repeat: repeat-x;
}
#cont-bottom {
height: 42px;
width: 880px;
margin: 0px auto;
background-image: url(../imagenes/bordinf.png);
background-repeat: repeat-x;
}
img.esqsupizq {
float:left;
}
img.esqsupder {
float: right;
}
img.esqinfizq {
float:left;
}
img.esqinfder {
float: right;
}
#bottom {
height: 42px;
width: 898px;
margin: 0px auto;
}
#contenedormenu {
width: 898px;
margin: 0px auto;
}
#home{
float: right;
padding: 5px;
}
#buscar {
float: right;
padding: 5px;
}
#parteizq {
width: 400px;
position: absolute;
}
#parteizq img {
float: left;
border: 1px solid;
}
#parteder {
width: 400px;
float: right;
}
#parteder img {
float: left;
border: 1px solid black;
}
#propaganda{
width: 400px;
height: 125px;
bottom: 0px;
position: absolute;
}
#propaganda img{
float: left;
border: 1px solid black;
}
#cuadrobusqueda{
text-align: center;
width: 400px;
margin: auto;
}
#resultados {
width: 840px;
margin: auto;
height: 340px;
}
#imagenaleatoria {
width: 400px;
height: 350px;
margin: 0px;
float: left;
}
#contprinparteder {
width: 400px;
height: 350px;
float: right;
margin: 0px;
}
#contprinparteder img {
float: left;
}
.lavaLampNoImage {
position: relative;
}
.lavaLampNoImage li {
float: left;
list-style: none;
}
.lavaLampNoImage li.back {
border: 1px solid #000;
background-color: #e6e8ea;
height: 35px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a {
font-weight: bold;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
border: none;
}
Lo que quiero mover es la capa Home y la capa Buscar..
Espero sepan y/o quieran ayudarme.. ya intente de todo pero no encuentro solucion