Foros del Web - Ver Mensaje Individual

luciio · #1 (**permalink**) 20/08/2009, 16:29

Hola buenas tardes.

Tengo recien una semana leyendo manuales sobre CSS/XHTML ya que siempre utilice dreamweaver para diseñar y quise acabar con eso, jaja, total que leyendo por aqui y por alla eh conseguido hacer esto: http://www.lografico.com

Tengo un problema con un efecto si se dan cuenta al entrar al sitio en la primer imagen de portafolio al poner el mouse por encima de ella se pone una imagen mas grande, el problema es que no allo como hacerle para que esa imagen mas grande se posicione de esta forma: http://www.lografico.com/prinpant.jpg quisiera que al poner el mouse encima de la imagen de portafolio, la imagen mas grande se abra y se posicione exactamente ahi (en la zona rosa de aqui: http://www.lografico.com/prinpant.jpg), eh probado de diferentes formas en el codigo pero no consigo hacerlo, lo pongo en un div y en otro y nunca, ojala pudieran ayudarme les dejo mi codigo:

CSS:

Cita:

* {margin:0;padding:0; border:0; outline:none; position: relative;}

p a:hover{ color:#575757; text-decoration:none;}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #8A8A8A;
text-decoration: none
}

#contenedor{
width: 600px;
margin-left: -300px;
left: 50%;
top: 0px
}

#div_header {
width: 450px;
height: 450px;
top: 0px;
background-image: url(imagenes/logo.jpg);
margin-bottom: 5px;
}

#div_headerchico {
width: 300px;
height: 272px;
top: 0px;
background-image: url(imagenes/headerchico.jpg);
margin-bottom: 5px;
margin-left: -150px;
left: 50%;
}

#contcuadrocentro {
width: 498px;
height: 349px;
margin-left: -249px;
background-image: url(imagenes/cuadrocentro.jpg);
left: 50%
}

#cuadrocentro {
position: absolute;
width: 424px;
height: 550px;
margin: 37px;
}

#bodyleft {
width: 185px;
height: 275px;
float: left
}

#bodyrup {
width: 230px;
margin-left: 9px;
height: 145px;
float: right
}

#bodyrdown {
width: 230px;
margin-left: 9px;
margin-top: 10px;
height: 120px;
float: right
}

#pie {
width: 430px;
height: 20px;
background: #CCCCCC;
margin-left: -215px;
left: 50%
}

#portafolio {
width: 450px;
height: 205px;
margin-bottom: 10px;
background-image:url(imagenes/fondo-portafolio2.jpg);
margin-left: -225px;
left: 50%
}

#portafolio1 {
top: 28px;
left: 22px;
position: absolute;
}

#portafolio2 {
top: 28px;
left: 129px;
position: absolute;
}

#portafolio3 {
top: 28px;
left: 236px;
position: absolute;
}

#portafolio4 {
top: 28px;
left: 343px;
position: absolute;
}

#disenoweb {
position: absolute;
top: 0px;
width: 34px;
height: 400px;
background-image: url(imagenes/disenoweb.jpg);
left: 0px
}

.corte {
clear: both;
}

P.portafolio {
font-variant: small-caps;
font-size: 14px;
top: 10px;
left: 23px
}

P.titulos1 {
font: Arial, Helvetica, sans-serif;
font-size: 11px;
font-variant: small-caps;
margin-bottom: 15px;
color: #515050
}

P.titulos1:hover{ text-decoration:underline;}

img.left {
float: left;
margin-right: 10px
}

/* GALERIIIAAAAAAA */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility: hidden;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
top: 50px;
}

/* TERMINA GALERIIIAAAAAAA */

HTML:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>LOGRAFICO. diseño web a tu medida.</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>



<body>
<div id="disenoweb"></div>
<div id="contenedor">
<div id="div_headerchico"></div>
<div id="contcuadrocentro">
<div id="cuadrocentro">
<div id="bodyleft">
<img src="imagenes/diseno-web.jpg" width="65" height="58" class="left"/>Diseño Web a Tu Medida>
Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit amet interdum. Maecenas eu elit Aliquam quis ante in ipsum auctor. Morbi volutpat leo in ligula. Integer vel magna Morbi volutpat leo in ligula.
<br />
Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit Morbi volutpat leo in ligula sodales sit Morbi volutpat leo in ligula Quisque ut magna et Fus.</div>
<div id="bodyrup">
<img src="imagenes/rightup.jpg" width="70" height="86" class="left"/>Diseño Web a Tu Medida
Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit amet interdum. Maecenas eu elit Aliquam quis ante in ipsum auctor. Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit sodales sit soda.</div>
<div id="bodyrdown">
<img src="imagenes/rightdown.jpg" width="80" height="42" class="left"/>Diseño Web a Tu Medida
Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit amet interdum. Maecenas eu elit Aliquam quis ante in ipsum auctor. Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et Fusce elit ligula, sodales sit</div>
</div>
</div>
<div class="corte"></div>
<div id="portafolio">
<h2><p class="portafolio">portafolio</p></h2>
<div class="portafolio1">
<a class="thumbnail" href="#thumb"><img src="imagenes/clubnupcial1.jpg" width="85px" height="130px" border="0" id="portafolio1"/><span><img src="imagenes/clubnupcial.jpg" /></span></a></div>
<div class="portafolio2">
<img src="imagenes/clubnupcial.jpg" alt="portafolio2" name="portafolio2" width="85" height="130" id="portafolio2"/></div>
<div class="portafolio3">
<img src="imagenes/clubnupcial.jpg" alt="portafolio3" name="portafolio3" width="85" height="130" id="portafolio3"/></div>
<div class="portafolio4">
<img src="imagenes/clubnupcial.jpg" alt="portafolio4" name="portafolio4" width="85" height="130" id="portafolio4"/></div>
</div>
<div id="pie"></div>
</div>
</body>
</html>