posicion absoluta dentro de una estatica

Nateskin · #1 (**permalink**) 29/03/2006, 05:10

Hola chicos! os comento.

quiero tener dentro de una capa centrada, una que este een una posicion en concreto pero sin que me coma el contenido de la capa centrada, como el siguiente ejemplo:

Código PHP:

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin t&iacute;tulo</title>

<style type="text/css">

<!--

#wrapper {

    visibility:visible;

    width:770px;

    z-index:1;

    margin-right: auto;

    margin-left: auto;

    background: #333333;

}

#Layer1 {

    position:absolute;

    visibility:visible;

    left:254px;

    top:129px;

    width:587px;

    height:297px;

    z-index:2;

    border: thin solid #000000;

}

-->

</style>

</head>

<body>

<div id="wrapper">

  <div id="Layer1">a</div>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

  <p>a</p>

</div>

</body>

</html>

el caso que cuando lol veo en dreamweaver lo veo como debe o creo q es. y en los navegadores (mozilla y internet explorer) se ve justamente a la izquierda.

donde esta mi fallo?? que es lo que deberia poner?

un saludo!

kahlito · #2 (**permalink**) 29/03/2006, 11:58

Hola Nateskin, no entiendo muy bien lo que quieres hacer, de todas formas prueba con esto:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#wrapper {
    visibility:visible;
    width:770px;
    z-index:1;
    margin-right: auto;
    margin-left: auto;
    background: #333333;
}
#Layer1 {
    visibility:visible;
    width:587px;
    height:297px;
    z-index:2;
    border: thin solid #000000;
    position:absolute; 
    top:50%; left:50%; 
    width:587px; height:297px; 
    margin-left:-300px; margin-top:-170px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="Layer1">a</div>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
</div>
</body>
</html>

Saludosss.