CSS3 position

by dafin defandaky

HTML

<div class='db-art-social'>
    <span class='db-art-g'>
        <a class="db-social-connect-buttons" id="db-social-connect-google" target="_blank" href="#">
   <span class="db-social-connect-icon" id="db-connect-google-icon"></span>
  </a>
    </span>
    <span class='db-art-f'>
        <a class="db-social-connect-buttons" id="db-social-connect-facebook" target="_blank" href="#">
   <span class="db-social-connect-icon" id="db-connect-facebook-icon"></span>
  </a>
    </span>
    <span class='db-art-t'>
        <a class="db-social-connect-buttons" id="db-social-connect-twitter" target="_blank" href="#">
   <span class="db-social-connect-icon" id="db-connect-twitter-icon"></span>
  </a>
    </span>
    <span class='db-art-h'>
        Temukan Saya
    </span>
    <span class='db-art-s'>
        <div class="newsletter-form">
            <div class="newsletter-form-h"><b>Berlangganan</b>: tulis alamat email anda dan tekan tombol kirim.</div>
<fieldset>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=defandaky', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="[email protected]..." />
          <input name="uri" type="hidden" value="defandaky" />
          <input name="loc" type="hidden" value="en_US" />
    <button class="subscribe" name="sumbit" type="submit" value="Kirim">Kirim</button>
        </form>
</div>
</fieldset>
</div>            
    </span>    
</div>

CSS

.db-art-social  {position:relative;overflow: hidden;width:300px;height:280px;background:#252525;margin;0;padding:10px;}
.db-art-g {width:80px;height:90px;background:#EB5E4C;overflow: hidden;position:absolute;left:10px;top:50px;text-align:center;font-weight:500;color:#Fff;padding:10px 18px;margin:0}
.db-art-f {width:65px;height:110px;position:absolute;background:#5D82D1;overflow: hidden;top:50px;left:110px;text-align:center;font-weight:500;color:#Fff;padding:10px 18px;margin:0}
.db-art-t {width:64px;height:110px;left:210px;background:#40BFF5;overflow: hidden;top:50px;position:absolute;text-align:center;font-weight:500;color:#Fff;padding:10px 18px;margin:0}
.db-art-h {width:300px;height:40px;position:absolute;overflow: hidden;left:10px;top:10px;background:#369;
	color: #fff;
	display: inline-block;
	text-align: center;
	text-decoration: none;
    text-transform: uppercase;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;}
.db-art-s {width:280px;height:110px;position:absolute;left:10px;top:160px;background:#369;overflow: hidden;padding:10px 10px;}
.db-social-connect-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 18px auto;
    background-color: transparent;
    background-image:...