basmak03.tr.gg

csssablon

Önizlemelerde hatalar olabilir bunun nedeni her sayfaya farklı tasarım uygulamamdır sizde böylebirşey olmayacaktır..

Css tasarım 1

Önizle

Tasarımın üstüne

<body>
<div id="page_wrapper">
<div id="header_wrapper">
<div id="header">
<h1><font color="#FFDF8C">basmak03.tr.gg</font></h1>
<h2>site acıklaması </h2>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg" id="current">Home</a></li>
<li><a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg">Item two</a></li>
<li><a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg">Item three</a></li>
<li><a href="http://basmak03.tr.gg/" _fcksavedurl="http://basmak03.tr.gg/">Item four</a></li>
<li><a href="http://basmak03.tr.gg/" _fcksavedurl="http://basmak03.tr.gg/">Item five</a></li>
</ul>
</div>
</div>
<div id="left_side">
<h3>Sol Kısım </h3>
<p> Lorem ipsum summo <a href="http://basmak03.tr.gg/" _fcksavedurl="http://basmak03.tr.gg/">nominavi</a> pri et. Stet <a href="http://basmak03.tr.gg/" _fcksavedurl="http://basmak03.tr.gg/">eruditi</a> perfecto at sed, ad enim constituto
deseruisse quo, mea no quem eros munere. Ad splendide
quaerendum per, ea minimum officiis oportere vel, an has
perpetua percipitur. <a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg">Consequat</a> contentiones
his te, id noster menandri his. Per partem perfecto eu, est
soluta accusata ex. </p>
<h3>Sol Kısım - 2 </h3>
<div class='featurebox_side'> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at
sed, ad enim <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">constituto</a> deseruisse quo, mea
no quem eros munere. </div>
<p> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed,
ad enim constituto deseruisse quo, mea no quem eros munere. Ad
splendide quaerendum per, <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">ea minimum officiis</a> oportere vel, an has perpetua percipitur. Consequat contentiones
his te, id <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">noster menandri</a> his. Per partem perfecto
eu, est soluta accusata ex. </p>
<div class='featurebox_side'> Lorem <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">ipsum summo</a> nominavi pri et. Stet eruditi
perfecto at sed, ad enim constituto deseruisse quo, mea no quem
eros munere. </div>
</div>
<div id="right_side">
<h3>Sağ Kısım </h3>
<p> <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">Lorem ipsum summo</a> nominavi pri et. Stet eruditi
perfecto at sed, ad enim constituto deseruisse quo, mea no quem
eros munere. </p>
<div class='featurebox_side'> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed,
ad enim constituto deseruisse quo, mea no quem eros munere. </div>
<h4>Sub Title</h4>
<p> Ad splendide <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">quaerendum</a> per, ea minimum officiis
oportere vel, an has perpetua percipitur. Consequat contentiones
his te, id <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">noster</a> menandri his. Per partem perfecto
eu, est soluta accusata ex. </p>
<h3>Sağ Kısım - 2 </h3>
<div class='featurebox_side'> <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">Lorem ipsum</a> summo nominavi pri et. Stet eruditi
perfecto at sed, ad enim constituto deseruisse quo, mea no quem
eros munere. </div>
<p> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed, ad
enim constituto <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">deseruisse</a> quo, mea no quem eros
munere. Ad splendide quaerendum per, ea minimum officiis oportere vel,
an has perpetua percipitur. Consequat contentiones his te, id noster <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">menandri</a> his. Per partem perfecto eu, est soluta
accusata ex. </p>
</div>
<div id="content">
<h3>Sitemize Hoş Geldiniz =) </h3>
<div class='featurebox_center'> Lorem ipsum summo nominavi pri et. Stet eruditi perfecto at sed, ad
enim <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">constituto deseruisse</a> quo, mea no quem eros munere.
Ad splendide quaerendum per, ea minimum officiis oportere vel, an has <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">perpetua</a> percipitur. Consequat contentiones his te, id
noster menandri his. Per partem perfecto eu, est soluta accusata ex. </div>

Tasarımın altına

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 {
text-align: center;
margin-top:10px;
margin-bottom:10px;
color:#666666;
background-color: #E0E0E0;
}
A:link {
COLOR: #0000FF; text-decoration: none;
}
A:visited {
COLOR: #0000FF; text-decoration: none;
}
A:active {
COLOR: #0000FF; text-decoration: none;
}
A:hover {
COLOR: #FF0000; text-decoration: underline;
}
#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 98%;
text-align: left;
background: #FFFFFF;
border: 8px solid #FFFFFF;
}
#header_wrapper {
background: #4E7DD1 url('../img/menu_bg.gif') bottom left repeat-x;
margin:0px; padding:0px;
}
#header {
height: 60px;
padding:15px;
background: url('../img/header_bg.gif') top right no-repeat;
margin:0px;
}
#header h1 {
margin:0px;
font-family: verdana, arial, sans-serif;
font-size: 28px;
color:#ffffff;
letter-spacing: -1px;
}
#header h2 {
margin:0px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
color:#B1C6EB;
letter-spacing: 1px;
}
#left_side {
margin-top: 10px;
float: left;
width: 160px;
background: #F1F6FE url('../img/side_bg.gif') bottom left repeat-x;
}
#right_side {
margin-top: 10px;
float: right;
width: 160px;
background: #F1F6FE url('../img/side_bg.gif') bottom left repeat-x;
}
#content {
margin-top: 20px;
margin-bottom: 0px;
margin-left: 180px;
margin-right: 180px;
}
#footer {
height: 50px;
background-color: #4E7DD1;
clear: both;
text-align: center;
padding-top:12px;
color: #B6CEF9;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
}
#footer A:link {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:visited {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:active {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:hover {
COLOR: #FFFFFF; text-decoration: underline;
}
#left_side p, #right_side p {
margin:10px;margin-top:15px;margin-bottom:15px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 16px;
color: #333333;
}
#left_side h3, #right_side h3 {
margin-top:5px; margin-bottom:10px; margin-left:5px; margin-right:5px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #FFFFFF;
border:1px solid #0F3974;
background-color: #2153AA;
}
#left_side h4, #right_side h4 {
margin-top:0px;margin-bottom:0px;margin-left:10px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 12px;
color: #2153AA;
}
#content p {
margin-top:15px; margin-bottom: 15px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333;
}
#content h3 {
margin-top:5px; margin-bottom: 10px;
font-family: verdana, arial, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 18px;
color: #2153AA;
}
#content h4 {
margin-top:0px;margin-bottom:0px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 12px;
color: #2153AA;
}
#navlist
{
margin-top:1px;
margin-bottom:0px;
text-align:center;
padding: 5px 0;
margin-left: 0;
border-bottom: 1px solid #0F3974;
font: bold 14px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
color: #F1F6FE;
padding: 5px 15px;
margin-left: 3px;
border: 1px solid #0F3974;
border-bottom: none;
background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x;
text-decoration: none;
}
#navlist li a:link { color: #F1F6FE; }
#navlist li a:visited { color: #F1F6FE; }
#navlist li a:hover
{
color: #FFFFFF;
background: #3364BB;
border-color: #0F3974;
}
#navlist li a#current
{
color: #000;
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.float_left {
float: left;
margin-right: 10px;
}
.float_right {
float: right;
margin-left: 10px;
}
.featurebox_center {
background-color: #fffff6;
margin:0px;
padding:10px;
border: 1px solid #DFE8F7;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
color: #333333;
}
.featurebox_side {
background-color: #fffff6;
margin:0px;margin-left:10px;margin-right:10px;margin-bottom:15px;
padding:10px;
border: 1px solid #DFE8F7;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
color: #333333;
}

Css tasarım 2

Önizle

Tasarımın üstüne

<body>
<div id="templatemo_container"> 
<div id="templatemo_top_panel"> 
<div id="top_panel_ls"> 
<div id="templatemo_site_title">WEB TASARIM</div></div> 
<div id="top_panel_rs"> 
<div id="search_section"> 
<form action="#" method="get"> <input type="text" name="q" size="10" id="searchfield" title="searchfield" /> 
<input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" /> </form>
 <div class="cleaner"></div> </div> <div id="templatemo_menu"> 
 <ul> 
 <li><a href="http://basmak03.tr.gg/" _fcksavedurl="http://basmak03.tr.gg/"><span></span>AnaSayfa</a></li>
<li><a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg"><span></span>Forum</a></li>
<li><a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg"><span></span>Galeri</a></li> 
<li><a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg"><span></span>İletişim</a></li> 
<li><a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg"><span></span>Toplist</a></li> 
</ul>
 <div class="cleaner"></div> </div> 
  <div class="cleaner"></div> </div> </div> 
   <div id="templatemo_banner"> <div id="banner_header_01">BEDAVA-SİTEM-WEB-TASARIM!</div> 
   <div id="banner_header_02">SİTENİZİN BASLIGI.</div> <div id="banner_text"> <p> </p>
<div class="rc_btn_01"><a href="http://basmak03.tr.gg/" _fcksavedurl="http://basmak03.tr.gg/">tıklayın...</a></div> </div> </div>
	 <div id="ct"></div> <div id="templatemo_content">

Tasarımın altına

css kodu

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{display: none;} body { margin: 0; padding: 0; line-height: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #a8b5b2; background: #121e1b url(http://img194.imageshack.us/img194/394/templatemomainbg.png) repeat; } a:link, a:visited { color: #dbdb13; text-decoration: none; font-weight: normal;} a:active, a:hover { color: #FFFF99; text-decoration: underline;} p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  } .margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px;	} .margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px;	} .margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px;	} .margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px;	} .margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px;	} .margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px;	} .margin_right_30 { margin-right: 30px; } .margin_right_40 { margin-right: 40px; } .rc_btn_01 a { clear: both; float: right; display: block; width: 104px; height: 25px; padding: 5px 0 0 0; font-size: 12px; text-align: center; color: #cfa937; text-decoration: none; border: none; background: url(http://img5.imageshack.us/img5/7996/templatemobutton01.png) no-repeat; } .rc_btn_01 a:hover { background: url(http://img5.imageshack.us/img5/8169/templatemobutton02.png) no-repeat; color: #FFFF99; } #templatemo_container { width: 980px; margin: 0 auto; padding: 40px 0; } /* top panel */ #templatemo_top_panel { width: 940px; height: 141px; padding: 0 20px; background: url(http://img194.imageshack.us/img194/4638/templatemotoppanelbg.png); } #templatemo_top_panel #top_panel_ls { float: left; width: 280px; } #templatemo_site_title { margin-left: 20px; padding-top: 45px; font-size: 25px; font-weight: bold; color: #ffffff; } #templatemo_top_panel #top_panel_rs { float: right; width: 660px; } #top_panel_rs #search_section { float: right; padding: 20px 20px 10px 0; margin-bottom: 6px; width: 400px; } #search_section form { float: right; margin: 0px; padding: 0px; } #searchfield { height: 15px; width: 200px; padding: 5px; color: #000; font-size: 13px; font-variant: normal; line-height: normal; background: #606060; border: 1px solid #969696; } #searchbutton{ width: 106px; height: 29px; margin: 0 0 0 10px; padding: 0 6px; cursor: pointer; font-size: 12px; font-weight: bold; text-align: center; vertical-align: bottom; white-space: pre; color: #ffffff; background: #ba9835; border: 1px solid #000; } /* end of top panel */ /* menu */ #templatemo_menu { clear: both; } #templatemo_menu ul { float: left; margin: 0px; padding: 0px; list-style: none; } #templatemo_menu ul li{ display: inline; } #templatemo_menu ul li a{ float: left; display: block; height: 40px; margin-left: 10px; padding: 17px 30px 0 20px; font-size: 13px; font-weight: bold; text-decoration: none; color: #ffffff; outline: none; } #templatemo_menu li a:hover, #templatemo_menu li .current{ position: relative; color: #ffffff; background: url(http://img4.imageshack.us/img4/2579/templatemomenubuttonrig.png) bottom right no-repeat; } #templatemo_menu li a:hover span, #templatemo_menu li .current span	{ position: absolute; display: inline-block; width: 10px; height: 57px; bottom: 0px; left: -10px; background: url(http://img17.imageshack.us/img17/4836/templatemomenubuttonlef.png) left bottom no-repeat; } /* end of menu */ /* banner */ #templatemo_banner { clear: both; width: 860px; height: 291px; margin: 0 auto; padding: 0 60px; text-align: center; background:url(http://img406.imageshack.us/img406/7268/templatemobanner.png); } #banner_header_01 { padding: 65px 0 15px 0; font-size: 40px; font-weight: bold; color: #bf9f3f; } #banner_header_02 { margin-bottom: 20px; font-size: 18px; font-weight: bold; color: #b6ad94; } #banner_text {  color: #cccccc; font-size: 14px; } #banner_text p{ margin-bottom: 20px; } /* end of banner */ /* content */ #templatemo_content { clear: both; width: 860px; margin: 0 auto; padding: 20px 60px 0 60px; background: url(http://img4.imageshack.us/img4/4126/templatemocontentmiddle.png) repeat-y; } #ct { clear: both; width: 980px; height: 20px; background: url(http://img5.imageshack.us/img5/8493/templatemocontenttop.png) no-repeat; } #cb { clear: both; width: 980px; height: 50px; background: url(http://img17.imageshack.us/img17/3897/templatemocontentbottom.png) no-repeat; } #templatemo_content #content_right{ float: right; width: 220px; } #templatemo_content #content_left{ float: left; width: 600px; } .content_header_01 { font-size: 22px; color: #42c7f8; padding-bottom: 10px; margin-bottom: 20px; } .content_header_02 { font-size: 22px; color: #42c7f8; padding-bottom: 15px; } #content_left .content_left_section { clear: both; } .content_left_section p{ text-align: justify; padding-bottom: 10px; } #content_left .content_left_280_section { float: left; width: 280px; } .content_left_280_section .image_wrapper { background: #333; padding: 9px; margin-bottom: 10px; } .content_left_280_section .image_wrapper img { border: 1px solid #ffffff; } .content_left_280_section ul { margin: 20px 0 20px 30px; padding: 0px; } .content_left_280_section ul li{ margin-bottom: 10px; color: #dbdb13; list-style: decimal-leading-zero; } .content_left_280_section ul li a{ color: #dbdb13; } .content_left_w600_wrapper { border: 1px solid #000; } .content_left_w600_inner { padding: 30px 28px; color: #ffffff; background: #333; border: 1px solid #666; } .content_left_w600_inner .image_wrapper{ border: 1px solid #ffffff; background: #cccccc; padding: 4px; margin-bottom: 5px; } .image_wrapper img{ border: none; } .box_w255 { float: left; width: 255px; } #content_right .content_right_section { clear: both; } .news_section .news_date { font-size: 12px; font-weight: bold; color: #42c7f8; } .news_section .news_title { font-size: 12px; font-weight: bold; color: #bf9f3f; } .content_right_section form { padding: 0px; margin: 10px 0 0px 0; } .content_right_section #subscribe_field { padding: 5px 0 0 0; height: 20px; width: 215px; margin-bottom: 10px; } .content_right_section #subscribe_button { float: right; width: 104px; height: 29px; padding: 0; margin: 0; cursor: pointer; font-size: 12px; text-align: center; white-space: pre; background: url(http://img5.imageshack.us/img5/7996/templatemobutton01.png) no-repeat; color: #cfa937; border: none; } /* end of content right */ /* footer */ #templatemo_footer { width: 900px; height: 45px; padding: 20px 40px 0 40px; text-align: center; background: url(http://img5.imageshack.us/img5/7918/templatemofooter.png) no-repeat; } #templatemo_footer a { color: #ffffff; font-weight: bold; } /* =-=-=-=-=-=-=-[Menu Seven]-=-=-=-=-=-=-=- */ #menu7 { width: 200px; border-style: none dashed dashed dashed; border-color: #608FB5; border-width: 1px; } #menu7 li a { height: 32px; voice-family: ""}""; voice-family: inherit; height: 22px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #1D537F; display: block; background:  none repeat-x; padding: 10px 0 0 10px; } #menu7 li a:hover { color: #fff; background:  none repeat-x 0 -32px; padding: 10px 0 0 10px; } #menu7 li a:active { color: #fff; background:  none repeat-x 0 -64px; padding: 10px 0 0 10px; }

Css tasarım 3

Önizle

Tasarımın üstüne

<body>

<div id="header">
<div id="logo">
<h1><a href="#" _fcksavedurl="#"><span>Site </span> Adı</a></h1>
<p>Site Amblemi</p>
</div>
</div>
<div id="menu">
<ul id="main">
<li class="current_page_item"><a href="#" _fcksavedurl="#">Ana Sayfa</a></li>
<li><a href="#" _fcksavedurl="#">Forum</a></li>
<li><a href="#" _fcksavedurl="#">İletişim</a></li>
<li><a href="#" _fcksavedurl="#">Toplist</a></li>
<li><a href="#" _fcksavedurl="#">Z. Defteri</a></li>
</ul>
</div>

<div id="wrapper">

<div id="page">
<div id="sidebar1" class="sidebar">
<ul>
<li>
<h2>Kategoriler</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>
<li>
<h2>Kategoriler - 2</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>
<li>
<h2>Kategoriler - 3</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>
<li>
<h2>Kategoriler - 4</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>		</div>

<div id="content">

Tasarımın altına

</div>

<div id="sidebar2" class="sidebar">
<ul>
<li>
<form id="searchform" method="get" action="#">
<div>
<h2>Site İçi Arama</h2>
<input type="text" name="s" id="s" size="15" value="" />
</div>
</form>
</li>
<li>
<h2>Takvim</h2>
<div id="calendar_wrap">
<table summary="Calendar">
<caption>
October 2009
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="September" colspan="3" id="prev"><a href="#" _fcksavedurl="#" title="View posts for September 2009">« Sep</a></td>
<td class="pad"> </td>
<td colspan="3" id="next"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td id="today">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="4"> </td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<h2>Kategoriler - 5</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>			</ul>
</div>

<div style="clear: both;"> </div>
</div>

</div>
<div id="footer">
<p class="copyright">Copyright  2009 Design by <a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg">Free Tasarım</a></p>
</div>
</body>

</html>

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;}
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0px;
padding: 0;
background: url(https://img.webme.com/pic/p/prohtmlmania/img01.jpg) repeat-x left top;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #616161;
}
h1, h2, h3 {
margin-top: 0;
color: #A66100;
}
h1 {
font-size: 1.6em;
font-weight: normal;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
}
a {
text-decoration: none;
color: #A66100;
}
a:hover {
border-bottom: none;
}
a img {
border: none;
}
img.left {
float: left;
margin: 0 20px 0 0;
}
img.right {
float: right;
margin: 0 0 0 20px;
}
#header {
width: 960px;
margin: 0 auto;
height: 165px;
background: url(https://img.webme.com/pic/p/prohtmlmania/img02.jpg) no-repeat left top;
}
/* Header */
#logo {
width: 960px;
height: 100px;
margin: 0 auto;
padding: 60px 10px 0 10px;
}
#logo h1, #logo p {
float: left;
margin: 0;
color: #00D8D5;
}
#logo span {
color: #FFFFFF;
}
#logo h1 {
padding: 25px 0 0 0;
letter-spacing: -1px;
text-transform: lowercase;
font-weight: normal;
font-size: 3em;
}
#logo p {
text-transform: uppercase;
padding: 47px 0 0 3px;
font-size: 10px;
color: #FFFFFF;
}
#logo a {
border: none;
text-decoration: none;
color: #DC8700;
}
/* Menu */
#menu {
width: 960px;
margin: 0 auto;
padding: 0;
height: 59px;
background: url(https://img.webme.com/pic/p/prohtmlmania/img03.jpg) no-repeat left top;
}
#menu ul {
margin: 0;
padding-left: 270px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 41px;
margin: 0;
padding: 18px 40px 0 40px;
background: url(https://img.webme.com/pic/p/prohtmlmania/img08.jpg) no-repeat left 30%;
text-decoration: none;
text-transform: capitalize;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
}
#menu .current_page_item a {
color: #FFFFFF;
}
/* Wrapper */
#wrapper {
}
/* Page */
#page {
width: 960px;
margin: 0 auto;
padding: 20px 5px;
background: #FFFFFF;
}
#page-bg {
}
/* Latest Post */
#latest-post {
padding: 20px;
border: 1px solid #E7E7E7;
}
/* Content */
#content {
float: left;
width: 480px;
}
.post {
padding-bottom: 15px;
line-height: 200%;
}
.post h1 {
font-weight: normal;
}
.title {
height: 78px;
margin: 0;
padding: 15px 0 4px 20px;
font-weight: normal;
background: url(https://img.webme.com/pic/p/prohtmlmania/img07.jpg) no-repeat left top;
}
.title a {
border-bottom: none;
color: #FFFFFF;
}
.title a:hover {
border-bottom: 1px dotted #000000;
}
.byline {
margin: -60px 20px 20px 20px;
}
.byline a {
color: #DC8700;
}
.tag {
padding: 0 15px;
}
.entry {
padding: 0 20px;
}
.links {
padding: 4px 0px;
text-align: right;
font-weight: bold;
}
.links a {
border: none;
}
.links a:hover {
}
/* Sidebars */
#sidebar1 {
float: left;
margin-top: -70px;
}
#sidebar2 {
float: right;
}
.sidebar {
float: left;
width: 240px;
padding: 0;
font-size: 12px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
padding: 0 0 20px 0;
}
.sidebar li ul {
}
.sidebar li li {
margin: 0 20px 0 15px;
padding: 8px 0px;
border-bottom: 1px dashed #C5C4C4;
}
.sidebar li h2 {
height: 40px;
margin: 0 0 0 0;
padding: 20px 15px 0px 65px;
background: url(https://img.webme.com/pic/p/prohtmlmania/img04.jpg) no-repeat left top;
letter-spacing: -1px;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
}
.sidebar a {
}
/* Search */
#searchform {
margin: 0;
padding: 0 0 0 0;
}
#searchform br {
display: none;
}
#searchform h2 {
}
#s {
margin: 10px 0px 0 15px;
padding: 2px 2px;
width: 180px;
height: 18px;
border: 1px solid #6F6E6E;
background: #FFFFFF;
font-size: 10px;
color: #000000;
}
#x {
margin: 0;
padding: 2px 5px;
height: 25px;
background: #CA8186;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
/* Calendar */
#calendar_wrap {
padding: 0 15px;
text-align: center;
}
#calendar_wrap table {
width: 100%;
}
#calendar_wrap th {
}
#calendar_wrap td {
}
#calendar_wrap tfoot td {
border: none;
}
#calendar_wrap tfoot td#prev {
text-align: left;
font-weight: bold;
border: none;
}
#calendar_wrap tfoot td#prev a {
border: none;
}
#calendar_wrap tfoot td#next {
text-align: right;
font-weight: bold;
border: none;
}
#calendar_wrap tfoot td#next a {
border: none;
}
/* Footer */
#footer {
width: 960px;
height: 70px;
margin: 0 auto;
padding: 0 20px;
background: #2E2E2E;
}
#footer p {
margin: 0;
padding: 25px 0 0 0;
text-align: center;
font-size: smaller;
}
#footer a {
}
#footer .link {
float: right;
}
#footer .copyright {
float: left;
}

Css tasarım 4

Önizle

Tasarımın üstüne

<body>

<div id="main" class="box">

<div id="header">

<h3 id="logo"><a href="./" _fcksavedurl="./" title="CrystalX [Go to homepage]">Crystal<strong>X</strong><span></span></a></h3>
<FCK:hr class="noscreen"  />

<div class="noscreen noprint">
<p><em>Quick links: <a href="#content" _fcksavedurl="#content">content</a>, <a href="#tabs" _fcksavedurl="#tabs">navigation</a>, <a href="#search" _fcksavedurl="#search">search</a>.</em></p>
<FCK:hr  />
</div>

<div id="search" class="noprint">
<form action="" method="get">
<fieldset><legend>Search</legend>
<label><span class="noscreen">Find:</span>
<span id="search-input-out"><input type="text" name="" id="search-input" size="30" /></span></label>
<input type="image" src="http://www.nuviotemplates.com/templates/crystalx-01/design/search_submit.gif" id="search-submit" value="OK" />
</fieldset>
</form>
</div> 
</div> 

<div id="tabs" class="noprint">
<h5 class="noscreen">Navigation</h5>
<ul class="box">
<li><a href="#" _fcksavedurl="#">Home<span class="tab-l"></span><span class="tab-r"></span></a></li>
<li id="active"><a href="#" _fcksavedurl="#">Weblog<span class="tab-l"></span><span class="tab-r"></span></a></li> 
<li><a href="#" _fcksavedurl="#">About Me<span class="tab-l"></span><span class="tab-r"></span></a></li>
<li><a href="#" _fcksavedurl="#">Photos<span class="tab-l"></span><span class="tab-r"></span></a></li>
<li><a href="#" _fcksavedurl="#">Portfolio<span class="tab-l"></span><span class="tab-r"></span></a></li>
<li><a href="#" _fcksavedurl="#">Contact<span class="tab-l"></span><span class="tab-r"></span></a></li>
<li><a href="#" _fcksavedurl="#">Links<span class="tab-l"></span><span class="tab-r"></span></a></li>
</ul>
<FCK:hr class="noscreen"  />
</div> 

<div id="page" class="box">
<div id="page-in" class="box">
<div id="strip" class="box noprint">

<p id="rss"><strong>RSS:</strong> <a href="#" _fcksavedurl="#">articles</a> / <a href="#" _fcksavedurl="#">comments</a></p>
<FCK:hr class="noscreen"  />

<p id="breadcrumbs">You are here: <a href="#" _fcksavedurl="#">Home</a> > <a href="#" _fcksavedurl="#">Category</a> >  <strong>Page</strong></p>
<FCK:hr class="noscreen"  />
</div> 
<div id="conttent">
<div class="article">
<h4>HackeR FrienD.Net</h4>
<p class="info noprint">Bilgi Güçtür, Paylaştıkça Büyür!</p><p>

Tasarımın altına

</p></div>
<FCK:hr class="noscreen"  />
</div> 

<div id="col" class="noprint">
<div id="col-in">

<h5><span><a href="#" _fcksavedurl="#">About Me</a></span></h5>
<div id="about-me">
<p><img src="http://www.nuviotemplates.com/templates/crystalx-01/design/tmp_photo.gif" _fcksavedurl="http://www.nuviotemplates.com/templates/crystalx-01/design/tmp_photo.gif" id="me" alt="Yeah, itŽs me!" />
<strong>John Doe</strong><br />
Age: 26<br />
Dallas, TX<br />
<a href="#" _fcksavedurl="#">Profile on MySpace</a></p>
</div> 
<FCK:hr class="noscreen"  />

<h5 ><span>Category</span></h5>
<ul id="category">
<li id="category-active"><a href="#" _fcksavedurl="#">Selected category</a></li> 
<li><a href="#" _fcksavedurl="#">Category</a></li>
<li><a href="#" _fcksavedurl="#">Category</a></li>
<li><a href="#" _fcksavedurl="#">Category</a></li>
<li><a href="#" _fcksavedurl="#">Category</a></li>
</ul>
<FCK:hr class="noscreen"  />

<h5><span>Archive</span></h5>
<ul id="archive">
<li><a href="#" _fcksavedurl="#">January 2007</a></li>
<li><a href="#" _fcksavedurl="#">December 2006</a></li>
<li><a href="#" _fcksavedurl="#">November 2006</a></li>
<li><a href="#" _fcksavedurl="#">October 2006</a></li>
<li><a href="#" _fcksavedurl="#">September 2006</a></li>
<li id="archive-active"><a href="#" _fcksavedurl="#">August 2006</a></li> 
<li><a href="#" _fcksavedurl="#">July 2006</a></li>
<li><a href="#" _fcksavedurl="#">June 2006</a></li>
<li><a href="#" _fcksavedurl="#">May 2006</a></li>
<li><a href="#" _fcksavedurl="#">April 2006</a></li>
<li><a href="#" _fcksavedurl="#">March 2006</a></li>
<li><a href="#" _fcksavedurl="#">February 2006</a></li>
<li><a href="#" _fcksavedurl="#">January 2006</a></li>
</ul>
<FCK:hr class="noscreen"  />

<h5><span>Links</span></h5>
<ul id="links">
<li><a href="#" _fcksavedurl="#">Something</a></li>
<li><a href="#" _fcksavedurl="#">Something</a></li>
<li><a href="#" _fcksavedurl="#">Something</a></li>
<li><a href="#" _fcksavedurl="#">Something</a></li>
<li><a href="#" _fcksavedurl="#">Something</a></li>
</ul>
<FCK:hr class="noscreen"  />
</div> 
</div> 
</div> 
</div> 

<div id="footer">
<div id="top" class="noprint"><p><span class="noscreen">Back on top</span> <a href="#header" _fcksavedurl="#header" title="Back on top ^">^<span></span></a></p></div>
<FCK:hr class="noscreen"  />

<p id="createdby"><a href="http://basmak03.tr.gg/" _fcksavedurl="http://basmak03.tr.gg/">basmak03.tr.gg</a></p>

<p id="copyright">© 2007 <a href="mailto:my@mail.com" _fcksavedurl="mailto:my@mail.com">My Name</a></p>
</div> 
</div>
</body>

</html>

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;}
/* ----------------------------------------------------------------------------------------------------------
This website template was downloaded from http://www.nuviotemplates.com - visit us for more templates
Structure:
display; position; float; z-index; overflow; width; height; margin; padding; border; background; align; font;
---------------------------------------------------------------------------------------------------------- */
* {min-height:1px;}
body {border:0; margin:0; padding:0; background:#F2F5FE url("http://www.nuviotemplates.com/templates/crystalx-01/design/bg.gif") 0 0 repeat-x; font:70%/160% "verdana",sans-serif; color:#192666; text-align:center;}
a {color:#192666;}
a:hover {color:#4F6AD7;}
p {border:0; margin:15px 0; padding:0;}
div {display:block; border:0; margin:0; padding:0;}
h3, h4, h5, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;}
h3 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
h4 {font-size:180%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
h5 {font-size:120%; line-height:100%; font-weight:bold;}
h4 {font-size:120%;}
h5 {font-size:100%;}
table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #B7CAF6; font-size:100%;}
tr {display:table-row;}
th, td {display: table-cell; border:1px solid #B7CAF6; margin:0; padding:5px; vertical-align:top; text-align:left;}
th {background:#E7ECFD; text-align:center; color:#192666; font-weight:bold;}
ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
ol {list-style-type:decimal;}
li {display:list-item; border:0; margin:0; padding:0;}
ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}
dl {border:0; margin:15px 0; padding:0;}
dt {border:0; margin:0; padding:0; font-weight:bold;}
dd {border:0; margin:0 0 0 30px; padding:0;}
form {border:0; margin:0; padding:0;}
fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;}
legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}
hr {display:block; height:1px; margin:10px 0; padding:0; background:#CCC; border:0 solid #CCC; color:#CCC;}
a, img, span {border:0; margin:0; padding:0;}
abbr, acronym {border-bottom:1px dotted #CCC; cursor:help;}
del, .through {text-decoration:line-through;}
strong, .strong {font-weight:bold;}
cite, em, q, var {font-style:italic;}
code, kbd, samp {font-family:monospace; font-size:110%;}
.f-left {float:left;}
.f-right {float:right;}
.t-left {text-align:left;}
.t-center {text-align:center;}
.t-right {text-align:right;}
.va-middle {vertical-align:middle;}
.clear {clear:both;}
.box {min-height:1px;}
.box:after {content:"."; display:block; line-height:0px; font-size:0px; visibility:hidden; clear:both;}
.nom {margin:0;}
.noscreen {display:none;}
/* -----------------...........--------------------------------------------------------------------------------------- */
#main {width:770px; margin:50px auto 0 auto; text-align:left;}
#header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url("http://www.nuviotemplates.com/templates/crystalx-01/design/header.jpg") 0 0 no-repeat; color:#FFF;}
#header #logo {position:absolute; top:35px; left:35px; margin:0;}
#header #logo a {color:#FFF;}
#header #logo a:hover {color:#B5C4E3; text-decoration:underline;}
#header #search {position:absolute; top:35px; right:20px;}
#header #search form {position:relative;}
#header #search #search-input-out {position:absolute; top:0; right:45px; width:155px; height:28px; margin:0; padding:0; border:0; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/search_input.gif") 0 0 no-repeat; font:bold 90%/100% "verdana",sans-serif; color:#192666;}
#header #search #search-input {width:140px; margin:5px 8px; padding:3px 0; border:0; background:#FFF; font:bold 100%/100% "verdana",sans-serif; color:#192666;}
#header #search #search-submit {position:absolute; top:0; right:0px;}
#header #search fieldset {margin:0; padding:0; border:0;}
#header #search fieldset {width:200px;}
#header #search legend {display:none;}
#tabs {background:#192666; margin:0 5px; padding:10px 0 0 0; _height:1px;}
#tabs ul {margin:0 10px; padding:0; list-style:none;}
#tabs ul li {margin:0 5px 0 0; padding:0; float:left;}
#tabs ul li a {display:block; position:relative; padding:7px 15px; border:0; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_link.gif") 0 0 repeat-x; color:#B5C4E3; font-weight:bold; text-decoration:none; cursor:pointer;}
#tabs ul li a span.tab-l, #tabs ul li a:hover span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_link_l.gif") 0 0 no-repeat;}
#tabs ul li a span.tab-r, #tabs ul li a:hover span.tab-r {position:absolute; top:0; right:0; _right:-1px; width:8px; height:8px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_link_r.gif") 100% 0 no-repeat;}
#tabs ul li a:hover {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_hover.gif") 0 0 repeat-x; color:#FFF;}
#tabs ul li a:hover span.tab-l {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_hover_l.gif") 0 0 no-repeat;}
#tabs ul li a:hover span.tab-r {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_hover_r.gif") 100% 0 no-repeat;}
#tabs ul li#active a {background:#FFF; color:#FF9000;}
#tabs ul li#active a span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_active_l.gif") 0 0 no-repeat;}
#tabs ul li#active a span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_active_r.gif") 100% 0 no-repeat;}
#page {width:770px; min-height:1px; background:#FFF url("http://www.nuviotemplates.com/templates/crystalx-01/design/bg_page.gif") 0 0 repeat-y; _height:1px;}
#page-in {min-height:1px; padding:10px 0; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/bg_page_in.jpg") 0 0 no-repeat; _height:1px;}
#strip {position:relative; clear:both; padding:3px 20px 10px 20px; color:#6182D1;}
#strip p {margin:0;}
#strip a {color:#6182D1;}
#strip a:hover {color:#192666;}
#strip #breadcrumbs {width:520px; margin:0; padding:0;}
#strip #rss {float:right; width:175px; _width:200px; margin:0; padding-left:25px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_rss.gif") 0 50% no-repeat}
#conttent {float:left; width:530px; _width:550px; margin:0; padding:0 0 0 20px;}
#conttent .article {clear:both; margin:0; padding:20px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/content_article_bg.jpg") 0 0 no-repeat;}
#conttent .article h4 {margin:0 -20px; padding:10px; background:#DEE5FD url("http://www.nuviotemplates.com/templates/crystalx-01/design/content_title_bg.gif") 0 0 repeat-y; color:#192666;}
#conttent .article h4 span {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_list.gif") 0 50% no-repeat; padding-left:25px;}
#conttent .article p {text-align:justify;}
#conttent .info {margin:10px 0; padding-bottom:8px; border-bottom:1px solid #DEE5FD; color:#6685CC;}
#conttent .info a {color:#6685CC;}
#conttent .info a:hover {color:#FF9000;}
#conttent .info span.date, #conttent .info span.cat, #conttent .info span.user, #conttent .info span.comments {padding-left:15px;}
#conttent .info span.date {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_date.gif") 0 50% no-repeat;}
#conttent .info span.cat {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_cat.gif") 0 50% no-repeat; margin-left:8px;}
#conttent .info span.user {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_user.gif") 0 50% no-repeat; margin-left:8px;}
#conttent .info span.comments {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_comments.gif") 0 50% no-repeat; margin-left:8px;}
#conttent .btn-more {margin:0 0 15px 0; padding:0; border:0; position:relative;}
#conttent .btn-more a {display:block; position:absolute; top:0; right:0; width:67px; _width:95px; height:21px; margin:0; padding:0 0 0 28px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/btn_more.gif") 0 0 no-repeat; color:#FFF; text-decoration:none;}
#conttent .btn-more a:hover {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/btn_more.gif") -95px 0 no-repeat;}
#col {float:left; width:200px; margin:0; padding:0; background:#CEDBF9 url("http://www.nuviotemplates.com/templates/crystalx-01/design/col_bg.gif") 0 0 repeat-y;}
#col-in {padding:20px 10px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/col_top.gif") 0 0 no-repeat;}
#col h5 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#A0B9F3 url("http://www.nuviotemplates.com/templates/crystalx-01/design/col_title_bg.gif") 0 0 repeat-y; color:#192666;}
#col #about-me {margin-bottom:15px; line-height:130%;}
#col #about-me p {margin:0;}
#col #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}
#col ul#category {margin:15px 0; padding:0; list-style:none;}
#col ul#category li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
#col ul#category li a {display:block; padding:3px 0 3px 22px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_archive.gif") 5px 6px no-repeat; text-decoration:none;}
#col ul#category li a:hover {background-color:#D3DFF8; color:#192666;}
#col ul#category li#category-active a {background:#E0E8FA url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_archive2.gif") 5px 50% no-repeat; font-weight:bold;}
#col ul#archive {margin:15px 0; padding:0; list-style:none;}
#col ul#archive li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
#col ul#archive li a {display:block; padding:3px 0 3px 22px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_archive.gif") 5px 50% no-repeat; text-decoration:none;}
#col ul#archive li a:hover {background-color:#D3DFF8; color:#192666;}
#col ul#archive li#archive-active a {background:#E0E8FA url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_archive2.gif") 5px 6px no-repeat; font-weight:bold;}
#col ul#links {margin:15px 0; padding:0; list-style:none;}
#col ul#links li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
#col ul#links li a {display:block; padding:3px 0 3px 22px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_links.gif") 5px 6px no-repeat; text-decoration:none;}
#col ul#links li a:hover {background-color:#D3DFF8; color:#192666;}
#footer {position:relative; clear:both; width:770px; height:60px; margin-bottom:50px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/footer.jpg") 0 0 no-repeat; color:#6685CC;}
#footer a {color:#6685CC;}
#footer a:hover {color:#192666;}
#top {position:absolute; top:55px; left:550px;}
#top p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
#top p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_top.gif") 0 0 no-repeat; cursor:pointer;}
#top a:hover span {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_top.gif") -30px 0 no-repeat;}
#footer p#copyright {position:absolute; top:10px; left:40px; margin:0;}
#createdby {position:absolute; top:10px; left:562px; margin:0; color:#8CA3D8;}
#createdby a {color:#8CA3D8;}

Css tasarım 5

Önizle

Tasarımın üstüne

Tasarımın altına

</div>
</div>

<div id="sidebar">
<ul>
<li>
<h2>Site Saati</h2>
<ul>
<center><embed height="89" align="" width="162" src="http://www.dostyurdu.com/flash/saat.swf" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" menu="false"></embed></center>
</ul>
</li>
<li>
<h2>Ana Menu</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Ana Sayfa</a></li>
<li><a href="#" _fcksavedurl="#">İletişim</a></li>
<li><a href="#" _fcksavedurl="#">Ziyaretci Defteri</a></li>
<li><a href="#" _fcksavedurl="#">Toplist</a></li>
</ul>
</li>
<li>
<h2>Tasarimlar</h2>
<ul>
<li><a href="#" _fcksavedurl="#">İceblue Tasarim</a></li>
<li><a href="#" _fcksavedurl="#">Red Tasarim</a></li>
<li><a href="#" _fcksavedurl="#">Butterfly Tasarim</a></li>
<li><a href="#" _fcksavedurl="#">Css Design</a></li>
<li><a href="#" _fcksavedurl="#">Flash Tasarim</a></li>
</ul>
</li>
</ul>
</div>

<div style="clear: both;"> </div>
</div>
</div>
</div>

<div id="footer">
<p>Copyright (c) 2009 Site İsmi. Design by <a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg">Css Merkez</a> ve <a href="basmak03.tr.gg/" _fcksavedurl="http://basmak03.tr.gg/">Site Dostlugu</a></p>
</div>

</div>

</body>

</html>

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 {
margin: 0px;
padding: 0px;
background: #FFFFFF url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/bg01.jpg) repeat left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #797979;
}
h1, h2, h3 {
margin-top: 0px;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
p, ul, ol {
margin-top: 0px;
line-height: 160%;
}
ul, ol {
}
a {
color: #0098A4;
}
a:hover {
text-decoration: none;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
margin: 0px auto;
}
img.alignleft {
margin-right: 20px;
}
img.alignright {
margin-left: 20px;
}
a img {
border: none;
}
/* Wrapper */
#wrapper {
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/bg02.jpg) repeat-x left top;
}
/* Header */
#header {
width: 920px;
height: 130px;
margin: 0px auto;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/bg03.jpg) no-repeat left top;
}
/* Logo */
#logo {
float: left;
}
#logo h1, #logo h2 {
float: left;
margin: 0px;
}
#logo h1 {
padding: 60px 0px 0px 30px;
}
#logo h2 {
padding: 80px 0px 0px 10px;
}
#logo a {
text-decoration: none;
color: #797979;
}
#logo a:hover {
text-decoration: underline;
color: #0098A4;
}
#logo h2, #logo h2 a {
font-size: 13px;
color: #9F9F9F;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0px;
padding: 78px 30px 0px 0px;
list-style: none;
}
#menu li {
float: left;
}
#menu a {
padding: 0px 20px 0px 22px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/img02.gif) no-repeat left center;
text-decoration: none;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #7B7B7B;
}
#menu a:hover {
text-decoration: underline;
color: #0098A4;
}
#menu .first a {
background: none;
}
/* Page */
#page {
width: 920px;
margin: 0px auto;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/bg04.jpg) repeat-y left top;
}
#bgtop {
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/bg05.jpg) no-repeat left top;
}
#bgbottom {
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/bg06.jpg) no-repeat left bottom;
}
/* Content */
#content {
float: left;
width: 650px;
padding: 50px 0px 0px 35px;
}
.post {
}
.post .title {
padding: 0px 0px 0px 15px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/img03.gif) no-repeat left top;
}
.post .title h2, .post .title h3 {
margin: 0px;
}
.post .title h2 a, .post .title h3 a {
text-decoration: none;
color: #FFFFFF;
}
.post .title h2 a:hover, .post .title h3 a:hover {
text-decoration: underline;
}
.post .title p {
margin: 0px;
text-transform: lowercase;
font-size: 16px;
color: #8D8D8D;
}
.post .title p a {
text-decoration: none;
color: #8D8D8D;
}
.post .entry {
padding: 15px 15px 25px 15px;
}
/* Sidebar */
#sidebar {
float: right;
width: 180px;
padding: 50px 10px 0px 0px;
}
#sidebar ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {
margin: 15px 15px 25px 15px;
}
#sidebar li li {
font-size: 11px;
}
#sidebar h2 {
height: 27px;
margin: 0px;
padding: 3px 0px 0px 15px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/img04.gif) no-repeat left top;
font-size: 24px;
color: #FFFFFF;
}
#sidebar a {
color: #BCE8EC;
}
/* Footer */
#footer {
width: 920px;
height: 100px;
margin: 0px auto;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Gri/bg07.jpg) no-repeat left top;
}
#footer p {
margin: 0px;
padding: 30px 0px 0px 0px;
text-align: center;
font-size: 11px;
}
#footer a {
color: #797979;
}

Css tasarım 6

Önizle

Tasarımın üstüne

<body>


<div id="header">
<div id="logo">
<h1><a href="#" _fcksavedurl="#"><span>basmak03.tr.gg </span> </a></h1>
<p>site sloganı burada olacak </p>
</div>
</div>

<div id="wrapper">

<div id="page">
<div id="page-bg">
<div id="sidebar1" class="sidebar">
<ul>
<li>
<h2>Kategoriler</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Yazılarım</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Free CSS Templates</a> on <a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Free CSS Templates</a> on <a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Free CSS Templates</a> on <a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Free CSS Templates</a> on <a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Free CSS Templates</a> on <a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Free CSS Templates</a> on <a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Diğer</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Arşivler</h2>
<ul>
<li><a href="#" _fcksavedurl="#">September</a> (23)</li>
<li><a href="#" _fcksavedurl="#">August</a> (31)</li>
<li><a href="#" _fcksavedurl="#">July</a> (31)</li>
<li><a href="#" _fcksavedurl="#">June</a> (30)</li>
<li><a href="#" _fcksavedurl="#">May</a> (31)</li>
</ul>
</li>
</ul>
</div>

<div id="content">

Tasarımın altına

</div>


<div id="sidebar2" class="sidebar">
<ul>
<li>
<form id="searchform" method="get" action="#">
<div>
<h2>Site Arama Motoru </h2>
<input type="text" name="s" id="s" size="15" value="" />
</div>
</form>
</li>
<li>
<h2>Tags</h2>
<p class="tag"><a href="#" _fcksavedurl="#">sitenin tagleri burada olacak </a><a href="#" _fcksavedurl="#"></a></p>
</li>
<li>
<h2>Takvim</h2>
<div id="calendar_wrap">
<table summary="Calendar">
<caption>
October 2009
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="September" colspan="3" id="prev"><a href="#" _fcksavedurl="#" title="View posts for September 2009">« Sep</a></td>
<td class="pad"> </td>
<td colspan="3" id="next"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td id="today">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="4"> </td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<h2>Kategori - 2 </h2>
<ul>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
</ul>
</li>
</ul>
</div>

<div style="clear: both;"> </div>
</div>
</div>

</div>
<div id="footer">
<p class="copyright">Copyright 2009  </p>
<p class="link"><a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg">design by free tasarım </a><a href="#" _fcksavedurl="#"></a></p>
</div>
</body>

</html>

css kodu

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin-top: 50px;
padding: 0;
background: #2F2825;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #616161;
}
h1, h2, h3 {
margin-top: 0;
color: #8C0209;
}
h1 {
font-size: 1.6em;
font-weight: normal;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
}
a {
text-decoration: none;
color: #8C0209;
}
a:hover {
border-bottom: none;
}
a img {
border: none;
}
img.left {
float: left;
margin: 0 20px 0 0;
}
img.right {
float: right;
margin: 0 0 0 20px;
}
#header {
width: 1000px;
margin: 0 auto;
height: 130px;
background: url(https://img.webme.com/pic/t/turkgencliq/img02.jpg) repeat-x left top;
}
/* Header */
#logo {
width: 940px;
height: 130px;
margin: 0 auto;
padding-top: 20px;
padding-left: 20px;
background: url(https://img.webme.com/pic/t/turkgencliq/img01.gif) no-repeat left top;
}
#logo h1, #logo p {
float: left;
margin: 0;
color: #FFFFFF;
}
#logo span {
color: #FF4D00;
}
#logo h1 {
padding: 25px 0 0 0;
letter-spacing: -1px;
text-transform: lowercase;
font-weight: normal;
font-size: 3em;
}
#logo p {
text-transform: uppercase;
padding: 47px 0 0 3px;
font-size: 10px;
color: #110E0F;
}
#logo a {
border: none;
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 1000px;
margin: 0 auto;
padding: 0;
height: 50px;
background: url(https://img.webme.com/pic/t/turkgencliq/img02.jpg) no-repeat left top;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 32px;
margin: 0;
padding: 18px 30px 0 30px;
text-decoration: none;
text-transform: capitalize;
background: url(https://img.webme.com/pic/t/turkgencliq/img03.jpg) no-repeat right top;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
}
#menu .current_page_item a {
color: #FFFFFF;
}
/* Wrapper */
#wrapper {
}
/* Page */
#page {
width: 960px;
margin: 0 auto;
padding: 0px;
background: #FFFFFF url(https://img.webme.com/pic/t/turkgencliq/img03.gif) repeat-y left top;
}
#page-bg {
background: url(https://img.webme.com/pic/t/turkgencliq/img02.gif) no-repeat left top;
}
/* Latest Post */
#latest-post {
padding: 20px;
border: 1px solid #E7E7E7;
}
/* Content */
#content {
float: left;
width: 480px;
padding: 30px 20px 0px 20px;
}
.post {
padding-bottom: 15px;
line-height: 200%;
}
.post h1 {
font-weight: normal;
}
.title {
margin: 0;
padding: 10px 0 4px 20px;
font-weight: normal;
}
.title a {
border-bottom: none;
color: #8C0209;
}
.title a:hover {
border-bottom: 1px dotted #000000;
}
.byline {
border-bottom: 1px #BBBBBB dashed;
margin: -10px 20px 20px 20px;
}
.tag {
padding: 0 15px;
}
.entry {
padding: 0 20px;
}
.links {
padding: 4px 0px;
text-align: right;
font-weight: bold;
}
.links a {
border: none;
}
.links a:hover {
}
/* Sidebars */
#sidebar1 {
float: left;
}
#sidebar2 {
float: right;
}
.sidebar {
float: left;
width: 220px;
padding: 20px 0px 0px 0px;
font-size: 12px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
padding: 0 0 20px 0;
}
.sidebar li ul {
}
.sidebar li li {
margin: 0 20px 0 15px;
padding: 8px 0px;
border-bottom: 1px #BBBBBB dashed;
}
.sidebar li h2 {
height: 30px;
margin: 0 0 0 0;
padding: 10px 15px 0px 15px;
background: #890208 url(https://img.webme.com/pic/t/turkgencliq/img05.jpg) no-repeat left top;
letter-spacing: -1px;
font-size: 16px;
color: #FFFFFF;
}
.sidebar a {
}
/* Search */
#searchform {
margin: 0;
padding: 0 0 0 0;
}
#searchform br {
display: none;
}
#searchform h2 {
}
#s {
margin: 10px 0px 0 15px;
padding: 2px 2px;
width: 180px;
height: 18px;
border: 1px solid #CA8186;
background: #FFFFFF;
font-size: 10px;
color: #000000;
}
#x {
margin: 0;
padding: 2px 5px;
height: 25px;
background: #CA8186;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
/* Calendar */
#calendar_wrap {
padding: 0 15px;
text-align: center;
}
#calendar_wrap table {
width: 100%;
}
#calendar_wrap th {
}
#calendar_wrap td {
}
#calendar_wrap tfoot td {
border: none;
}
#calendar_wrap tfoot td#prev {
text-align: left;
font-weight: bold;
border: none;
}
#calendar_wrap tfoot td#prev a {
border: none;
}
#calendar_wrap tfoot td#next {
text-align: right;
font-weight: bold;
border: none;
}
#calendar_wrap tfoot td#next a {
border: none;
}
/* Footer */
#footer {
width: 960px;
height: 70px;
margin: 0 auto;
padding: 50px 0px 0px 0px;
background: url(https://img.webme.com/pic/t/turkgencliq/img04.gif) no-repeat left top;
color: #FFFFFF;
}
#footer p {
margin: 0;
padding: 25px 20px 0 20px;
text-transform: uppercase;
text-align: center;
font-size: smaller;
font-family: Arial, Helvetica, sans-serif;
}
#footer a {
color: #FFFFFF;
}
#footer .link {
float: right;
}
#footer .copyright {
float: left;
}

Css tasarım 7

Önizle

Tasarımın üstüne

Tasarımın altına

</div>
<div class="post">
<div class="header">
<h3>Vivamus tortor sed aenean</h3>
<div class="date">April 15, 2008</div>
</div>
<div class="content">
</div>
<div class="footer">
<ul>
<li class="printerfriendly"><a href="#" _fcksavedurl="#">Sık Kullanılanlara Ekle</a></li>
<li class="comments"><a href="#" _fcksavedurl="#">Sponsorlar</a></li>
<li class="readmore"><a href="#" _fcksavedurl="#">Yorumlar</a></li>
</ul>
</div>
</div>

</div>
<div id="secondarycontent">

<h3>Bak Bana</h3>
<div class="content">
<img class="" width="146" height="75" alt="" src="http://www.harikayaa.com/wp-content/uploads/2007/06/kuresel-isinma-6.jpg" _fcksavedurl="http://www.harikayaa.com/wp-content/uploads/2007/06/kuresel-isinma-6.jpg" />
<p><strong>Küresel Isınma artık bizim için dev bir sorun, bunu herkes biliyor ama aslında küresel ısınma ne bunu biliyormusun? <a href="#" _fcksavedurl="#">Devamı ...</a></p>
</div>
<h3>Kategoriler</h3>
<div class="content">
<ul class="linklist">
<li class="first"><a href="#" _fcksavedurl="#">Doğal Afetler</a></li>
<li><a href="#" _fcksavedurl="#">Tüm Haberler</a></li>
<li><a href="#" _fcksavedurl="#">Bunları Biliyor Musunuz ?</a></li>
<li><a href="#" _fcksavedurl="#">Yakında...</a></li>
<li><a href="#" _fcksavedurl="#">Yakında...</a></li>
<li><a href="#" _fcksavedurl="#">Yakında... </a></li>
<li><a href="#" _fcksavedurl="#">Yakında...</a></li>
<li><a href="#" _fcksavedurl="#">Yakında...</a></li>
</ul>
</div>

</div>
<div id="footer">
Copyright 2009 by BRKNL Tasarımcı by <a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Free Tasarım</a>
</div>
</div>
</div>

</body>

</html>

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;}
/*
terrafirma1.0 by nodethirtythree design
http://www.nodethirtythree.com
*/
*
{
padding: 0px;
margin: 0px;
}
body
{
background: #F9F9F7 url('https://img.webme.com/pic/y/yasamtazr-i/a1.gif') repeat-x;
font-size: 11px;
font-family: "trebuchet ms", helvetica, sans-serif;
color: #8C8C73;
line-height: 18px;
}
a
{
color: #FF7800;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
sup
{
font-size: 0.5em;
}
p
{
margin-bottom: 14px;
text-align: justify;
}
img.picA
{
position: relative;
top: -2px;
background: url('https://img.webme.com/pic/y/yasamtazr-i/a47.gif') no-repeat;
width: 76px;
height: 74px;
padding: 8px;
}
img.picB
{
position: relative;
top: -2px;
background: url('https://img.webme.com/pic/y/yasamtazr-i/a26.gif') no-repeat;
width: 146px;
height: 75px;
padding: 7px;
}
img.floatleft
{
float: left;
margin: 0px 14px 3px 0px;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
border-top: solid 1px #EEEEEE;
padding-top: 5px;
margin: 5px 0px 0px 0px;
}
ul.linklist li.first
{
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
}
#upbg
{
position: absolute;
top: 0px;
left: 0px;
background: #fff url('https://img.webme.com/pic/y/yasamtazr-i/upbg.gif') no-repeat;
width: 747px;
height: 264px;
z-index: 1;
}
#outer
{
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url('https://img.webme.com/pic/y/yasamtazr-i/abg.gif') repeat-y;
}
#inner
{
position: relative;
padding: 13px 30px 13px 30px;
z-index: 2;
}
#header
{
position: absolute;
background: #FF7800 url('https://img.webme.com/pic/y/yasamtazr-i/a8.gif') repeat-x;
width: 202px;
height: 92px;
color: #fff;
padding-left: 20px;
}
#header span
{
font-weight: normal;
}
#header h1
{
position: absolute;
font-size: 23px;
letter-spacing: -1px;
top: 30px;
line-height: normal;
}
#header h2
{
position: absolute;
font-size: 10px;
font-weight: normal;
color: #FCE2CA;
top: 51px;
}
#header sup
{
color: #FCE2CA;
}
#splash
{
position: absolute;
right: 30px;
background: #EAEAE2 url('https://img.webme.com/pic/y/yasamtazr-i/a10.jpg') no-repeat;
width: 458px;
height: 92px;
}
#menu
{
position: relative;
background: #46461F url('https://img.webme.com/pic/y/yasamtazr-i/a16.gif') repeat-x;
height: 67px;
padding: 0px 20px 0px 5px;
margin: 98px 0px 20px 0px;
}
#menu ul
{
}
#menu ul li
{
display: inline;
line-height: 52px;
padding-left: 3px;
}
#menu ul li.first
{
border-left: 0px;
}
#menu ul li a
{
background-color: transparent;
background-repeat: repeat-x;
padding: 8px 12px 8px 12px;
font-size: 12px;
color: #fff;
font-weight: bold;
}
#menu ul li a:hover
{
background: #fff url('https://img.webme.com/pic/y/yasamtazr-i/a18.gif') repeat-x top;
color: #4A4A24;
text-decoration: none;
}
#date
{
position: absolute;
top: 0px;
line-height: 52px;
color: #BDBDA2;
right: 30px;
font-weight: bold;
font-size: 12px;
letter-spacing: -1px;
}
#secondarycontent
{
position: relative;
width: 180px;
float: right;
}
#secondarycontent h3
{
position: relative;
top: 4px;
font-size: 16px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url('https://img.webme.com/pic/y/yasamtazr-i/a22.gif') bottom repeat-x;
padding: 0px 0px 10px 10px;
margin-bottom: 20px;
}
#secondarycontent .content
{
padding: 0px 10px 0px 10px;
margin-bottom: 20px;
}
#primarycontent
{
position: relative;
width: 480px;
float: left;
}
#primarycontent h3
{
position: relative;
top: 4px;
font-size: 18px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url('https://img.webme.com/pic/y/yasamtazr-i/a22.gif') bottom repeat-x;
padding: 0px 0px 10px 15px;
margin-bottom: 20px;
}
#primarycontent .content
{
padding: 0px 15px 0px 15px;
margin-bottom: 20px;
}
#primarycontent .post
{
margin-bottom: 30px;
}
#primarycontent .post .header
{
position: relative;
}
#primarycontent .post .date
{
position: absolute;
right: 15px;
top: 0px;
line-height: 35px;
color: #AFAFA4;
font-weight: bold;
}
#primarycontent .post .content
{
margin-bottom: 0px;
}
#primarycontent .post .footer
{
position: relative;
top: -10px;
background: url('https://img.webme.com/pic/y/yasamtazr-i/a33.gif') repeat-x;
height: 64px;
}
#primarycontent .post .footer ul
{
list-style: none;
position: absolute;
right: 15px;
bottom: 15px;
}
#primarycontent .post .footer ul li
{
display: inline;
line-height: 14px;
padding-left: 17px;
margin-left: 25px;
background-repeat: no-repeat;
background-position: 0px 2px;
}
#primarycontent .post .footer ul li.printerfriendly
{
background-image: url('https://img.webme.com/pic/y/yasamtazr-i/a41.gif');
}
#primarycontent .post .footer ul li.comments
{
background-image: url('https://img.webme.com/pic/y/yasamtazr-i/a36.gif');
}
#primarycontent .post .footer ul li.readmore
{
background-image: url('https://img.webme.com/pic/y/yasamtazr-i/a38.gif');
}
#footer
{
position: relative;
clear: both;
height: 66px;
text-align: center;
line-height: 66px;
background-image: url('https://img.webme.com/pic/y/yasamtazr-i/a50.gif');
color: #A8A88D;
}
#footer a
{
color: #8C8C73;
}

Css tasarım 8

Önizle

Tasarımın üstüne

Tasarımın altına

</div>
<div id="colB">
<div class="boxedB">
<h2>Menü</h2>
<ul>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">Link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
</ul>
</div>
<div class="boxedC">
<h2>Menü 2</h2>
<ul>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
<li><a href="#" _fcksavedurl="#">link</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2007 . Design by <a href="http://basmak03.tr.gg" _fcksavedurl="http://basmak03.tr.gg">basmak03.tr.gg</a>.</p>
</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;}
/*
Design by vargantking
http://www.vagrantking.tr.gg
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font: normal small Arial, Helvetica, sans-serif;
color: #999999;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #666666;
}
a {
color: #333333;
}
a:hover {
text-decoration: none;
color: #000000;
}
/* Menu */
#menu {
width: 704px;
height: 62px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 140px;
height: 41px;
margin-left: 1px;
padding-top: 10px;
border-top-width: 10px;
border-top-style: solid;
text-align: center;
text-transform: lowercase;
text-decoration: none;
letter-spacing: -1px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
}
#menu .first a {
margin: 0;
}
#menu1 { background: url(http://i63.servimg.com/u/f63/13/63/23/72/img0110.gif) no-repeat center bottom; border-color: #F07242; color: #C4856D; }
#menu2 { background: url(http://i63.servimg.com/u/f63/13/63/23/72/img0210.gif) no-repeat center bottom; border-color: #FCEE0F; color: #C0B94A; }
#menu3 { background: url(http://i63.servimg.com/u/f63/13/63/23/72/img0310.gif) no-repeat center bottom; border-color: #549EE9; color: #799EC3; }
#menu4 { background: url(http://i63.servimg.com/u/f63/13/63/23/72/img0410.gif) no-repeat center bottom; border-color: #9EBF54; color: #94A46F; }
#menu5 { background: url(http://i63.servimg.com/u/f63/13/63/23/72/img0510.gif) no-repeat center bottom; border-color: #9F8DF6; color: #B0A7DB; }
#menu a:hover {
color: #000000;
}
/* Logo */
#logo {
width: 704px;
height: 31px;
margin: 0 auto;
padding: 130px 0 0 0;
background: url(http://i63.servimg.com/u/f63/13/63/23/72/header11.jpg) no-repeat;
border-bottom: 10px solid #595959;
}
#logo h1, #logo h2 {
float: left;
text-transform: lowercase;
letter-spacing: -1px;
font-size: 1.4em;
font-weight: normal;
}
#logo h1 {
padding: 0 0 0 140px;
}
#logo h1 a {
color: #C3B1D2;
}
#logo h2 {
margin: 0 0 0 15px;
padding: 0 0 0 15px;
border-left: 1px solid #8E68A5;
}
#logo h2 a {
color: #AE96C0;
}
#logo a {
text-decoration: none;
}
/* Content */
#content {
width: 704px;
margin: 0 auto;
border-top: 1px solid #FFFFFF;
}
#colA {
float: right;
width: 424px;
padding: 0 30px 0 0;
}
#colB {
float: left;
width: 220px;
}
/* BoxedA */
.boxedA {
}
.boxedA h2 {
height: 35px;
padding-top: 25px;
border-bottom: 1px solid #CCCCCC;
font-size: 2em;
}
.boxedA h3 {
font-size: 1em;
font-weight: bold;
}
.boxedA p {
line-height: 2em;
text-align: justify;
}
.boxedA .more {
text-align: right;
}
.boxedA .more a {
padding: 0 1em;
background: #CCCCCC;
border-left: 4px solid #666666;
text-decoration: none;
}
.boxedA .more a:hover {
background: #666666;
color: #FFFFFF
}
/* BoxedB */
.boxedB {
margin-bottom: 1px;
background: #FAD4C6 url(http://i63.servimg.com/u/f63/13/63/23/72/img0710.gif) repeat-y;
border-bottom: 1px solid #F07242;
}
.boxedB h2 {
height: 35px;
padding: 25px 0 0 21px;
border-bottom: 1px solid #FFFFFF;
letter-spacing: -1px;
font-size: 24px;
font-weight: normal;
color: #F07242;
}
.boxedB ul {
margin: 0;
padding: 0;
list-style: none;
}
.boxedB li {
display: inline;
}
.boxedB a {
display: block;
width: 199px;
height: 23px;
padding: 7px 0 0 21px;
background: #FDF1EC url(http://i63.servimg.com/u/f63/13/63/23/72/img0810.gif) no-repeat;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
color: #F07242;
}
.boxedB a:hover {
background: #F7B8A0 url(http://i63.servimg.com/u/f63/13/63/23/72/img0910.gif) no-repeat;
color: #FFFFFF;
}
/* BoxedC */
.boxedC {
margin-bottom: 1px;
background: #CBE2F8 url(http://i63.servimg.com/u/f63/13/63/23/72/img1110.gif) repeat-y;
border-bottom: 1px solid #549EE9;
}
.boxedC h2 {
height: 35px;
padding: 25px 0 0 21px;
border-bottom: 1px solid #FFFFFF;
letter-spacing: -1px;
font-size: 24px;
font-weight: normal;
color: #549EE9;
}
.boxedC ul {
margin: 0;
padding: 0;
list-style: none;
}
.boxedC li {
display: inline;
}
.boxedC a {
display: block;
width: 199px;
height: 23px;
padding: 7px 0 0 21px;
background: #EEF5FD url(http://i63.servimg.com/u/f63/13/63/23/72/img1210.gif) no-repeat;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
color: #549EE9;
}
.boxedC a:hover {
background: #A9CEF4 url(http://i63.servimg.com/u/f63/13/63/23/72/img1310.gif) no-repeat;
color: #FFFFFF;
}
/* News */
#news {
}
#news h2 {
font-size: 22px;
}
#news ul {
list-style-type: square;
}
/* Footer */
#footer {
clear: both;
width: 704px;
margin: 0 auto;
border-top: 1px solid #666666;
background: #CCCCCC;
}
#footer p {
margin: 0;
padding: 30px 0;
text-align: center;
font-size: smaller;
color: #999999;
}
#footer a {
color: #999999;
}

Toplam 99078 ziyaretçi (229485 klik) kişi burdaydı!