Como fazer essa barrinha.

[arthurcastro 0]

Oi gente!

Queria saber como faço aquela barrinha amarela ali que flutua por cima do site.

Olhem no site da skol: http://www.skol.com.br/

Aquela barrinha que ta mostrando o nome da música e botões de compartilhamento. (orkut, twitter, facebook.)

 

Desde já agradeço :).

 

Alguém se habilita? hehe :P

[crf_h0m3r 5]

Você pode fazê-lo colocando seu position:fixed e seu z-index:100, por exemplo.

 

Edit: Pensei que era o menu fixo de cima, depois vi que era o rodapé, hehe.

[diogombb 0]

Os principios da barra (tanto a de cima como a de baixo) são:

 

left: 0;
position: fixed;
width: 100%;
z-index: 2000;

:joia:

[arthurcastro 0]

Hahaha...

xD

 

<style type="text/css">

#footerBot{
width: 100%;
height: 25px;
background: url(../img/bg-footerBot.gif) repeat-x; 
position: fixed; 
bottom: 0; 
left: 0; 
z-index: 2000;
}

.ie #footerBot {position: absolute;}

#footerBot .content{
width: 968px; 
padding: 0 16px; 
margin: 0 auto;
}

#footerBot .history{
width: 495px; 
height: 22px; 
overflow: hidden; 
padding-top: 3px; 
position: relative; 
float: left;
}

a.btnRadioFooter{
padding-left: 25px;
height: 20px; 
line-height: 20px; 
font-family: 'Tahoma'; 
font-size: 12px; 
text-decoration: none; 
color: #145698; 
background: url(../img/btn-radioFooter.gif) left no-repeat; 
display: block;
}

#footerBot .social{
width: 240px; 
height: 20px; 
padding-top: 3px; 
overflow: hidden; 
float: right;
}

#footerBot .social .fb{
width: 90px; 
height: 20px; 
overflow: hidden; 
display: block; 
float: left;
}

#footerBot .social .traco, .social .traco, .social .spacer{
width: 14px; 
padding: 0px; 
text-indent: -9999px; 
overflow: hidden; 
margin-right: 4px; 
background: url(../img/bg-socialSpacer.gif); 
display: block; 
float: left;
}


a.twitter-share-button{
float: left;
}

a.orkut-share-button{
width: 21px; 
height: 21px; 
padding: 0 !important; 
margin-right: 4px; 
background: url(../img/btn-orkut-share-button.png); 
text-indent: -9999px; 
overflow: hidden; 
display: block; 
float: left;
}

a.twitter-share-button{
width: 21px;
height: 21px; 
padding: 0 !important; 
margin-right: 4px; 
background: url(../img/btn-twitter-share-button.png); 
text-indent: -9999px; 
overflow: hidden; 
display: block; 
float: left;
}

a.facebook-share-button{
width: 21px; 
height: 21px; 
padding: 0 !important; 
margin-right: 4px; 
background: url(../img/btn-facebook-share-button.png); 
text-indent: -9999px; 
overflow: hidden; 
display: block; 
float: left;
}


a.addthis_button_orkut span {position: absolute; top: -9999px; left: -9999px;}
a.addthis_button_twitter span {position: absolute; top: -9999px; left: -9999px;}
a.addthis_button_facebook span {position: absolute; top: -9999px; left: -9999px;}

</style>

<div id="footerBot"> 
<div class="content">

<div class="history"> 
<a class="btnRadioFooter">Agora na Hits FM: ??????????????????</a> 
</div> 

<div class="social addthis_toolbox"> 
<a class="orkut-share-button" href="#" target="_blank" title="Compartilhar Orkut"></a> 
<a class="twitter-share-button" href="#" title="Compartilhar Twitter" data-count="none" data-related="hitsfmweb" 

data-lang="pt">Tweet</a> 
<a class="facebook-share-button addthis_button_facebook" title="Compartilhar Facebook"></a> 
<strong class="traco">aaa</strong> 
<a class="addthis_button_facebook_like fb" fb:like:layout="button_count"></a> 
<br clear="all"> 
</div> 
<br clear="all" /> 
</div> 

<script type="text/javascript"> 
var addthis_share = { templates: { twitter: '{{title}} {{url}}' } } 
</script> 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#async=1">
</script> 	
</div> 
</div> 

 

Alguém sabe o nome dessa barrinha?

[William Bruno 1501]

não tem nome especifico, amigo.

 

é apenas uma técnica css para posicionamento.

 

no caso fixed como disseram.