Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje25-06-2010, 23:17 (UTC)    
Título del mensaje: Centrar barra horizontal
Responder citando
Hola todos! He venido otra vez acá para pedir ayuda a los usuarios PaginaWebGratis.

Es que hice una barra horizontal, me ha funcionado muy bien, pero tuve un problema al usar este codigo css:
Código:
table {margin-left:auto;margin-right:auto;}

al escribir esto, todo el pagina se centraliza, todo menos la barra horizontal.
Los codigo que he utilizado en la barra horizontal es:
Código:
<div style="position:absolute;left:7px;top:280px;background:black;">
   <table align="right" width="130" cellspacing="0" cellpadding="0" border="0">
      <tbody>
         <tr class="checked_menu">
         <td align="center" id="nav_Home" class="nav"><a class="menu" href="foro.htm">Foro</a></td>
      </tbody>
   </table>
</div>

y quisiera que mi barra tambien se centralice.
Una cosita; antes de usar el codigo css para centralizar, en firefox mi barra se alineaba bien pero al abrir con Internet Explorer, me aparece mal la ubicación.

Gracias
↑
Mensaje27-06-2010, 23:13 (UTC)    
Título del mensaje:
Responder citando
es que el codigo Css que colocas lo colocas junto con el codigo css que va con tu pagina.

Y el codigo a el estar todo junto se centra toda tu pagina.

Lo que deberias hacer es pegar ese codigo en un lado distinto a el de los demas pero junto con el codigo de tu barra.

cosa de "especificar" que solo funcione en tu barra
↑
Mensaje29-06-2010, 02:16 (UTC)    
Título del mensaje:
Responder citando
Jajaja, y lo que queria es saber cual era el código.

En fin, Estábamos con mi hermano, intentando solucionar esta cosa, y lo logramos, pero no queda muy lindo pero funciona.

Código:

<script type="text/javascript">
   //modificaciones
   window.onresize = function(event) {
      document.getElementById('pagina').style.left = (window.innerWidth/2 - 470) + "px";
   }
</script>


<div style="position:absolute;left:7px;top:280px;background:black;text-align:center;" id="pagina">
   <table align="right" width="269" cellspacing="0" cellpadding="0" border="0">
      <tbody>
         <tr class="checked_menu">
         <td align="center" id="nav_Home" class="nav" style="background-image:url('http://img.webme.com/pic/a/archivosmap/bar_001.png')"></td>
      </tbody>
   </table>
</div>


<script type="text/javascript">
   //modificaciones
      document.getElementById('pagina').style.left = (window.innerWidth/2 - 470) + "px";
</script>


Lo que se agrego es lo siguiente:
Código:
<script type="text/javascript">
   //modificaciones
   window.onresize = function(event) {
      document.getElementById('pagina').style.left = (window.innerWidth/2 - 470) + "px";
   }
</script>

este codigo de arriba viene arriba de la tabla

Código:
<div style="position:absolute;left:7px;top:280px;background:black;text-align:center;" id="pagina">

lo que se hizo en este codigo, es que el primer div, al final se le agrego el id="pagina"

Código:
<script type="text/javascript">
   //modificaciones
      document.getElementById('pagina').style.left = (window.innerWidth/2 - 470) + "px";
</script>

Y esto poner abajo de la tabla

así pudimos solucionar este problema de CENTRALIZAR, pero sigue otro problema, en Mozilla Firefox funciona pero no funciona en Internet Explorer (en la mas nueva versión funciona...)
↑
Mensaje30-06-2010, 09:28 (UTC)    
Título del mensaje: Hola
Responder citando
Mira tu barra no se centra solo por la cencilla razón de que para poder ponerlo a la altura que querias le pusiste position:absolute, entonces todo codigo que tenga posición absoluta no puede centrarse así y además todo ese codigo que pusiste de javascript no es la mejor opción, en realidad no hace gran cosa, olvida eso y mejor modifiquemos solo el codigo de tu barra.

Codigo de tu barra original:

<div style="position:absolute;left:7px;top:280px;background:black;">
<table align="right" width="130" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="checked_menu">
<td align="center" id="nav_Home" class="nav"><a class="menu" href="foro.htm">Foro</a></td>
</tbody>
</table>
</div>


Codigo modificado:

<div style="position:absolute;top:280px;background:black; width:100%; display:block; text-align:center;">
<table align="right" width="130" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="checked_menu">
<td align="center" id="nav_Home" class="nav"><a class="menu" href="foro.htm">Foro</a></td>
</tbody>
</table>
</div>

si ves aumente width:100%; display:block; text-align:center; para que tu barra ocupe el 100% del ancho de tu página no importa la resolución de la pantalla y además todo lo que este dentro se centrara.


Espero que te funcione, cualquier duda no dudes en preguntar.
______________


Ultima edición por proyectogaia el Mie Jun 30, 2010 5:30 am; editado 2 veces
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.