Bedava Sitem I Css tasarimlari - mavims

4 Mayıs 2011 Çarşamba

Bedava Sitem I Css tasarimlari - mavims - 2011

Do you like this story?

Bedava sitemde güzel site yapmak istiyorsanız öncelikle güzel bir tr.gg tasarımına ihtiyacınız olucak şablonmatik olarak heryede yayınlanan klasik şablonları bizde bulamazsınız, bedava sitem css şablonlarının seçkin örneklerini sitemizden gönül rahatlığıyla seçebilirsiniz...

Tasarım üstü kodu

<html> <br /> <head> <br />    <title>Kişisel Site Psd to Css // ruhum</title> <br />     <link rel="stylesheet" href="style.css" type="text/css" /> <br />     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /> </head> <br /> <body> <br /> <div class="Sayfa"><br />     <br />    <div class="Logo"><img src="http://i23.servimg.com/u/f23/13/73/65/25/logo11.png" /></div>    <br />     <br />  <br /> <div class="Ust">    <div class="UstBg">        <div class="UstBaglantilar">            <div class="AnaSayfaikon"><a href=" http://sablonmatik.blogspot.com/">Home</a></div>            <div class="UyeOlikon"><a href=" http://sablonmatik.blogspot.com/">Register</a></div>            <div class="istatistiklerikon"><a href=" http://sablonmatik.blogspot.com/">Stats</a></div>            <div class="iletisimikon"><a href=" http://sablonmatik.blogspot.com/">Contact</a></div>        </div>        <a href=" http://sablonmatik.blogspot.com/"><img src="http://i23.servimg.com/u/f23/13/73/65/25/rss10.png" class="Rss" /></a> <br />     </div></div> <br />     <br />     <br /> <div class="ArkaplanOrta">    <br />      <br /> <div class="SolDuzen"><br />      <br />     <div class="Sol">        <div class="SolUst">            <div class="SolUstYazi">User Panel</div>        </div>            <div class="SolOrta">            <br />                 <div class="KullaniciAdiSifre">User Name</div>                <div class="Sil"></div>                <div class="KullanciGirisiDuzen">                <div class="KullaniciSol"></div><input type="text" class="KullaniciSag" /> <br />                 </div>                <br />                 <div class="KullaniciAdiSifre">User Name</div>                <div class="Sil"></div>                <div class="KullanciGirisiDuzen">                <div class="ParolaSol"></div><input type="password" class="KullaniciSag" /> <br />                 </div>                <div class="Sil"></div>                <br />                 <input type="submit" class="GirisButonu" value="Enter..." /> <br />                 <div class="ParolamiUnuttum">                <div class="Sifremiunuttum"></div>                <a href="#">Lost Password?</a> <br />                 </div>            </div>        <div class="SolAlt"></div>    </div>     <br />     <br />     <br /> <div class="Sil"></div><br />      <br /> <div class="Sol">    <div class="SolUst">        <div class="SolUstYazi">Category</div>    </div>    <div class="SolOrta">        <div class="Kategoriler">        <div class="Kirmizi"></div><a href=" http://sablonmatik.blogspot.com/">Freeware</a> <br />         </div>        <br />         <div class="Kategoriler">        <div class="Yesil"></div><a href=" http://sablonmatik.blogspot.com/">Portable</a> <br />         </div>        <br />         <div class="Kategoriler">        <div class="Yesil"></div><a href=" http://sablonmatik.blogspot.com/">Photoshop Tuts</a> <br />         </div>        <br />         <div class="Kategoriler">        <div class="Yesil"></div><a href=" http://sablonmatik.blogspot.com/">Illustrator Tuts</a> <br />         </div>        <br />         <div class="Kategoriler">        <div class="Yesil"></div><a href=" http://sablonmatik.blogspot.com/">Video Tuts</a> <br />         </div>        <br />         <div class="Kategoriler">        <div class="Yesil"></div><a href=" http://sablonmatik.blogspot.com/">Technology</a> <br />         </div>        <br />         <div class="Kategoriler">        <div class="Yesil"></div><a href=" http://sablonmatik.blogspot.com/">Şablonmatik</a> <br />         </div>    </div>    <div class="SolAlt"></div></div>     <br /> <br /> <div class="Sil"></div><br />      <br /> <div class="Sol">    <div class="SolUst">        <div class="SolUstYazi">Advertise Panel</div>    </div>    <div class="SolOrta">        <img src="http://i23.servimg.com/u/f23/13/73/65/25/reklam12.png" width="197" height="165" class="SolReklam"  />            <br />     </div>    <div class="SolAlt"></div></div>     <br /> <br /> <div class="Sil"></div><br />      <br /> <div class="Sol">    <div class="SolUst">        <div class="SolUstYazi">Connections</div>    </div>    <br />     <div class="SolOrta">        <div class="BaglantilarDuzen">            <a href="#"><img src="http://i23.servimg.com/u/f23/13/73/65/25/baglan10.png" width="38" height="38" class="Şablonmatik"  /></a> <br />             <a href="#"><img src="http://i23.servimg.com/u/f23/13/73/65/25/kalp10.png" width="38" height="38" class="Baglantilar"  /></a> <br />             <a href="#"><img src="http://i23.servimg.com/u/f23/13/73/65/25/baglan10.png" width="38" height="38" class="Baglantilar"  /></a> <br />             <a href="#"><img src="http://i23.servimg.com/u/f23/13/73/65/25/yildiz10.png" width="38" height="38" class="Baglantilar"  /></a> <br />         </div>    </div>    <div class="SolAlt"></div></div>     <br /> <br /> <div class="Sil"></div></div>    <br />

Tasarım altı kodu

Css kodu

table {margin-left: auto;margin-right: auto} <br /> h1#title{display: none;} <br /> h2#title span {display: none;} <br /> div.header{display: none;} <br /> li.nav_element{list-style-type: none;} <br /> li.nav_element{display: none;} <br /> <br /> body{ <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/arkapl16.jpg); <br />    background-repeat: no-repeat; <br />    text-align: center; <br />     <br /> } <br /> <br /> .Sayfa{ <br />    width: 900px; <br />    margin-left: auto; <br />    margin-right: auto; <br /> } <br /> /*### Logo Başladıngıç ###*/ <br /> .Logo{ <br />    width: 900px; <br />    height: 115px; <br />    margin-top: 27px; <br /> } <br /> /*### Logo Bitti ###*/ <br /> <br /> /*### Üst Bağlantılar Başlangıç ###*/ <br /> .Ust{ <br />    width: 900px; <br />    height: 39px; <br />    margin-top: 8px; <br /> } <br /> <br /> .UstBg{ <br />    width: 900px; <br />    height: 49px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/ust11.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    text-align: left; <br /> } <br /> <br /> .UstBaglantilar{ <br />    width: 630px; <br />    height: 19px; <br />    float: left; <br />    margin-top: 19px; <br />    margin-left: 70px; <br />    position: absolute; <br />    font: 15px arial; <br />    color: #FFF; <br /> } <br /> <br /> .AnaSayfaikon{ <br />    width: 138px; <br />    float: left; <br /> } <br /> <br /> .UyeOlikon{ <br />    width: 104px; <br />    margin-left: 45px; <br />    float: left; <br /> } <br /> <br /> .istatistiklerikon{ <br />    width: 138px; <br />    margin-left: 40px; <br />    float: left; <br /> } <br /> <br /> .iletisimikon{ <br />    width: 117px; <br />    margin-right: 10px; <br />    float: right; <br /> } <br /> <br /> .Rss{ <br />    width: 49px; <br />    float: right; <br />    margin-top: 13px; <br />    border: 0px; <br /> } <br /> <br /> .UstBaglantilar a:link, .UstBaglantilar a:visited{ <br />    color: #FFF; <br />    text-decoration: none; <br /> } <br /> <br /> .UstBaglantilar a:hover, .UstBaglantilar a:active{ <br />    color: #FFF; <br />    text-decoration: none; <br /> } <br /> <br /> /*### Üst Bağlantılar Bitiş ###*/ <br /> <br /> /*### İçerik Arkaplan Başlangıç ###*/ <br /> .ArkaplanUst{ <br />    width: 900px; <br />    height: 6px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/navbar18.png); <br />    background-repeat: no-repeat; <br /> } <br /> <br /> .ArkaplanOrta{ <br />    width: 900px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/icsayf10.png); <br />    float: left; <br />    margin-top: 0px; <br /> } <br /> <br /> .ArkaplanAlt{ <br />    width: 900px; <br />    height: 45px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/icsayf11.png); <br />    background-repeat: no-repeat; <br />    float: left; <br /> } <br /> /*### İçerik Arkaplan Başlangıç ###*/ <br /> <br /> /*### Sol Menü Başlangıç ###*/ <br /> .Sol{ <br />    width: 220px; <br />    float: left; <br />    margin-top: 7px; <br />    margin-bottom: 13px; <br /> } <br /> <br /> .SolDuzen{ <br />    width: 220px; <br />    float: left; <br />    margin-left: 15px; <br /> } <br /> <br /> .SolUst{ <br />    width: 219px; <br />    height: 56px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/solust10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br /> } <br /> <br /> .SolUstYazi{ <br />    font: 14px arial; <br />    font-weight: bold; <br />    color: #FFF; <br />    margin-top: 23px; <br />    float: left; <br />    margin-left: 24px; <br /> } <br /> .SolOrta{ <br />    width: 217px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/solort10.png); <br />    background-repeat: repeat-y; <br />    float: left; <br />    margin-left: 2px; <br /> } <br /> <br /> .SolAlt{ <br />    width: 212px; <br />    height: 4px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/solalt11.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    margin-left: 7px; <br /> } <br /> <br /> .KullaniciAdiSifre{ <br />    width: 142px; <br />    font: 14px arial; <br />    font-weight: bold; <br />    color: #656565; <br />    float: left; <br />    margin-left: 14px; <br />    text-align: left; <br />    margin-top: 10px; <br /> } <br /> <br /> .KullaniciSol{ <br />    width: 29px; <br />    height: 23px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/kullan10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    margin-left: 14px; <br /> } <br /> <br /> .KullaniciSag{ <br />    width: 142px; <br />    height: 23px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/kullan11.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    border: 0px; <br />    font: 14px arial; <br />    color: #8c8c8c; <br />    font-weight: bold; <br />    padding-top: 3px; <br /> } <br /> <br /> .KullanciGirisiDuzen{ <br />    width: 199px; <br />    height: 23px; <br />    float: left; <br /> } <br /> .ParolaSol{ <br />    width: 29px; <br />    height: 23px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/parola10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    margin-left: 14px; <br /> } <br /> <br /> .GirisButonu{ <br />    width: 84px; <br />    height: 23px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/girisb10.png); <br />    background-repeat: no-repeat; <br />    background-color: #FFF; <br />    float: right; <br />    margin-right: 29px; <br />    margin-top: 5px; <br />    font: 13px arial; <br />    font-weight: bold; <br />    color: #FFF; <br />    padding-bottom: 5px; <br />    border: 0px; <br /> } <br /> <br /> .ParolamiUnuttum{ <br />    width:142px; <br />    height: 16px; <br />    float: left; <br />    margin-left: 14px; <br />    font: 13px arial; <br />    font-weight: bold; <br />    color: #0081d7; <br />    text-align: left; <br />    margin-top: 7px; <br /> } <br /> <br /> .ParolamiUnuttum a:link, .ParolamiUnuttum a:visited{ <br />    color: #0081d7; <br /> } <br /> <br /> .ParolamiUnuttum a:hover, .ParolamiUnuttum a:active{ <br />    color: #0081d7; <br /> } <br /> <br /> .Sifremiunuttum{ <br />    width:16px; <br />    height: 16px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/parola11.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    margin-right: 3px; <br />    margin-top: 1px; <br /> } <br /> <br /> .Kategoriler{ <br />    width: 185px; <br />    float: left; <br />    text-align: left; <br />    font: 14px arial; <br />    font-weight: bold; <br />    color: #404040; <br />    margin-left: 14px; <br />    margin-top: 2px; <br /> } <br /> <br /> .Kategoriler a:link, .Kategoriler a:visited{ <br />    color: #404040; <br />    text-decoration: none; <br /> } <br /> <br /> .Kategoriler a:hover, .Kategoriler a:active{ <br />    color: #5b5b5b; <br />    text-decoration: underline; <br /> } <br /> <br /> .Kirmizi{ <br />    width: 21px; <br />    height: 19px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/kirmiz10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br /> } <br /> <br /> .Yesil{ <br />    width: 21px; <br />    height: 19px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/yesil10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br /> } <br /> <br /> .SolReklam{ <br />    width: 197px; <br />    height: 165px; <br />    margin-left: 4px; <br /> } <br /> <br /> .BaglantilarDuzen{ <br />    width: 196px; <br />    float: left; <br />    margin-left: 15px; <br /> } <br /> <br /> .Baglantilar{ <br />    width: 38px; <br />    height: 38px; <br />    float: left; <br />    margin-left: 7px; <br />    border: 0px; <br /> } <br /> <br /> .Sil{ <br />    clear: both; <br /> } <br /> /*### Sol Menü Bitiş ###*/ <br /> <br /> /*### Orta Kısım(İçerik) Başlangıç ###*/ <br /> .OrtaKisim{ <br />    width: 642px; <br />    float: left; <br />    margin-left: 12px; <br />    margin-top: 7px; <br />    margin-bottom: 11px; <br /> } <br /> <br /> .icOrtaUst{ <br />    width: 642px; <br />    height: 45px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/icorta10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br /> } <br /> <br /> .icOrtaOrta{ <br />    width: 642px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/icorta11.png); <br />    background-repeat: repeat-y; <br />    float: left; <br /> } <br /> <br /> .icOrtaAlt{ <br />    width: 642px; <br />    height: 29px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/icorta12.pngg); <br />    background-repeat: no-repeat; <br />    float: left; <br /> } <br /> <br /> .Baslik{ <br />    width: 642px; <br />    height: 38px; <br />    float: left; <br />    margin-top: 7px; <br /> } <br /> <br /> .Baslikikon{ <br />    width: 32px; <br />    height: 30px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/baslik10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    margin-left: 13px; <br /> } <br /> <br /> .BaslikYazi{ <br />    font: 24px arial; <br />    color: #006cc2; <br />    float: left; <br />    margin-top: 5px; <br />    margin-left: 5px; <br /> } <br /> <br /> .Puanlama{ <br />    width: 67px; <br />    font: 16px arial; <br />    color: #006cc2; <br />    float: right; <br />    text-align: left; <br />    margin-top: 8px; <br /> } <br /> <br /> .PuanlamaYazi{ <br />    font: 16px arial; <br />    color: #006cc2; <br />    float: left; <br /> } <br /> <br /> .YesilButonArti{ <br />    width: 17px; <br />    height: 17px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/arti10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    border: 0px; <br /> } <br /> <br /> .KirmiziButonEksi{ <br />    width: 17px; <br />    height: 17px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/eksi10.png); <br />    background-repeat: no-repeat; <br />    float: right; <br />    border: 0px; <br />    margin-right: 13px; <br /> } <br /> <br /> .icerik{ <br />    width: 612px; <br />    font: 13px arial; <br />    color: #424242; <br />    margin-left: 20px; <br />    margin-top: 9px; <br />    float:left; <br />    text-align: left; <br />    padding-bottom: 11px; <br /> } <br /> <br /> .icerikSolResim{ <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/resim110.png); <br />    border: 4px solid #e1e1e1; <br />    float: left; <br />    margin-right: 8px; <br /> } <br /> <br /> .Aciklama{ <br />    width: 601px; <br />    float: left; <br />    margin-left: 20px; <br />    font: 16px arial; <br />    color: #515151; <br /> } <br /> <br /> .Yonetici{ <br />    height: 22px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/yoneti10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    padding-left: 26px; <br /> } <br /> <br /> .AciklamaYazi{ <br />    font: 16px arial; <br />    color: #515151; <br />    float: left; <br />    display: block; <br /> } <br /> <br /> .Yorum{ <br />    height: 24px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/yorums10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    margin-left: 34px; <br />    padding-left: 32px; <br /> } <br /> <br /> .Tarih{ <br />    height: 24px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/tarih10.png); <br />    background-repeat: no-repeat; <br />    float: left; <br />    margin-left: 34px; <br />    padding-left: 27px; <br /> } <br /> <br /> .DevaminiOku{ <br />    width: 84px; <br />    height: 23px; <br />    background-image: url(http://i23.servimg.com/u/f23/13/73/65/25/devami10.png); <br />    background-repeat: no-repeat; <br />    background-color: #FFF; <br />    float: right; <br />    border: 0px; <br />    font: 11px arial; <br />    font-weight: bold; <br />    color: #FFF; <br />    padding-top: 2px; <br /> } <br /> <br /> .DevaminiOku a:link, .DevaminiOku a:visited{ <br />    color: #FFF; <br />    text-decoration: none; <br /> } <br /> <br /> .DevaminiOku a:hover, .DevaminiOku a:active{ <br />    color: #FFF; <br />    text-decoration: none; <br /> } <br /> <br /> /*### Orta Kısım(İçerik) Bitiş ###*/ <br /> <br /> /*### Alt Bilgiler Başlangıç ###*/ <br /> .AltYaziBaglantilar{ <br />    font: 13px arial; <br />    color: #e8e8e8; <br />    float: left; <br />    margin-top: 15px; <br />    margin-left: 22px; <br /> } <br /> <br /> .AltYaziBaglantilar a:link, .AltYaziBaglantilar a:visited{ <br />    color: #e8e8e8; <br />    text-decoration: none; <br /> } <br /> <br /> .AltYaziBaglantilar a:hover, .AltYaziBaglantilar a:active{ <br />    color: #e8e8e8; <br />    text-decoration: underline; <br /> } <br /> <br /> <br /> .AltYaziAciklama{ <br />    font: 13px arial; <br />    color: #e8e8e8; <br />    float: right; <br />    margin-top: 15px; <br />    margin-right: 16px; <br /> } <br /> <br /> /*### Alt Bilgiler Bitiş ###*/<br />

Şablonmatik

Trending: Bloggermint Blogger Template

4 Mayıs 2011 Çarşamba

Bedava Sitem I Css tasarimlari - mavims - 2011

Do you like this story?

This post was written by: Franklin Manuel

0 Responses to “Bedava Sitem I Css tasarimlari - mavims - 2011”

Yorum Gönder

Etiketler

Sponsors

Follow Us On Facebook

Test

Toplam ziyaret