Mikro-Blog'un Güzel Tasarımı

<script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript"></script>
<script src="myriad-pro.cufonfonts.js" type="text/javascript"></script>
<script type="text/javascript">
         Cufon.replace('h2', {
                  });
               Cufon.replace(' #ustmenu');
         
               Cufon.replace(' h3', {
                  });
</script>


<div id="tasarim">
   <div class="logo"><a href="#"><img src="http://img.webme.com/pic/m/mikro-blog/logo_kirmizi.png" /></a></div>
    <!-- UST MENU -->
  <div id="ustmenu">
      <ul>
           <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Hakkimda</a></li>
            <li><a href="#">Iletisim</a></li>
            <li><a href="#">Forum</a></li>
        </ul>
    </div>
    <!-- UST DUYURULAR -->
    <div id="ustduyuruvs">
       <div class="duyuru">
        <h3>Duyurular;</h3>
           <ul>
               <li><a href="#">Duyuru Buraya gelicek.</a></li>
                <li><a href="#">Duyuru Buraya gelicek.</a></li>
                <li><a href="#">Duyuru Buraya gelicek.</a></li>
                <li><a href="#">Duyuru Buraya gelicek.</a></li>
                <li><a href="#">Duyuru Buraya gelicek.</a></li>
            </ul>
      </div>
        <div class="duyuruforum">
        <h3>Bedava-Sitem Forum Konularim;</h3>
            <ul>
               <li><a href="#">Forum Konularim Buraya gelicek.</a></li>
                <li><a href="#">Forum Konularim Buraya gelicek.</a></li>
                <li><a href="#">Forum Konularim Buraya gelicek.</a></li>
                <li><a href="#">Forum Konularim Buraya gelicek.</a></li>
                <li><a href="#">Forum Konularim Buraya gelicek.</a></li>
            </ul>
      </div>
    </div>
    <!-- ICERIK -->
    <div class="icerikust"></div>
    <div class="icerikorta">
        <div class="sol">
           <div class="mmenubaslik">MENU BASLIK</div>
                <ul>
                   <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                </ul>
            <div class="kmenubaslik">MENU BASLIK</div>
            <ul>
                   <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                </ul>
            <div class="ymenubaslik">MENU BASLIK</div>
            <ul>
                   <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Anasayfa</a></li>
                </ul>
        </div>
      <div class="sag">
           <div class="sagbaslik">BURADASIN</div>
        <div class="sagicerik">

</div>
                    </div>
        </div>
            <div class="altt"></div>

    </div>
</div>

/*Menü Gizleme Kodu*/
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

/*Reklam Ortalama Kodu*/
table {margin-left: auto;margin-right: auto}

body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000;
}
a {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #900;
}
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #900;
}
a:hover {
   text-decoration: none;
   color: #F00;
}
a:active {
   text-decoration: none;
   color: #900;
}

img{
   border: none;
}

h3{
   font-size: 18px;
}

body{
   background: #fff;
   background: url(http://www.backgroundlabs.com/backgrounds/78.gif);
}

#tasarim{
   width: 950px;
   margin-left: auto;
   margin-right: auto;
}

.logo{
   width: 317px;
   height: 77px;
   float: left;
   margin: 0 0 0 37px;
}

#ustmenu{
   width: 905px;
   height: 49px;
   float: left;
   background:url(http://img.webme.com/pic/m/mikro-blog/ustmenu_bg.png);
   padding: 22px 0 0 45px;
   font-family: "Myriad Pro";
   font-weight: bold;
}

#tasarim #ustmenu ul {
   font-family: "Myriad Pro";
   font-size: 18px;
   font-weight: bold;
   text-decoration: none;
   margin: 0;
   padding: 0;
}
#tasarim #ustmenu ul li {
   display: inline;
   padding-right: 30px;
   margin: 0;
}
#tasarim #ustmenu ul li a {
   font-family: "Myriad Pro";
   font-size: 18px;
   font-weight: bold;
   color: #FFF;
   text-decoration: none;
   padding: 5px;
}
#tasarim #ustmenu ul li a:hover {
   text-decoration: none;
   padding: 2px 5px 3px 5px;
   background: url(http://img.webme.com/pic/m/mikro-blog/menu_hover.png);
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}

#ustduyuruvs{
   width: 950px;
   height: 202px;
   background:url(http://img.webme.com/pic/m/mikro-blog/duyurularvs.png);
   float: left;
}


.duyuru{
   width: 365px;
   height: 175px;
   float: left;
   margin: -8px 0 0 80px;
   color: #f91364;
}
.duyuruforum{
   width: 365px;
   height: 175px;
   float: right;
   margin: -8px 87px 0 0;
   color: #f91364;
}

/*DUYURULAR*/
#tasarim #ustduyuruvs .duyuru ul {
   margin: -15px 0 0 0;
   padding: 0px;
}
#tasarim #ustduyuruvs .duyuru ul li {
   line-height: 25px;
   border-bottom: 1px dashed #e3e7e9;
   list-style: none;
}
#tasarim #ustduyuruvs .duyuru ul li a {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000;
   font-weight: bold;
   text-decoration: none;
}

/*FORUM KONULARIM*/
#tasarim #ustduyuruvs .duyuruforum ul {
   margin: -15px 0 0 0;
   padding: 0px;
}
#tasarim #ustduyuruvs .duyuruforum ul li {
   line-height: 25px;
   border-bottom: 1px dashed #e3e7e9;
   list-style: none;
}
#tasarim #ustduyuruvs .duyuruforum ul li a {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000;
   font-weight: bold;
   text-decoration: none;
}

/*ICERIK*/

.icerikust{
   width: 950px;
   height: 21px;
   background: url(http://img.webme.com/pic/m/mikro-blog/icerik_ust.png);
   float: left;
}

.icerikorta{
   width: 950px;
   height: 100%;
   background:url(http://img.webme.com/pic/m/mikro-blog/icerik_bg.png);
   float: left;
}

.sol{
   width: 266px;
   height: 100%;
   float: left;
   margin: 0 0 0 59px;
}


.sag{
   width: 545px;
   height: 100%;
   float: right;
}

.sagicerik{
   width: 515px;
   height: 100%;
   float: right;
   margin: 0 84px 0 0;
}


/*MENU BASLIKLAR*/

.mmenubaslik{
   width: 246px;
   height: 36px;
   background:url(http://img.webme.com/pic/m/mikro-blog/mavi_menubaslik.png);
   float: left;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #fff;
   padding: 4px 0 0 20px;
}

.kmenubaslik{
   width: 246px;
   height: 36px;
   background:url(http://img.webme.com/pic/m/mikro-blog/kirmizi_menubaslik.png);
   float: left;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #fff;
   padding: 4px 0 0 20px;
}

.ymenubaslik{
   width: 246px;
   height: 36px;
   background:url(http://img.webme.com/pic/m/mikro-blog/yesil_menubaslik.png);
   float: left;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #fff;
   padding: 4px 0 0 20px;
}

/*SOL MENU*/
#tasarim .icerikorta .sol ul {
   padding: 0px;
   margin-left: 30px;
}
#tasarim .icerikorta .sol ul li {
   list-style-type: none;
}
#tasarim .icerikorta .sol ul li a {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000;
   text-decoration: none;
   line-height: 25px;
   padding-left: 20px;
   background: url(http://img.webme.com/pic/m/mikro-blog/yildizz.png) left center no-repeat;
}
#tasarim .icerikorta .sol ul li a:hover {
   text-decoration: underline;
}

/*SAG TARAF*/
.sagbaslik{
   width: 525px;
   height: 36px;
   background: url(http://img.webme.com/pic/m/mikro-blog/sag_baslik.png);
   float: right;
   margin: 0 61px 0 0;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #fff;
   padding: 4px 0 0 20px;
}


.altt{
   width: 950px;
   height: 43px;
   background:url(http://img.webme.com/pic/m/mikro-blog/alt.png);
   float: left;
   margin-bottom: 20px;
}