Foros del Web » Creando para Internet » CSS »

Ayuda con barra de navegación...

Estas en el tema de Ayuda con barra de navegación... en el foro de CSS en Foros del Web. Hola ando trabajando en un sitio, y la verdad no soy bueno en el diseño :S, así que me pidieron que abajo del header y ...
  #1 (permalink)  
Antiguo 02/07/2010, 14:23
Avatar de BaByRoDrI  
Fecha de Ingreso: julio-2009
Ubicación: Mexico
Mensajes: 60
Antigüedad: 8 años, 5 meses
Puntos: 1
Pregunta Ayuda con barra de navegación...

Hola ando trabajando en un sitio, y la verdad no soy bueno en el diseño :S, así que me pidieron que abajo del header y la publicidad pusiera unos botones para el facebook, twitter, rss y así lo hice... Pero no quedo del todo bien:



Quedo así :S

Bueno solo quiero bajar la barra de navegación para que los botones queden libres, les paso el codigo HTML y CSS:
Código HTML:
Ver original
  1. <div class="clearfloat">
  2.     <div id="logo" class="left">
  3.    
  4.         <a href="/">
  5.     <img src="images/logo/Logo3.jpg" alt="" height="90px" /></a>
  6.    
  7.     </div>
  8.  
  9.     <div class="right">
  10.        
  11.            
  12.         <script type="text/javascript"><!--
  13. google_ad_client = "pub-8263020497690406";
  14. google_ad_slot = "8360435838";
  15. google_ad_width = 675;
  16. google_ad_height = 90;
  17. //-->
  18. <script type="text/javascript"
  19. src="[noparse][URL="http://www.forosdelweb.com/view-source:http://pagead2.googlesyndication.com/pagead/show_ads.js"]http://pagead2.googlesyndication.com/pagead/show_ads.js[/URL][/noparse]">
  20.             </div>
  21.  
  22.     <div id="socialLinks">
  23.         <a href="#" class="linkedin" title="Join us on LinkedIn!">Join us on LinkedIn!</a>
  24.         <a href="#" class="facebook" title="Unete a nosotros en Facebook!">Unete a nosotros en Facebook</a>
  25.         <a href="#" class="twitter" title="Siguenos en Twitter!">Siguenos en Twitter!</a>
  26.         <a href="#" title="RSS" class="rss">Suscribete a nuestro RSS Feed!</a>
  27.     </div>
  28. <!-- End Social Media links -->
  29.  
  30. </div>
  31.  
  32. </div>
  33.  
  34. <div id="navbar" class="clearfloat">
  35. <ul id="page-bar" class="left clearfloat">
  36. <li><a href="/">Home</a></li>
  37.  
  38. <li class="page_item page-item-2 current_page_item"><a href="acerca-de.html" title="Acerca de">Acerca de</a></li>
  39. <li class="page_item page-item-6"><a href="contacto.html" title="Contacto">Contacto</a></li>
  40.  
  41. </ul>
  42.  
  43. <form method="get" id="searchform" action="">
  44. <div id="search">
  45. <input type="text" value="" name="s" id="s" class="field" style="width:125px;" />
  46. <input type="image" src="images/loupe.gif"]images/loupe.gif" style="width:15px;height:14px;"/>
  47. </div>
  48. </form>
  49. </div>
Código CSS:
Ver original
  1. #socialLinks{position:absolute; right:13%; top:105px; padding-left:155px; height:42px}
  2. #socialLinks .linkedin, #socialLinks .facebook, #socialLinks .twitter, #socialLinks .rss{display:block; width:32px; height:32px; float:left; margin-left:5px; text-indent:-9999px}
  3. #socialLinks .linkedin:hover, #socialLinks .facebook:hover, #socialLinks .twitter:hover, #socialLinks .rss:hover{margin-bottom:2px}
  4. #socialLinks .linkedin{background:url(images/ico_linkedin.png) 0 0 no-repeat}
  5. #socialLinks .facebook{background:url(images/ico_facebook.png) 0 0 no-repeat}
  6. #socialLinks .twitter{background:url(images/ico_twitter.png) 0 0 no-repeat}
  7. #socialLinks .rss{background:url(images/ico_rss.png) 0 0 no-repeat}
  8. #navbar{margin:0 auto; padding:0px 10px 0px 10px; text-transform:uppercase; background:#333 url(images/navbar.png) 0 0 no-repeat; width:920px; font-size:10px; border-left:5px solid #fff; border-right:5px solid #fff}
Please necesito ayuda ya me desespere editando una y otra vez el CSS :S
  #2 (permalink)  
Antiguo 03/07/2010, 01:28
 
Fecha de Ingreso: noviembre-2009
Ubicación: 127.0.0.1
Mensajes: 31
Antigüedad: 8 años
Puntos: 1
Respuesta: Ayuda con barra de navegación...

creo que es un cambio así :

#navbar{margin:0 auto; padding:50px 10px 0px 10px; ... }
  #3 (permalink)  
Antiguo 03/07/2010, 22:42
Avatar de BaByRoDrI  
Fecha de Ingreso: julio-2009
Ubicación: Mexico
Mensajes: 60
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Ayuda con barra de navegación...

Cita:
Iniciado por devnieL Ver Mensaje
creo que es un cambio así :

#navbar{margin:0 auto; padding:50px 10px 0px 10px; ... }
He hecho el cambio tal cual y ya casi el resultado obtenido es este:



Alguien por favor... los necesito
  #4 (permalink)  
Antiguo 04/07/2010, 03:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con barra de navegación...

Hola:

Viendo un resultado y el otro y sabiendo donde lo quieres poner, deberías ir cambiando los distintos padding hasta dar con el lugar exacto.

Con el código que indicas, no me es posible reproducir la página ¿tienes la URL?

Saludos.

  #5 (permalink)  
Antiguo 04/07/2010, 14:36
Avatar de BaByRoDrI  
Fecha de Ingreso: julio-2009
Ubicación: Mexico
Mensajes: 60
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Ayuda con barra de navegación...

La página donde se puede ver el resultado es esta: http://www.revela.com.mx/contacto

Si intente probar lo de los padding :S pero me daba resultados similares a los que ya postie...
  #6 (permalink)  
Antiguo 04/07/2010, 15:50
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con barra de navegación...

Hola:

¿Qué tal esto?

Código CSS:
Ver original
  1. #socialLinks{position:absolute; right:183px; top:130px; padding-left:155px; height:42px;}

Saludos.

  #7 (permalink)  
Antiguo 04/07/2010, 17:47
Avatar de BaByRoDrI  
Fecha de Ingreso: julio-2009
Ubicación: Mexico
Mensajes: 60
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Ayuda con barra de navegación...

Salio el mismo resultado sigo todo ensimado :S
  #8 (permalink)  
Antiguo 05/07/2010, 16:10
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con barra de navegación...

Hola:

Pero ¿donde quieres colocarlo?

Saludos.


Etiquetas: barra
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




La zona horaria es GMT -6. Ahora son las 22:42.