Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema para ubicar navegación postion:absolute

 Estas en el tema de Problema para ubicar navegación postion:absolute en el foro de CSS en Foros del Web. Hola, Estoy armando una pagina web, pero me surgieron dos problemas. El primero, y mas importante es que tengo una navegación "hija", que me esta ...
  #1 (permalink)  
Antiguo 06/11/2013, 10:00
Avatar de Faks  
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 12 años, 5 meses
Puntos: 1
Problema para ubicar navegación postion:absolute
Hola,
Estoy armando una pagina web, pero me surgieron dos problemas. El primero, y mas importante es que tengo una navegación "hija", que me esta dando problemas para ubicarla. En Chrome se ve perfecto, en IE aceptable pero en Firefox me rompe el corazon (?)

En cuestión, la pagina web y su navegación es la esta: cahos.webcreatio.com.ar

El html de la nav es:

Código HTML: 
Ver original
  1. <nav id="top-nav">
  2.                 <ul>
  3.                     <li><a href="#" class="active">Noticias</a></li>
  4.                     <li><a href="#">Roster</a>
  5.                         <ul id="roster-nav">
  6.                             <li><a href="#">Battlefield 3</a></li>
  7.                             <li><a href="#">Battlefield 4</a></li>
  8.                             <li><a href="#">Counter Strike 1.6</a></li>
  9.                             <li><a href="#">Counter Strike GO</a></li>
  10.                             <li><a href="#">Counter Strike Source</a></li>
  11.                             <li><a href="#">Dota 2</a></li>
  12.                             <li><a href="#">Leage of Legends</a></li>
  13.                             <li><a href="#">War Thunder</a></li>
  14.                         </ul>
  15.                     </li>
  16.                     <li><a href="#">Cerrados</a>
  17.                         <ul id="cerrados-nav">
  18.                             <li><a href="#">Jugados</a></li>
  19.                             <li><a href="#">Proximos</a></li>
  20.                         </ul>
  21.                     </li>
  22.                     <li><a href="#">Torneos</a></li>
  23.                     <li><a href="#">Servidores</a>
  24.                         <ul id="servidores-nav">
  25.                             <li><a href="#">Battlefield 3</a></li>
  26.                             <li><a href="#">Battlefield 4</a></li>
  27.                             <li><a href="#">Counter Strike 1.6</a></li>
  28.                             <li><a href="#">Counter Strike GO</a></li>
  29.                             <li><a href="#">Counter Strike Source</a></li>
  30.                         </ul>
  31.                     </li>
  32.                     <li><a href="#">Multimedia</a>
  33.                         <ul id="multimedia-nav">
  34.                             <li><a href="#">Fotos</a></li>
  35.                             <li><a href="#">Videos</a></li>
  36.                             <li><a href="#">Screenshots</a></li>
  37.                         </ul>
  38.                     </li>
  39.                     <li><a href="#">Foro</a></li>
  40.                     <li><a href="#">Contacto</a></li>
  41.                 </ul>
  42.             </nav><!-- fin nav -->

Y lo importante, el css

Código CSS: 
Ver original
  1. /* NAVEGACION */
  2.  
  3. #top-nav {
  4.     height: 81px;
  5.     width: 100%;
  6.     background: url('../img/nav-bg.png') repeat-x;
  7. }
  8.  
  9. #top-nav ul li {
  10.     float: left;
  11.     position: relative;
  12.     margin: 15px 0 0 20px;
  13.     text-transform: uppercase;
  14.     font-weight: bold;
  15. }
  16.  
  17. #top-nav ul li a {
  18.     color: #fff;
  19. }
  20.  
  21. #top-nav ul li a:hover {
  22.     color: #2da7e4;
  23.     text-decoration: none;
  24. }
  25.  
  26. #top-nav li ul {
  27.     width: 1019px;
  28.     z-index: 999;
  29.     float: left;
  30.     left: -9999px;
  31.     position: absolute;
  32. }
  33.  
  34. #roster-nav, #cerrados-nav, #servidores-nav, #multimedia-nav,
  35. #roster-nav a, #cerrados-nav a, #servidores-nav a, #multimedia-nav a{
  36.     font-size: 10pt;
  37.     font-weight: inherit;
  38.     padding: 12px 0 12px 0;
  39.     font-weight: 100;
  40.     color: #666666 !important;
  41.     font-size: 8pt;
  42. }
  43.  
  44. #roster-nav a:hover, #cerrados-nav a:hover, #servidores-nav a:hover, #multimedia-nav a:hover {
  45.     color: #fff !important;
  46. }
  47.  
  48. nav li:hover ul#roster-nav, nav li:hover ul#cerrados-nav,
  49. nav li:hover ul#servidores-nav, nav li:hover ul#multimedia-nav { left: 0; }

Y actualmente lo intente mover a la izquierda para que quede a la altura de la principal con (también probé directamente con ponerle la propiedad "left")

Código CSS: 
Ver original
  1. #roster-nav { margin-left: -9.50em;}
  2. #cerrados-nav { margin-left: -16.50em; }
  3. #servidores-nav { margin-left: -32.90em; }
  4. #multimedia-nav {margin-left: -43em; }

En fin, si pudiera hacer que en todos los navegadores se viese como en chrome, seria todo un logro para mi.

Gracias!!

pd: Otra cosa que eh notado es que Firefox me imprime la tipografía considerablemente mas grande :S
Última edición por Faks; 06/11/2013 a las 10:29 Razón: correccion de enlace
  #2 (permalink)  
Antiguo 06/11/2013, 11:23
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Problema para ubicar navegación postion:absolute
No veo problemas en firefox, se ve igual que en chrome.

Sobre el tamaño de la fuente:¿ font-size: 8pt;?
Los pt son para medios impresos, no es recomendable para web.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 06/11/2013, 11:50
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 8 meses
Puntos: 36
Respuesta: Problema para ubicar navegación postion:absolute
no veo problema alguno lo revise en chrome , mozilla y en safari

todo bien creo ...
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #4 (permalink)  
Antiguo 06/11/2013, 11:59
Avatar de Faks  
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 12 años, 5 meses
Puntos: 1
Respuesta: Problema para ubicar navegación postion:absolute
Seguros? Ahora les dejo un screenshot de como lo veo yo..



Se nota mucho mas la diferencia en las categorías "servidores" y "multimedia"

Por otro lado, lo de la fuente, la verdad que no tenia idea. Entonces, se usan medidas en em?

Edit. Cambie todas las medidas de la tipografía de pt a em, todavía en firefox se muestra en mayor tamaño.

Edit 2. Estuve probando, y parece que el problema en que la navegación se ve diferente se debe a el tamaño de la tipografia. Sospecho que si logoro que todos los exploradores me muestren la tipografia en el mismo tamaño, el problema se resolvera
Última edición por Faks; 06/11/2013 a las 13:57
  #5 (permalink)  
Antiguo 11/11/2013, 22:25
Avatar de Faks  
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 12 años, 5 meses
Puntos: 1
Respuesta: Problema para ubicar navegación postion:absolute
Logre alinear la sub-nav en todos los exploradores. No logre que Firefox me respete el tamaño de la tipografía.
Como por el momento lo considero un problema menor, lo pasare por alto hasta que me de problemas.

La alineación la logre con jQuery sacada de un tutorial que dejo al final de la respuesta.
El código quedo de la siguiente manera (para el que ande con problema similar):

El script
Código Javascript: 
Ver original
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  2.     <script type="text/javascript">
  3.         $(document).ready(function() {
  4.          
  5.          $("ul#top-nav li").hover(function() { //Hover over event on list item
  6.           $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
  7.           $(this).find("span").show(); //Show the subnav
  8.          } , function() { //on hover out...
  9.           $(this).css({ 'background' : 'none'}); //Ditch the background
  10.           $(this).find("span").hide(); //Hide the subnav
  11.          });
  12.          
  13.         });
  14.     </script>

HTML
Código HTML: 
Ver original
  1. <nav id="top-nav">
  2.                 <ul>
  3.                     <li><a href="#" class="active">Noticias</a></li>
  4.                     <li><a href="#">Roster</a>
  5.                         <span>
  6.                             <a href="#">Battlefield</a>
  7.                             <a href="#">Counter Strike</a>
  8.                             <a href="#">Dota</a>
  9.                             <a href="#">Leage of Legends</a>
  10.                             <a href="#">War Thunder</a>
  11.                         </span>
  12.                     </li>
  13.                     <li><a href="#">Cerrados</a>
  14.                         <span>
  15.                             <a href="#">Jugados</a>
  16.                             <a href="#">Proximos</a>
  17.                         </span>
  18.                     </li>
  19.                     <li><a href="#">Torneos</a></li>
  20.                     <li><a href="#">Servidores</a>
  21.                         <span>
  22.                             <a href="#">Team Speak 3</a>
  23.                             <a href="#">Battlefield 4</a>
  24.                         </span>
  25.                     </li>
  26.                     <li><a href="#">Multimedia</a>
  27.                         <span>
  28.                             <a href="#">Fotos</a>
  29.                             <a href="#">Videos</a>
  30.                             <a href="#">Screenshots</a>
  31.                         </span>
  32.                     </li>
  33.                     <li><a href="#">Foro</a></li>
  34.                     <li><a href="#">Contacto</a></li>
  35.                 </ul>
  36.             </nav><!-- fin top-nav -->

CSS
Código CSS: 
Ver original
  1. /* NAVEGACION */
  2.  
  3. #top-nav {
  4.     height: 81px;
  5.     width: 100%;
  6.     background: url('../img/nav-bg.png') repeat-x;
  7. }
  8.  
  9. #top-nav ul {
  10.     padding-left: 5px;
  11.     font-size: 0.9em;
  12.     text-transform: uppercase;
  13.     position: relative;
  14. }
  15.  
  16. #top-nav ul li {
  17.     padding: 15px;
  18.     float: left;
  19.     padding-right: 20px;
  20. }
  21.  
  22.     #top-nav ul li a {
  23.         color: #fff;
  24.         font-weight: bold;
  25.         text-decoration: none;
  26.     }
  27.  
  28.     #top-nav ul li a:hover {
  29.         color: #2da7e4;
  30.     }
  31.  
  32. #top-nav li span {
  33.     position: absolute;
  34.     float: left;
  35.     height: 30px;
  36.     padding: 20px 15px 15px 10px;
  37.     margin-top: -10px;
  38.     left: 10px;
  39.     top:45px;
  40.     width: 975px;
  41.     display: none;
  42.     z-index: 100;
  43. }
  44.  
  45.     #top-nav li span a {
  46.         padding-right: 20px;
  47.         font-size: 0.833em;
  48.         color: #666666;
  49.     }
  50.  
  51. #top-nav li:hover span { display: block; }
  52. #top-nav li span a:hover { color: #2da7e4;}

El enlace al tutorial -> http://www.htmldrive.net/items/show/239/Horizontal-Subnav-w-CSS-jQuery.html

Etiquetas: background, color, hover, html, ubicar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:56.