Icons / labels aan zijkant website

[motower]

Ik weet niet of de vraag hier thuis hoort, maar hij is algemeen ....

Je ziet nu vaak aan de zijkant van een website icons (met bijvoorbeeld nieuwsbrief, facebook, twitter, e.d.) het lijkt een beetje op een labeltje.
Wie weet hoe te doen??

 

[csshunter]

Even de kunst afkijken (broncode bekijken van zo'n pagina)?

 

[motower]

Dacht ik ook, maar ik ka het niet vinden. Deze heeft ze bijvoorbeeld: http://www.orangebag.nl/

 

[csshunter]

Hier staan ze:

<div id="sidebarWrapper"><div id="sidebar">
<div class="sideDefault vlaggetjes"><p><a href="http://www.orangebag.nl/orangebag/" title="Naar Nederlands" class="ned"><img src="http://static.orangebag.nl/images/empty.gif" width="19" height="13" alt="Naar Nederlands" style="margin-top: 3px;" /></a></p></div>
<div class="sideDefault vlaggetjes"><p><a href="http://www.orangebag.nl/english/" title="Switch to English" class="eng"><img src="http://static.orangebag.nl/images/empty.gif" width="19" height="13" alt="Switch to English" style="margin-top: 3px;" /></a></p></div>
<div id="sideNieuwsbrief"><p><a href="http://www.orangebag.nl/orangebag/nieuwsbrief/" title="nieuwsbrief"><img src="http://static.orangebag.nl/images/nl/side_nieuwsbrief.png" width="28" height="130" alt="nieuwsbrief"/></a></p></div>

<div class="sideDefault social"><p><a href="http://www.facebook.com/pages/OrangeBagnl/358423760651" onclick="recordOutboundLink(this, 'Outbound Links');window.open(this.href);return false;" title="Join us on Facebook" style="float:left; display:block; width: 45px; background: none;"><img src="http://static.orangebag.nl/images/empty.gif" class="facebook" width="19" height="19" alt="Join us on Facebook" /></a></p></div>
<div class="sideDefault social"><p><a href="http://twitter.com/OrangebagTineke/" onclick="recordOutboundLink(this, 'Outbound Links');window.open(this.href);return false;" title="Follow us on Twitter" style="float:left; display:block; width: 45px; background: none;"><img src="http://static.orangebag.nl/images/empty.gif" class="twitter" width="19" height="19" alt="Follow us on Twitter" /></a></p></div>
<div class="sideDefault social"><p><a href="http://itunes.apple.com/us/app/orangebag-nl-lookbooks-inspirations/id382821876?mt=8" onclick="recordOutboundLink(this, 'Outbound Links');window.open(this.href);return false;" title="Download our iPad App" style="float:left; display:block; width: 45px; background: none;"><img src="http://static.orangebag.nl/images/empty.gif" class="ipad" width="19" height="19" alt="Download our iPad App" /></a></p></div>
<div class="clear"></div></div></div>

En in de css (http://static.orangebag.nl/css/style.min.css) kan je de opmaak vinden:

div#sidebarWrapper {position:fixed;height:100%;width:36px;left:0px;z-index:999;}
div#sidebar {left:0px;color:#757575;display:block;font-family:"Lucida Sans Unicode", "Lucida Sans", "Helvetica";font-size:0.7em;font-weight:400;width:36px;margin:0;position:absolute;z-index:105;height:500px;margin-top:-195px;top:50%;}
.sideDefault {width:28px;height:26px;margin:0px 0px 5px 0px;padding:0px;background:url(/images/side_logos.png) no-repeat;}
.sideDefault p {margin:0px;padding:4px 0px 0px 4px;}
.vlaggetjes .ned img {background-image:url(/images/vlaggetjes.png);background-repeat:no-repeat;background-position:0px 0px;height:11px;display:block;margin:4px 0px 0px 2px;padding:0px;}
.vlaggetjes .eng img {background-image:url(/images/vlaggetjes.png);background-repeat:no-repeat;background-position:0px -11px;height:11px;display:block;margin:4px 0px 0px 2px;padding:0px;}
#sideNieuwsbrief {width:28px;height:130px;margin:0px 0px 4px 0px;padding:0px;}
#sideNieuwsbrief p {margin:0px;padding:0px;}
.social .facebook {background-image:url(/images/social_small.png);background-repeat:no-repeat;background-position:0px 0px;display:block;}
.social .twitter {background-image:url(/images/social_small.png);background-repeat:no-repeat;background-position:0px -19px;display:block;}
.social .ipad {background-image:url(/images/social_small.png);background-repeat:no-repeat;background-position:0px -38px;display:block;}
.clear {clear:both;display:none;}

Zo doen ze dat!

Met vriendelijke groet,
CSShunter