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