Como colocar una capa en el centro?

Yeahh

Haber.. tengo esta capa:

<div id="Layer1" style="position:absolute; width:400px; height:500px; z-index:1; top: 0; left: 0;"></div>

Ahora mismo esta en pocicion absoluta a la izquierda y arriba..

Lo que quiero es que al cambiar la resolucion de la pantalla siempre este centrada, osea arriba y al centro

Gracias.

Whose

prueba a ponerle margin: 0 auto 0 auto;

guner

yo suelo crear un div que contiene tooooodo, o sea, que es lo único que hay en body a ese nivel, y a ese div le pongo align="center", y dentro todo queda centrado

erdanblo

guner, eso no valida, si no me equivoco.

n0sferaTu

Que diablos hace el div?(llevo poco en esto :D )

guner

#4, cierto, no valida, supongo que lo he usado en html 4.1 y no en xhtml

erdanblo

http://home.worldonline.es/jlgranad/xhtml/xhtml1.htm

EnZo

yo hago lo mismo que hace guner

guner

#8 noooo :''(, el atributo align no existe en xhtml (aunque funcione) , yo lo usaba en html 4.01, ahí si existe. He buscado, y como lo hace whose es lo correcto.

Yeahh

<div id="Layer1" style="position:absolute; width:400px; height:500px; z-index:1; top: 0; margin: 0 auto 0 auto"></div>

Sigue sin irme...

erdanblo

Creo que es por el position: absolute, eso lo que hace es dar una situación fija, respecto al límite del documento.

De todos modos, yo también hago lo de la capa contenedora, es lo mejor.

Whose

1º quita el position: absolute

Si sigue sin irte añade al css lo siguiente
html,body {
height:100%
}

Si aun sigue sin irte comprueba que hayas puesto un doctype que se ajuste a tu documento
http://www.w3schools.com/tags/tag_doctype.asp

Asi ya deberia irte ;)

PD: De todos modos, yo también hago lo de la capa contenedora, es lo mejor. No es la mejor forma, ni lo correcto ni lo mejor :*

erdanblo

¿Por qué tu lo dices?

Porque yo estoy harto de ver <div id="contenedor">...

Whose

si vas a meter 3 divs, uno al lado del otro claro que si es aconsejable usarlo, para asegurarte de que no se va cada uno a su bola, aun usando float pero para alinear un div al centro no se necesita para nada usar ningun contenedor.

erdanblo

Generalmente las páginas tienen varias partes, el menú, la zona de contenidos, etc... osea, que para tenerlo todo ordenadito, contenedor y .

Además, a la hora de tocar cualquier cosa o moverlo de sitio o lo que sea es mucho más cómodo...

Pd. cabezota...

Whose

¿Donde ha dicho el autor del post que tenga que organizar varios divs? nos ha puesto un div y ha preguntado como alinearlo al centro, no ha pedido que le organizemos unos divs ni le maquetemos una web.

PD: No es correcto y te jorobas, chanquete!
:** (K)

erdanblo

:(...

Pd. Seguro que tiene más div's ¬¬', si no para que los numera, Layer1, etc...

Yeahh

solo es un div... el contenido es un flash

Ahora que esta centrado no esta pegado arriba....

esta asi :

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Prueba de div y css</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>


<div id="contenedor" style=" width:766px; height:687px; z-index:1; top: 0; margin: 0 auto 0 auto ;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="766" height="687">
<param name="movie" value="web_adi.swf">
<param name="quality" value="high">
<embed src="web_adi.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="766" height="687"></embed>
</object>
</div>

</body>
</html>



y el style.css:

html,body {
height:100%
}
body {
background-color: #FFFFFF;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
a:link {
color: #FFCC00;
}
a:visited {
color: #FFCC00;
}
a:hover {
color: #FFCC00;
}
a:active {
color: #FFCC00;
}

guner

ese dreamweaver ...
he quitado código de la css porque no había elementos donde aplicarlo. : /


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
&nbsp;&nbsp;&nbsp;&nbsp;<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
&nbsp;&nbsp;&nbsp;&nbsp;<link href="style.css" rel="stylesheet" type="text/css">
&nbsp;&nbsp;&nbsp;&nbsp;<title>Prueba de div y css</title>
</head>

< body>

<div id="contenedor">
&nbsp;&nbsp;&nbsp;&nbsp;<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
&nbsp;&nbsp;&nbsp;&nbsp; codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
&nbsp;&nbsp;&nbsp;&nbsp; width="766" height="687">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<param name="movie" value="web_adi.swf">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<param name="quality" value="high">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<embed src="web_adi.swf" quality="high"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pluginspage="http://www.macromedia.com/go/getflashplayer"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type="application/x-shockwave-flash" width="766" height="687">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</embed>
&nbsp;&nbsp;&nbsp;&nbsp;</object>
</div>

</body>
</html>



//style.css

html, body
{
&nbsp;&nbsp;&nbsp;&nbsp;height:100%
&nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;
&nbsp;&nbsp;&nbsp;&nbsp;color: #FFFFFF;
&nbsp;&nbsp;&nbsp;&nbsp;background-color: #FFFFFF;
}

div#contenedor
{
&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
&nbsp;&nbsp;&nbsp;&nbsp; top: 0;
&nbsp;&nbsp;&nbsp;&nbsp;margin: 0 auto 0 auto;
}

a:link, a:visited, a:hover, a:active
{
&nbsp;&nbsp;&nbsp;&nbsp;color: #FFCC00;
}

t0rr3nt3

Habeis puesto un tutorial de xhtml, pero a mi me encantaba uno que puso whose en pdf, era todo como mucho mas ameno. A ver si puedes ponerlo otra vez whose :(, formatee y lo perdi...

erdanblo

http://www.media-vida.net/vertema.php?fid=33&tid=1828895106#5

Yeahh

gracias gunner pero sige sin estar pegado ariba y centrado... :(

erdanblo

Tiene el código mal, lo correcto seria:

html, body
{
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #FFFFFF;
}

Yeahh, podrias poner un poco de tu parte y fijarte, y si eso lo haces en el Dreamweaver en modo código, verás que te sale todo de un mismo color, no sale todo en rosita, que seria lo correcto.

guner

hostia, la comilla, que putada que no haya debuggers de css XD

Usuarios habituales

  • guner
  • erdanblo
  • Yeahh
  • t0rr3nt3
  • Whose
  • EnZo
  • n0sferaTu