sade tasarim
Demo
Tasarım üzerindeki yazı kodu:
<div id="icerik">
<div id="ust">
<div id="logo"><a href="#" title="Anasayfaya Git"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/dfhfgh.png" alt="Logo" border="0" /></a></div>
</div>
<div id="ustmenu">
<ul>
<li class="ilkmenu"><a href="#" title="Anasayfa">Anasayfa</a></li>
<li><a href="#" title="acıklama">başlık</a></li>
<li><a href="#" title="acıklama">başlık</a></li>
<li><a href="#" title="acıklama">başlık</a></li>
<li><a href="#" title="acıklama">başlık</a></li>
</ul>
</div>
<div id="govde">
<div id="solkisim">
<div id="solkisim-icerik">
Tasarım altındaki yazı kodu:
</div>
</div>
<div id="sagmenu">
<div id="sagmenu-icerik">
<div id="sosyal"><a href="#" title="Facebook" target="_blank"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/facebook.png" alt="Facebook" height="32" width="32" border="0" /></a> <a href="#" title="Twitter" target="_blank"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/twitter.png" alt="Twitter" height="32" width="32" border="0" /></a> <a href="#" title="Google+" target="_blank"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/google.png" alt="Google+" height="32" width="32" border="0" /></a> <a href="#" title="Youtube" target="_blank"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/youtube.png" alt="Youtube" height="32" width="32" border="0" /></a> <a href="#" title="RSS" target="_blank"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/rss.png" alt="RSS" height="32" width="32" border="0" /></a></div>
<div class="sagmenu-kutu">
<div class="sagmenu-kutu-baslik">Katagoriler</div>
<ul>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
<li><a href="#" title="acıklama" class="tipsyup">baslık</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="temizle">copyright 2012</div>
</div>
Css kodu:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
body {
background: #FFF url(https://img.webme.com/pic/c/css-tasarimdeneme/bg2.png) repeat-x;
font-family:verdana, arial, "times new roman";
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
#icerik{
width: 950px;
margin: 0px auto;
}
#ust{
height: 60px;
margin: 60px 0 15px 0;
}
#logo{
float: left;
width: 470px;
height: 62px;
}
#logo a{
float: left;
width: 370px;
height: 62px;
}
#logo a img:hover{
opacity: 0.80;
filter: alpha(opacity=80);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#ustmenu{
width: 948px;
height: 38px;
border: 1px solid #A6A6A6;
background: transparent url(https://img.webme.com/pic/c/css-tasarimdeneme/menubg.png) repeat-x;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#ustmenu ul {
margin:0;
padding:0;
}
#ustmenu ul li {
display:block;
float:left;
margin:0;
background: transparent url(https://img.webme.com/pic/c/css-tasarimdeneme/menubg.png) repeat-x;
}
#ustmenu ul li a {
display:block;
float:left;
height: 14px;
color: #555;
font-family: Tahoma, sans-serif;
font-size: 12px;
font-weight: bold;
line-height:16px;
text-shadow: #F8F8F8 1px 1px 0;
text-decoration:none;
padding:12px 19px;
background: transparent url(https://img.webme.com/pic/c/css-tasarimdeneme/menu-ayrac.png) no-repeat top right;
}
#ustmenu ul li a:hover{
background: #FFF url(https://img.webme.com/pic/c/css-tasarimdeneme/menu-ayrac.png) no-repeat top right;
}
#ustmenu ul li a:active{
color: #264A97;
}
#ustmenu ul .sonmenu a{
background: none;
padding-right: 0;
}
#ustmenu ul .sonmenu a:hover{
background: #FFF;
}
#ustmenu ul .sonmenu a:hover - #ustmenu{
background: none!important;
}
#ustmenu ul .ilkmenu{
-webkit-border-radius: 3px!important;
-moz-border-radius: 3px!important;
border-radius: 3px!important;
}
#ustmenu ul .ilkmenu a:hover{
background: #FFF url(https://img.webme.com/pic/c/css-tasarimdeneme/menu-ayrac.png) no-repeat top right;
-webkit-border-radius: 3px!important;
-moz-border-radius: 3px!important;
border-radius: 3px!important;
}
#ustmenu li ul {
display: none;
width: 196px;
background-color: #FFF;
border: 1px solid #A6A6A6;
border-top: none;
position:absolute;
margin: 39px 0 0 -1px;
padding: 0;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 2px rgba(0,0,0,0.2);
}
#ustmenu li ul li {
display:block;
float:left;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#ustmenu li ul li a:link, #ustmenu li ul li a:visited {
width: 158px;
background: #FFF;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#ustmenu li ul li a:hover {
background: #F4F6F9;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#ustmenu li ul li a.altmenu:hover {
background: #F4F6F9;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#govde{
float: left;
width: 948px;
background: #FFF url(https://img.webme.com/pic/c/css-tasarimdeneme/sol-cizgi.png) right repeat-y;
background-position: 714px 0;
border: 1px solid #A6A6A6;
margin: 15px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#solkisim{
float: left;
width: 718px;
}
#solkisim-icerik{
padding: 15px 19px 15px 15px;
font-size: 12px;
}
#sagmenu{
float: right;
width: 230px;
}
#sagmenu-icerik{
padding: 15px;
font-size: 12px;
}
.sagmenu-kutu{
margin-bottom: 15px;
}
.sagmenu-kutu-baslik{
width: 178px;
height: 15px;
padding: 9px 10px;
color:#555;
text-shadow: #FFF 1px 1px 0;
font-size: 13px;
font-weight: bold;
line-height: 15px;
background: transparent url(https://img.webme.com/pic/c/css-tasarimdeneme/menubg.png) repeat-x;
border: 1px solid #CCC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.sagmenu-kutu ul {
margin: 5px 5px 0px 3px;
padding:0;
}
.sagmenu-kutu ul li{
list-style-type: none;
padding: 5px 0px 5px 17px;
background: url(https://img.webme.com/pic/c/css-tasarimdeneme/listele.png) no-repeat left 7px;
}
.sagmenu-kutu ul li a{
font-size: 11px;
font-family: Verdana;
color: #333;
text-decoration: none;
}
.sagmenu-kutu ul li a:hover{
color: #264A97;
text-decoration: underline;
}
.sagmenu-kutu ul li a:active{
color: #264A97;
text-decoration: none;
}
#sosyal{
margin: 0 0 15px 3px;
height: 32px;
}
.blog-ozet-yazi{
padding: 0 3px;
}
.blog-ozet-yazi{
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #CCC;
min-height: 75px;
}
.blog-ozet-yazi h1{
margin: 0;
padding: 0;
color: #555;
font-size: 16px;
font-family: Tahoma, sans-serif;
line-height: 1.7em;
font-weight: bold;
}
.blog-ozet-yazi h1 a{ color: #555; }
.blog-ozet-yazi h1 a:hover{ color: #264A97; }
.blog-ozet-yazi p{
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: Verdana;
line-height: 1.7em;
}
.blog-ozet-yazi img{
float: left;
margin: 7px 10px 0 0;
}
Blog kodu:
<div class="blog-ozet-yazi"><img title="maskot" alt="maskot" src="https://img.webme.com/pic/h/html-kodlari-dene/maskot1.png" width="75" height="75" />
<h1><a href="#" title="baslık acıklama">baslık</a></h1>
<p>acıklama <a href="#" title="Devamını Oku">...</a></p>
</div>
YORUM YAPMAYI UNUTMAYIN DÜŞÜNCELERİNİZİ PAYLAŞIN
Bugün 49 ziyaretçi (55 klik) kişi burdaydı!