Türkiyenin En Büyük Css Tasarım Merkezi-Örnek Site Yarışması-Html Kodlar

osman talay

Tasarım üzeri

Kod:

<div id="design">
<div id="logo"></div>
<div id="slogan"></div>
<div style="clear:both;"></div>
<div id="menu_l"></div>
<div id="menu">
<div id="menu_items">

<a href="http://www.osmantalay.tr.gg">Ana Sayfa</a><img src="https://img.webme.com/pic/o/osmantalay/menu_trenn.png" style="vertical-align: middle;">

<a href="http://www.osmantalay.tr.gg/Hakkimda.htm">HakkImda</a><img src="https://img.webme.com/pic/o/osmantalay/menu_trenn.png" style="vertical-align: middle;">
<a href="http://www.osmantalay.tr.gg/Defter.htm">Z.Defterİ</a>
<img src="https://img.webme.com/pic/o/osmantalay/menu_trenn.png" style="vertical-align: middle;">
<a href="http://maxitasarim.tk">FORUM</a><img src="https://img.webme.com/pic/o/osmantalay/menu_trenn.png" style="vertical-align: middle;">
<a href="http://www.osmantalay.tr.gg/Siteni-Ekle.htm">Sİtenİ Ekle</a><img src="https://img.webme.com/pic/o/osmantalay/menu_trenn.png" style="vertical-align: middle;">
<a href="http://osmantalay.tr.gg">Eklenecek</a><img src="https://img.webme.com/pic/o/osmantalay/menu_trenn.png" style="vertical-align: middle;">
<a href="http://osmantalay.tr.gg">Eklenecek</a><img src="https://img.webme.com/pic/o/osmantalay/menu_trenn.png" style="vertical-align: middle;">
<a href="http://osmantalay.tr.gg">Eklenecek</a>
</div>
</div>

<div id="menu_r"></div>

<div id="content_top">

</div>
<div id="hinweis">

<div style="width: 100%; float: right; background: none repeat scroll 0% 0% rgb(255, 234, 189); padding: 3px; text-align: center;">
<b>Sitemizden Haberler:</b> Buraya Ekle </div></a>

</div>

Tasarım Altı

Kod:

<div id="header_container">

</div>
<div id="counter"><span>

</span></div>
<div id="post_content"></div>
<div id="below_content">

<div id="footer">

<div id="spalten">

<div id="spalte1">
<ul id="foot">
<img src="https://img.webme.com/pic/o/osmantalay/iconr.png" style="vertical-align: middle;" alt="" /> <b style="color: #000;">YARARLI LİNKLER</b>
<li><a href="http://www.osmantalay.tr.gg">Yakında</a></li>

<li><a href="http://www.osmantalay.tr.gg">Yakında</a></li>
<li><a href="http://www.osmantalay.tr.gg">Yakında</a></li>
</ul>
</div>

<div id="spalte2">
<ul id="foot">
<img src="https://img.webme.com/pic/o/osmantalay/iconr.png" style="vertical-align: middle;" alt="" /> <b style="color: #000;">DOST SİTELER</b>
<li><a href="http://themestudio.de/goto.php?ref=2&url=http://www.osmantalay.tr.gg" target="_blank">Yakında</a></li>
<li><a href="http://www.osmantalay.tr.gg" target="_blank">Yakında</a></li>
<li><a href="http://www.osmantalay.tr.gg" target="_blank">Yakında</a></li>

</ul>
</div>

<div id="spalte3">
<ul id="foot">
<img src="https://img.webme.com/pic/o/osmantalay/iconr.png" style="vertical-align: middle;" alt="" /> <b style="color: #000;">ÖNE ÇIKANLAR</b>
<li><a href="http://www.osmantalay.tr.gg" target="_blank">Yakında</a></li>
<li><a href="http://www.osmantalay.tr.gg">Yakında</a></li>
<li><a href="http://www.osmantalay.tr.gg">Yakında</a></li>
</ul>
</div>

<div id="spalte4">
<ul id="foot">
<img src="https://img.webme.com/pic/o/osmantalay/iconr.png" style="vertical-align: middle;" alt="" /> <b style="color: #000;">REKLAMLAR</b>
<li><a href="http://www.osmantalay.tr.gg" target="_blank">Yakında</a></li>
<li><a href="http://www.osmantalay.tr.gg" target="_blank">Yakında</a></li>
<li><a href="http://www.osmantalay.tr.gg" target="_blank">Yakında</a></li>
</ul>
</div>

</div>
</div>

<div id="content_bottom"></div>

<div id="copy">© Copyright 2010 by Osman Talay | Tüm Hakları Saklıdır | <a href="http://www.osmantalay.tr.gg">Yakında</a> | <a href="http://www.osmantalay.tr.gg">Yakında</a> | <a href="http://www.osmantalay.tr.gg">Yakında</a> | <a href="http://www.osmantalay.tr.gg">Yakında</a> | <a href="http://www.osmantalay.tr.gg">Yakında</a><a name="commentform"></a><div>

</div>

<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div>

<div id="extraDiv6"><span></span></div>
</body>
</html>

Css Bölümü

Kod:

table {margin-left: auto;margin-right: auto}

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element checked_menu{display:none;}
li.nav_element subpage{display:none;}
li.nav_element{display:none;}
#counter{display: none;}

/*Background*/

body {
background: url(https://img.webme.com/pic/o/osmantalay/bg.png) repeat;
font-family: arial, sans-serif;
font-size: 0.8em;
padding: 0px;
margin: 0px;}

#bg_top{
background: url( https://img.webme.com/pic/o/osmantalay/bg_top.png ) repeat-x;
width: 100%;
height: 300px;
position: absolute;
top: 0px;
z-index: -1;}

/*Schriftformatierung*/

p {
line-height: 1.4em;
margin:0;
padding:0 0 5px;
color:#646464;}

h1 {
color:#FE7507;
font-size: 130%;
font-weight: bold;
font-family: Helvetica, Arial,sans-serif;}

h2 {
color:#646464;
font-size:100%;
font-weight: bold;
font-family: Helvetica, Arial,sans-serif;}

a {
color:#FE7507;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
text-decoration:none;}

a:hover {
color:#FDAB4A;
text-decoration:underline;}

* { padding: 0; margin: 0; }

ul, li{
list-style-type: none;}

hr{
height: 1px;
border: 0px solid #e0e0e0;
background-color: #e0e0e0;
margin: 5px;
margin-left: 0px;
margin-right: 0px;}

img{
border: 0px;}

/*BILD-/VIDEOPOSITION*/

.left{
float: left;
padding: 8px 8px 8px 0px;}

.right{
float: right;
padding: 0px 0px 8px 8px;}

.center{
display: block;
text-align: center;
margin: 0 auto;}

.left_video{
float: left;
margin: 0px auto;
background-image: none;
width: 323px;
height: 267px;
padding: 22px;}

.right_video{
float: right;
margin: 0px auto;
background-image: none;
width: 323px;
height: 267px;
padding: 22px;}

/*Design*/

#design{
width: 911px;
margin: 10px auto;}

/*Header*/

#logo{
background: url(https://img.webme.com/pic/o/osmantalay/logotopd.gif) no-repeat;
width: 350px;
height: 90px;
margin-bottom: 10px;
float: left;}

/*CONTENT*/

#content{
width: 836px;
min-height: 450px;
background: url(https://img.webme.com/pic/o/osmantalay/content_bg.png) repeat-y;
float: left;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
color: #646464;}

#content_top{
background: url(https://img.webme.com/pic/o/osmantalay/content_top.png) no-repeat;
width: 896px;
height: 19px;
float:left;}

#content_bottom{
background: url(https://img.webme.com/pic/o/osmantalay/content_bottom.png) no-repeat;
width: 896px;
height: 19px;
float: left;}

#content_box{
background: #eeeeee;
border: 1px solid #DDDDDD;
padding: 10px;
margin: 10px;}

#hinweis{
width: 836px;
background: url(https://img.webme.com/pic/o/osmantalay/content_bg.png) repeat-y;
float: left;;
padding-right: 30px;
padding-left: 30px;
padding-top: 5px;
color: #646464;}
#hinweis a{
color: #646464;}

/*SUBPAGE*/

/*MENU*/

#menu {
background-image:url(https://img.webme.com/pic/o/osmantalay/menu_bg.png);
height:38px;
width: 870px;
float: left;
margin-bottom: 10px;}

#menu_r {
background-image:url(https://img.webme.com/pic/o/osmantalay/menu_r.png);
width:13px;
height:38px;
display:inline;
float:left;}

#menu_l {
background-image:url(https://img.webme.com/pic/o/osmantalay/menu_l.png);
width:13px;
height:38px;
display:inline;
float:left;
margin-left: 4px;}

#menu_items {
float: left;
height:28px;
display:inline;
padding-top: 10px;}

#menu_items a:link,
#menu_items a:visited,
#menu_items a:hover {
font-family:Arial, Helvetica, Verdana, sans-serif;
font-weight:bold;
font-size: 11px;
text-transform: uppercase;
text-decoration:none;
color:#fff;
margin:0px 10px;}

#menu_items a:hover {color: #3b3b3b;}

/*Foot-Menu*/

#footer{
width: 896px;
height: 112px;
background: url(https://img.webme.com/pic/o/osmantalay/content_bg.png) repeat-y;
float: left;}

#spalten{margin: 0px auto; width: 781px}

#spalte1, #spalte2, #spalte3, #spalte4{
width: 184px;
height: 90px;
float: left;
border-right: 1px solid #bbbbbb;
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
padding: 5px;
background: #e5e5e5;}

#spalte1{border-left: 1px solid #bbbbbb;}

#foot li a {
display: block;
width: 170px;
padding: 5px;
padding-top: 3px;
padding-bottom: 3px;
background: transparent;
border-bottom: 1px solid #bbbbbb;
text-decoration: none;
font-weight: normal;
color: #646464;
font-family:Arial, Helvetica, Verdana, sans-serif;
margin: 0px;}

#foot li a:hover {
background: #ffeabd;
color: #000;}

/*Tableiste*/

#tabs{
width: 33px;
height: 444px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: -18px;
float: right;}

#tabs li{clear: both;}

/*Footer*/

#copy{
float: left;
color: #fff;
font-size: 11px;
width: 700px;
margin-left: 10px;
margin-bottom: 20px;}

}

/*MEDIATHEK*/
#mediamenu li a {
display: block;
width: 150px;
padding: 5px;
padding-top: 3px;
padding-bottom: 3px;
background: transparent;
border-bottom: 1px solid #e0e0e0;
text-decoration: none;
font-family:Arial, Helvetica, Verdana, sans-serif;
margin: 0px;}

#mediamenu li a:hover {
background: #eeeeee;}

#mediamenuhead{
width: 174px;
height: 16px;
background: url(https://img.webme.com/pic/o/osmantalay/medianav.png);
padding: 3px;}

#mediamenuhead h2{
color: #646464;}
#mediamenuhead h2:hover{
color: #000000;}

#mediapre{
clear:both;
width: 630px;
padding: 5px;
min-height: 135px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;}

#mediapre:hover{
background: #eeeeee;}

/*WEITERES*/

input,textarea{
border: 1px solid #dddddd;
background: #eeeeee;
padding: 3px;}
input:focus,textarea:focus{border: 1px solid #bbbbbb;}

input[type="submit"]{cursor: pointer;}
input[type="submit"]:hover{border: 1px solid #bbbbbb;}

/*BOXEN*/

#vorschau{
width: 140px;
padding: 5px;
border: 1px solid #dddddd;
background: #eeeeee;
float: left;
margin: 2px;
text-align: center;}

#videovorschau{
width: 144px;
padding: 5px;
border: 1px solid #dddddd;
background: #eeeeee;
float: left;
margin: 2px;
text-align: center;}

#vorschau:hover, #videovorschau:hover, #minivorschau:hover{
background: #ffeabd;}

#minivorschau{
width: 105px;
padding: 5px;
border: 1px solid #dddddd;
background: #eeeeee;
float: left;
margin: 2px;
text-align: center;}

#boardticker{
text-decoration: none;
padding: 2px;
border-bottom: 1px solid #dddddd;}

#boardticker:hover{
background: #eeeeee;}
--------------------------------------------------------------------------------

Anasayfa

Css Tasarımlar

Siten İçin

Site Yarışması

Haftanın Vİdeosu

Türkiyenin En Büyük Css Tasarım Merkezi-Örnek Site Yarışması-Html Kodlar

osman talay