Problemas al centrar capa en mozilla

sealen · #1 (**permalink**) 06/10/2009, 11:26

Buenas tengo una capa que contiene un flash con el siguiente código:

<div id="botonera" style="position:absolute; margin: auto;top:82px; width:914px; height:205px; z-index:1">

El problema esta en que se me justifica al centro en IE pero en mozilla lo lanza a la parte izquierda de la pantalla, mi pregunta es la siguiente.

¿que codigo añado para justificar al centro dicha capa en mozilla?

Muchas gracias de antemano

alex1195 · #2 (**permalink**) 06/10/2009, 19:11

Prueba introduciendo esa capa con posición absoluta, dentro de otra capa relativa que tenga margenes automáticos.

#todo {
position:relative;
width:anchodetuweb;
height:altodetuweb;
margin-left:auto;
margin-right:auto;
}

y el html sería asi

<div id="todo">
<div id="botonera" style="position:absolute; margin: auto;top:82px; width:914px; height:205px; z-index:1">
</div>

Espero que te funcione =D

Hasta Luego

Por cierto... este tipo de problemas es muy común con las capas o "divs absolutos".. te sugiero que uses tablas, o que desde un inicio, hagas la capa con posición relativa...

Me voy, good luck =D

deirdre · #3 (**permalink**) 06/10/2009, 20:14

No utilices tablas para algo tan sencillo. Y mejor sacar el estilo fuera de línea. Prueba esto (funciona en todos los navegadores):

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrar capa en el ancho</title>
<style type="text/css">
#botonera {
	margin: 82px auto; 
	width: 914px; 
	height: 205px; 
	z-index: 1; 
	border: 1px solid #444; /*el borde es sólo para testar*/
}
</style>
</head>

<body>
	<div id="botonera"></div>
</body>

</html>

Bye

sealen · #4 (**permalink**) 08/10/2009, 11:09

Lo primero muchas gracias por las respuesta, tengo que reconocer que soy un poco necio en el mundo del código y a pesar de vuestras explicaciones no he conseguido hacer correctamente. Os pongo a continuación el código completo de la capa para ver si me podeís ayudar.

<div id="botonera" style="position:absolute; margin: auto;top:82px; width:914px; height:205px; z-index:1">
<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="914" height="250">
<param name="movie" value="flash/botonera2.swf">
<param name=quality value=high>
<param name="wmode" value="transparent">
<embed src="flash/botonera2.swf" width="914" height="250" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>

Como referencia tengo subid la web a una URL de prueba para que podaís ver el fallo que me dá exactamente.

http://www.mediaesfera.es/mmp_website

Lamento mucho ser tan poco ducho en estos temas. Mil gracias de nuevo.

kseso? · #5 (**permalink**) 08/10/2009, 11:37

Tienes un problema de concepción y símplemente sufres el riesgo del abuso de la posición absoluta para alterar el flujo.

Cita:

element.style {
height:205px;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
margin-top:auto;
position:absolute;
top:82px;
width:914px;
z-index:1;
}

y de estructura en el html:
aparece antes tu menú que el resto de los elementos (tablas).
Coloca primero en el html la tabla con el header y a continuación el menú, con psosición relativa, margin: 0 auto 15px. Los 15 px son aproximados.

Un saludo.

P.D.: esta consulta no debería estar en css, pues no hay tal en tu documento.