Ayuda con barra de navegación...

[BaByRoDrI]

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:

<div class="clearfloat">
    <div id="logo" class="left">
    
        <a href="/">
    <img src="images/logo/Logo3.jpg" alt="" height="90px" /></a>
    
    </div>
 
    <div class="right">
        
            
        <script type="text/javascript"><!--
google_ad_client = "pub-8263020497690406";
google_ad_slot = "8360435838";
google_ad_width = 675;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
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]">
</script>
            </div>
 
    <div id="socialLinks">
        <a href="#" class="linkedin" title="Join us on LinkedIn!">Join us on LinkedIn!</a>
        <a href="#" class="facebook" title="Unete a nosotros en Facebook!">Unete a nosotros en Facebook</a>
        <a href="#" class="twitter" title="Siguenos en Twitter!">Siguenos en Twitter!</a>
        <a href="#" title="RSS" class="rss">Suscribete a nuestro RSS Feed!</a>
    </div>
<!-- End Social Media links -->
 
</div>
 
</div>
 
<div id="navbar" class="clearfloat">
<ul id="page-bar" class="left clearfloat">
<li><a href="/">Home</a></li>
 
<li class="page_item page-item-2 current_page_item"><a href="acerca-de.html" title="Acerca de">Acerca de</a></li>
<li class="page_item page-item-6"><a href="contacto.html" title="Contacto">Contacto</a></li>
 
</ul>
 
<form method="get" id="searchform" action="">
<div id="search">
<input type="text" value="" name="s" id="s" class="field" style="width:125px;" />
<input type="image" src="images/loupe.gif"]images/loupe.gif" style="width:15px;height:14px;"/>
</div>
</form>
</div>
 

Código CSS:

#socialLinks{position:absolute; right:13%; top:105px; padding-left:155px; height:42px}
#socialLinks .linkedin, #socialLinks .facebook, #socialLinks .twitter, #socialLinks .rss{display:block; width:32px; height:32px; float:left; margin-left:5px; text-indent:-9999px}
#socialLinks .linkedin:hover, #socialLinks .facebook:hover, #socialLinks .twitter:hover, #socialLinks .rss:hover{margin-bottom:2px}
#socialLinks .linkedin{background:url(images/ico_linkedin.png) 0 0 no-repeat}
#socialLinks .facebook{background:url(images/ico_facebook.png) 0 0 no-repeat}
#socialLinks .twitter{background:url(images/ico_twitter.png) 0 0 no-repeat}
#socialLinks .rss{background:url(images/ico_rss.png) 0 0 no-repeat}
#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

[devnieL]

creo que es un cambio así :

#navbar{margin:0 auto; padding:50px 10px 0px 10px; ... }

[BaByRoDrI]

Iniciado por devnieL

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

[jomaruro]

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.

[BaByRoDrI]

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...

[jomaruro]

Hola:

¿Qué tal esto?

Código CSS:

#socialLinks{position:absolute; right:183px; top:130px; padding-left:155px; height:42px;}
 

Saludos.

[BaByRoDrI]

Salio el mismo resultado sigo todo ensimado :S

[jomaruro]

Hola:

Pero ¿donde quieres colocarlo?

Saludos.