- hazirtasarim3

hazirtasarim3

Dinamik sayfa geçişi
Turuncu ağırlıklı renk renk
2 sütunlu
Çok Boyutlu site

Tasarım Üstüne

<-Bu Kodu Tasarım Üstüne Koy->

<div class="shell">

<div class="box">
<div class="top"> </div>
<div class="cnt">

<div id="header">
<div class="cl"> </div>
<div class="a-side-header">
<span class="fl">Language:</span> <a href="#" _fcksavedurl="#" class="lang">Türkçe</a> <span class="sep notext"> </span> <a href="#" _fcksavedurl="#" class="sitemap">Sitemap</a>
</div>

<h1 id="logo"><a href="#" _fcksavedurl="#">Business Company</a></h1>

<div class="cl"> </div>
</div>


<div id="navigation">
<ul>
<li><a href="#" _fcksavedurl="#" class="active">Ana Sayfa</a></li>
<li><a href="#" _fcksavedurl="#">Link 1</a></li>
<li><a href="#" _fcksavedurl="#">Link 2</a></li>
<li><a href="#" _fcksavedurl="#">Link 3</a></li>
<li><a href="#" _fcksavedurl="#">Hakkımızda</a></li>
<li><a href="#" _fcksavedurl="#">İletişim</a></li>
</ul>
<div id="search">
<form action="#" method="post">
<input type="text" class="field blink" title="SEARCH" value="SEARCH" />
<input type="submit" class="btn notext" value="search" />
</form>
</div>
</div>

<div id="content">
<div class="cl"> </div>

<div class="column">
<div class="service red-box">
<h2><span class="notext">Başlık 1</span></h2>
<p>Buraya sitenizle ilgili herhangi birşey yazabilirsiniz. Duyuru yada site içindeki önemli başlıklardan herhangi biri</p>
<a href="#" _fcksavedurl="#" class="more">iLeRi</a>
</div>
</div>


<div class="column middle-col">
<div class="service orange-box">
<h2><span class="notext">Başlık 2</span></h2>
<p>Buraya sitenizle ilgili herhangi birşey yazabilirsiniz. Duyuru yada site içindeki önemli başlıklardan herhangi biri</p>
<a href="#" _fcksavedurl="#" class="more">iLeRi</a>
</div>
</div>


<div class="column">
<div class="service green-box">
<h2><span class="notext">Başlık 3</span></h2>
<p>Buraya sitenizle ilgili herhangi birşey yazabilirsiniz. Duyuru yada site içindeki önemli başlıklardan herhangi biri</p>
<a href="#" _fcksavedurl="#" class="more">iLeRi</a>
</div>
</div>

<div class="cl"> </div>
</div>

Tasarım Altına

Css Koduna

<-Bu Kodu Css Koduna Koy->
/*Tema Tasarım ve Kodlama : csstemplateworld.tr.gg / SeLçuk */
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;}
/*
Default Styles
*/
* { margin: 0; padding: 0; outline: 0; }
body { font: 12px/14px Arial,sans-serif; color: #3a3a3a; text-align: left; background: #cad8e3 url(https://img.webme.com/pic/s/sosyalmeydan/background.gif) repeat-x 0 0; padding-top: 10px; }
a { color: #ffc50c; text-decoration: none; }
a:hover { cursor: pointer; text-decoration: underline; }
a img { border: 0; }
.fl { float: left; display: inline; }
.fr { float: right; display:inline; }
.ac { text-align: center; }
.ar { text-align: right; }
.al { text-align: left; }
.cl { clear: both; height: 0; line-height: 0; font-size: 0; text-indent: -4000px; }
.hidden { display: none; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.shell { width: 980px; margin: 0 auto; p}
.box { margin-bottom: 10px; }
.box .cnt { height: 100%; background: #fff; padding: 5px 10px; }
.box .bottom { background: url(images/box-bottom.gif) no-repeat 0 0; height: 3px; }
.box .top {
background: url(https://img.webme.com/pic/s/sosyalmeydan/box-top.gif) no-repeat 0 0;
height: 4px;
font-size: 0;
line-height: 0;
text-indent: -4000px;
}
/*
Header
*/
h1#logo { height: 52px; width: 276px; margin: 28px 0 0 12px; }
h1#logo a { display: block; height: 52px; background: url(https://img.webme.com/pic/s/sosyalmeydan/logo.gif); text-indent: -4000px; }
.a-side-header { float: right; display: inline; width: 220px; font-size: 11px; color: #8f8f8f; line-height: 20px; padding-top: 10px; }
.a-side-header a:hover { text-decoration: none; }
.a-side-header span { line-height: 25px; }
.a-side-header span.sep {
float: left;
display: inline;
height: 25px;
width: 1px;
background: #ebebeb;
position: relative;
margin: 0 5px;
}
.a-side-header .lang {
float: left;
display: inline;
height: 20px;
width: 72px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/lang-bg.gif) no-repeat 0 0;
padding-left: 7px;
font-size: 10px;
line-height: 20px;
color: #4d4d4d;
margin: 3px 5px 0;
}
.a-side-header .sitemap {
float: left;
display: inline;
color: #8f8f8f;
background: url(https://img.webme.com/pic/s/sosyalmeydan/icon-sitemap.gif) no-repeat 0 center;
padding-left: 14px;
line-height: 25px;
}
/*
Navigation
*/
#navigation {
height: 32px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/navigation.gif) no-repeat 0 0;
padding-top: 4px;
margin: 5px 0;
}
#navigation ul {
list-style: none outside;
float: left;
display: inline;
width: 75%;
margin-left: 4px;
}
#navigation li {
float: left;
display: inline;
height: 28px;
margin-right: 5px;
}
#navigation li a {
float: left;
display: inline;
height: 28px;
width: 84px;
padding-right: 10px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/nav-bg.gif) no-repeat 0 0;
text-align: center;
font-size: 10px;
text-transform: uppercase;
line-height: 28px;
color: #616b63;
}
#navigation li a:hover,
#navigation li a.active {
background-position: -94px 0;
text-decoration: none;
}
#search {
float: right;
display: inline;
width: 160px;
height: 25px;
margin: 3px 7px 0 0;
background: url(https://img.webme.com/pic/s/sosyalmeydan/search-field.gif) no-repeat 0 0;
}
#search .field {
font-size: 10px;
float: left;
display: inline; margin: 6px 0 0 5px;
width: 120px;
border: 0;
background: none;
color: #616b63;
}
#search .btn {
float: right;
display: inline;
height: 13px;
width: 12px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/icon-search.gif) no-repeat 0 0;
border: 0;
margin: 6px 7px 0 0;
cursor: pointer;
}
.column { float: left; display: inline; width: 310px; }
.middle-col { margin: 0 15px; }
.service {
width: 280px;
height: 164px;
padding: 7px 15px;
}
.service p {
text-align: center;
color: #fff;
font-size: 11px;
line-height: 15px;
padding: 5px 0;
}
.service .more {
display: block;
height: 28px;
width: 113px;
text-align: center;
background: url(https://img.webme.com/pic/s/sosyalmeydan/button-lrn-more.png) no-repeat 0 0;
color: #5d5d5d;
font-size: 13px;
line-height: 28px;
margin: 7px auto;
}
/*
Red Box
*/
.red-box { background: url(https://img.webme.com/pic/s/sosyalmeydan/red-box.gif) no-repeat 0 0; }
.red-box h2 { height: 57px; }
.red-box h2 span {
display: block;
height: 21px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/h2-finance.gif) no-repeat 0 0;
margin-left: 40px;
position: relative;
top: 15px;
}
/*
Orange Box
*/
.orange-box { background: url(https://img.webme.com/pic/s/sosyalmeydan/orange-box.gif) no-repeat 0 0; }
.orange-box h2 { height: 57px; }
.orange-box h2 span {
display: block;
height: 26px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/h2-business.gif) no-repeat 0 0;
margin-left:47px;
position: relative;
top: 15px;
}
/*
Green Box
*/
.green-box { background: url(https://img.webme.com/pic/s/sosyalmeydan/green-box.gif) no-repeat 0 0; }
.green-box h2 { height: 57px; }
.green-box h2 span {
display: block;
height: 26px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/h2-project.gif) no-repeat 0 0;
margin-left: 48px;
position: relative;
top: 15px;
}
/*
Latest News
*/
.latest-news { height: 100%; background: url(https://img.webme.com/pic/s/sosyalmeydan/latest-news-bg.gif) repeat-y 0 0; }
.latest-news .latest-bottom { background: url(https://img.webme.com/pic/s/sosyalmeydan/latest-news-bottom.gif) no-repeat 0 bottom; }
.latest-news .latest-top { background: url(https://img.webme.com/pic/s/sosyalmeydan/latest-news-top.gif) no-repeat 0 top; padding: 7px; }
.latest-news h2 {
font: 22px/22px "Trebuchet MS", Arial, sans-serif;
color: #404040;
margin-bottom: 10px;
padding-left: 10px;
}
.latest-news .news {
padding: 10px 5px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/latest-news-separator.gif) repeat-x 0 bottom;
margin: 0 5px;
}
.latest-news .news small {
display: block;
color: #c04226;
font-size: 11px;
margin-bottom: 3px;
}
.latest-news .news p { line-height: 15px; color: #5a5a5a; }
.latest-news .actions {
float: right;
display: inline;
background: url(https://img.webme.com/pic/s/sosyalmeydan/latest-news-actions.gif) no-repeat 0 bottom;
line-height: 12px;
padding-left: 15px;
color: #c24426;
text-decoration: underline;
margin:  10px 5px 5px 5px;
}
.latest-news .actions:hover { text-decoration: none; }
/*
Other News
*/
.post { padding: 5px 0 5px 10px; }
.post h2 { font: 20px "Trebuchet MS", Arial, sans-serif; color: #404040; margin-bottom: 7px; }
.post h2 span { color: #be3f24; }
.post p { padding-bottom: 10px; }
.post .more {
display: block;
height: 11px;
background: url(https://img.webme.com/pic/s/sosyalmeydan/latest-news-actions.gif) no-repeat 0 0;
padding-left: 15px;
line-height: 11px;
font-size: 11px;
color: #c24426;
text-decoration: underline;
}
.post .more:hover { text-decoration: none; }
.post ul { list-style: none outside; padding: 20px 0 0 0; }
.post li {
background: url(https://img.webme.com/pic/s/sosyalmeydan/latest-news-actions.gif) no-repeat 0 2px;
padding-left: 15px;
padding-bottom: 5px;
}
.post li a {
font-size: 11px;
line-height: 11px;
color: #c24426;
text-decoration: underline;
}
.post li a:hover { text-decoration: none; }
/*
Footer
*/
#footer { padding: 10px 0; font-size: 10px; }
#footer a { color: #3a3a3a; text-decoration: underline; }
#footer a:hover { text-decoration: none; }
.service .more { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://img.webme.com/pic/s/sosyalmeydan/button-lrn-more.png', sizingMethod='image'); }