- hazirtasarim5

hazirtasarim5

csstemplateworld1.tr.gg sitesine ait tasarım

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

Tasarım Üstüne

<-Bu Kodu Tasarım Üstüne Koy->
<div id="wrap">
<div id="header">
<h1 id="sitename">Css Template World<span id="description">Hazır Css Tasarımları ve Html Kodlar</span></h1>
<div id="topnav">
<ul>
<li><a href="" _fcksavedurl="">Ana Sayfa</a></li>
<li><a href="hazir-css-tasarimlari.htm" _fcksavedurl="hazir-css-tasarimlari.htm">Hazır  Tasarımlar</a></li>
<li><a href="free-css-templates.htm" _fcksavedurl="free-css-templates.htm">Ücretsiz Tasarımlar</a></li>
<li><a href="free-graphics" _fcksavedurl="free-graphics">Ücretsiz Grafik</a></li>
<li><a href="free-icons.htm" _fcksavedurl="free-icons.htm">Ücretsiz İconlar</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="headercolumn1">
<p class="description">
We design, develop and promote beautiful & accessible websites and web apps.
Checkout our <a href="portfolio" _fcksavedurl="portfolio">portfolio</a> or learn more about our <a href="/#" _fcksavedurl="/#">products</a> & <a href="#" _fcksavedurl="#">services</a></p>
</div>
<div id="headercolumn2">
<div id="search_top">
<form action="https://img.webme.com/pic/c/csstemplateworld1/search.php" method="get">
<p><input type="text" name="query" id="query" class="keyword"/>	</p>
<p class="button"><input name="" type="image" src="https://img.webme.com/pic/c/csstemplateworld1/searchbutton.gif" alt="Search" /></p>
<p class="hide">	<input type="hidden" name="search" value="1" /> </p>
</form>
</div>
<div id="e-posta"><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/csstemplateworld1/e-posta.jpg" _fcksavedurl="https://img.webme.com/pic/c/csstemplateworld1/e-posta.jpg" border="0">
</a></div>
</div>
</div>
<div id="contents">
<div id="topbar">
<div class="columns">
<h2>First Title</h2>
<p>Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit amet, felis. Donec euismod, felis non auctor tempus, ante metus sollicitudin ante</p>
</div>
<div class="columns">
<h2>Second Title</h2>
<p>Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit amet, felis. Donec euismod, felis non auctor tempus, ante metus sollicitudin ante</p>
</div>
<div class="columns">
<h2>Third Title</h2>
<p>Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit amet, felis. Donec euismod, felis non auctor tempus, ante metus sollicitudin</p>
</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;}
/*
SLIDER
*/
.slider-wrap								{
}
#main-photo-slider {
width: 501px;
overflow: hidden;
}
#from_portfolio {
background: url(https://img.webme.com/pic/c/csstemplateworld1/sliderbg.png) no-repeat 0px 8px;
height: 212px;
width: 501px;
margin: auto;
padding-top: 16px;
padding-left: 10px;
padding-right: 11px;
overflow: hidden;
}
.stripViewer .panelContainer
.panel ul									{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer								{
position: relative;
overflow: hidden;
}
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{
float: left;
height: 100%;
width: 501px;
overflow: hidden;
}
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 									{ border: 1px solid black; margin-right: 5px; }
#movers-row									{ margin: -43px 0 0 62px; }
#movers-row div								{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data							{
background: url(https://img.webme.com/pic/c/csstemplateworld1/transpBlack.png);
padding: 5px;
color: white;
}
.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{ display: block; width: 62px; margin-top: -14px;
position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb 								{ background: transparent url(https://img.webme.com/pic/c/csstemplateworld1/icon-uparrowsmallwhite.png) top center no-repeat; }
* { padding:0; margin:0;
}
a {
color: #194896;
text-decoration: none;
}
ul {list-style:none;}
body {background:url(https://img.webme.com/pic/c/csstemplateworld1/bg.jpg) repeat; font:11px Verdana, Arial, Helvetica, sans-serif; color:#333;}
#wrap { width:894px; margin:auto;}
.hide {
display: none;
}
#header {background:url(https://img.webme.com/pic/c/csstemplateworld1/header.jpg) no-repeat; height:273px; }
#contents {background:url(https://img.webme.com/pic/c/csstemplateworld1/contentbg.jpg) repeat-y; padding:1px 5px 0 5px;}
.clear {clear:both;}
#bottom {background:url(https://img.webme.com/pic/c/csstemplateworld1/bottombg.jpg) repeat-x; height:126px;}
#footer {background:url(https://img.webme.com/pic/c/csstemplateworld1/footer.jpg) no-repeat; height:81px;}
#topbar {background:url(https://img.webme.com/pic/c/csstemplateworld1/topbarbg.jpg) left bottom no-repeat; height:129px;
}
#homepage {padding:15px 0;}
#homepage .services {width:300px; padding:0 5px; float:right;}
#homepage .portfolio_preview { width:565px; height:260px; float:left; background:url(https://img.webme.com/pic/c/csstemplateworld1/featuredprojectbg.jpg) repeat-x;}
h1, h2, h3, h4 {font-family:"Trebuchet MS", halvetica, Verdana, sans-serif; font-weight:bold;}
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
h4 {font-size:12px;}
.subhead {display:block; background:url(https://img.webme.com/pic/c/csstemplateworld1/subheadbg.jpg) repeat-x; height:25px; padding:3px 5px 0 5px;}
.portfolio_preview h2 {display:block; padding:3px 3px 0 5px; color:#fff; height:25px;}
.services li {display:block; padding:3px 5px 3px 40px; margin:5px 0 3px; height:46px; border-bottom:solid 1px #ccc;}
.services li.idea {background:url(https://img.webme.com/pic/c/csstemplateworld1/ideaicon.jpg) no-repeat; }
.services li.design {background: url(https://img.webme.com/pic/c/csstemplateworld1/designicon.jpg) no-repeat; }
.services li.apps {background: url(https://img.webme.com/pic/c/csstemplateworld1/interneticon.jpg) no-repeat; }
.services li.mobile {background: url(https://img.webme.com/pic/c/csstemplateworld1/mobileicon.jpg) no-repeat; }
#sitename {
display: block;
padding-top: 35px;
height: 73px;
padding-left: 10px;
font:bold italic 30px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; text-shadow:#000 1px 1px 1px;
}
#sitename #description {display:block; font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important;}
#topnav{height:56px;}
#topnav ul {padding:14px 15px 0; font: bold 14px "Trebuchet MS", halvetica, Verdana, sans-serif; text-transform:uppercase;}
#topnav li {
display:block;
float:left;
height: 41px;
background: url(https://img.webme.com/pic/c/csstemplateworld1/menu_line.gif) no-repeat left top;
padding-left: 5px;
}
#topnav  a {
display: block; height:38px; padding:3px 10px 0 10px; text-decoration:none; color:#7098c6; float:left;}
#topnav li#first {background:none!important;}
#topnav .active a {background:url(https://img.webme.com/pic/c/csstemplateworld1/menuactive.gif) no-repeat center 27px; color:#184896;}
#topnav a:visited, #topnav a:active {color:#7098c6; text-decoration:none;}
#topnav a:hover {color:#184896;}
#headercolumn1 {
width: 550px;
padding-left: 15px;
float: left;
}
#headercolumn2 {
width: 290px;
float: right;
padding-right: 15px;
}
.description {
color:Black;
font:14px "Trebuchet MS", halvetica, Verdana, sans-serif;
display:block;
padding-top: 25px;
}
.description a {color:#fff; text-decoration:none; border-bottom: dashed 1px #fff;}#search_top {
background: url(https://img.webme.com/pic/c/csstemplateworld1/searchbg.gif) no-repeat;
height: 36px;
width: 278px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
#search_top p {
display:block;
float: left;
}
#search_top .keyword {
background: transparent;
border-style: none;
display: block;
width: 125px;
float: left;
padding: 5px;
}
#search_top .button {
padding-top: 3px;
display: block;
float: left;
padding-left: 5px;
}
#search_top form {
display: block;
background: url(https://img.webme.com/pic/c/csstemplateworld1/searchfield.gif) no-repeat;
height: 30px;
margin-top: 3px;
float: right;
width: 170px;
margin-right: 5px;
}
#e-posta {
padding: 0px 0px 0px 6px;
}
#topbar .columns {
width: 32%;
float: left;
padding: 3px;
margin: 1px;
color:#999999;
}
.columns .by {
font-weight: bold;
}
#topbar .columns p {
line-height: 16px;
padding: 10px;
}
.blog_column {
width: 400px;
float: left;
padding: 5px;
}
.right_column {
width: 240px;
float: right;
padding: 5px;
}
.narrow_column {
margin-right: 255px;
margin-left: 415px;
padding: 5px;
}
.post p {
line-height: 16px;
margin-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
}
.post_head .meta {
font-size: 10px;
color: #999999;
display: block;
margin-top: 3px;
}
.post .post_head {
background: url(https://img.webme.com/pic/c/csstemplateworld1/blogicon.jpg) no-repeat right top;
height: 50px;
margin-bottom: 10px;
padding: 5px;
}
#bottom .columns {
padding: 5px;
float: left;
width: 32%;
}
#footer .footercontent {
text-align: center;
padding-top: 15px;
color: #FFFFFF;
}
.footercontent a {color: #fff;}
.footercontent a:visited, .footercontent a:active  {color: #fff;}
.footercontent p {
margin-bottom: 5px;
}
.portfolio_preview .imageholder {
padding: 35px 5px 5px 15px;
height: 154px;
width: 334px;
float: left;
}
.portfolio_preview .clientinfo {
width: 180px;
float: right;
padding-top: 40px;
padding-left: 15px;
padding-right: 10px;
background: url(https://img.webme.com/pic/c/csstemplateworld1/portfoliodevider.png) no-repeat left 25px;
}
.portfolio_preview .imageholder img {
background: #194896;
padding: 3px;
display: block;
border: 1px solid #000000;
}
.clientinfo a {
color: #FFFFFF;
border-bottom: 1px dashed #fff;
}
.clientinfo .label {
color: #FFFFFF;
width: 100px;
display: block;
}
.clientinfo p {
display: block;
padding: 3px;
margin-bottom: 8px;
color: #FFFFFF;
}
#contents #left {
padding: 8px;
width: 550px;
float: left;
}
#contents #sidebar {
width: 290px;
float: right;
padding: 8px;
}
#left p {
line-height: 16px;
margin-bottom: 15px;
}
.service_img {
display: block;
float: left;
border-style: none;
margin-right: 5px;
margin-left: 5px;
}
#wrap #contents #left ul li {
display: block;
background: url(https://img.webme.com/pic/c/csstemplateworld1/bullet.jpg) no-repeat 0px 3px;
padding: 5px 5px 5px 10px;
margin-left: 15px;
margin-bottom: 3px;
}
.devider {
background: #FFFFFF;
border-bottom: 1px solid #ccc;
display: block;
color: #FFFFFF;
margin-bottom: 15px;
}
#left .servicetitle {
display: block;
margin-bottom: 10px;
color: #194896;
}
#left .service_p {
padding-left: 60px;
}
#sidebar p {
line-height: 16px;
margin-bottom: 16px;
}
a img {
border : none;
}
a:hover img {border:none;}
a:visited img, a:active img {border:none;}#getaquote #fcf2 .r .f {
display: block;
}
.f input {
display: block;
border: 1px solid #999999;
padding: 5px;
}
#getaquote #fcf2 .r .f #comments {
border: 1px solid #999999;
padding: 5px;
}
.products_list li {display:block; height:70px; width:201px; margin-bottom:3px;}
.products_list a {display:block; background:url(https://img.webme.com/pic/c/csstemplateworld1/productbg1.gif) no-repeat; height:56px; width:201px; text-align:center; padding:12px 0 0 0; text-decoration:none;}
.products_list {padding-top:5px;}
.products_list a:hover {background:url(https://img.webme.com/pic/c/csstemplateworld1/productbg2.gif) no-repeat;}#quote_request {
background-image: url(https://img.webme.com/pic/c/csstemplateworld1/formbg.gif);
background-repeat: repeat;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#quote_request h2 {
display: block;
background: url(https://img.webme.com/pic/c/csstemplateworld1/quote.gif) no-repeat;
height: 61px;
padding-left: 61px;
padding-top: 8px;
}
#quote_request form  p {
display: block;
padding-left: 12px;
}
#quote_request .commentarea {
display: block;
height: 140px;
width: 257px;
border: solid 1px #e0dccb;
}
#quote_request .commentarea:hover {border:solid 1px #908b72;}
#quote_request label {
display: block;
padding: 3px;
font: bold 12px "Trebuchet MS", halvetica, Verdana, sans-serif;
}
#quote_request .textfield {
background: transparent url(https://img.webme.com/pic/c/csstemplateworld1/textfield1.gif) no-repeat;
display: block;
border-style: none;
height: 28px;
width: 241px;
padding:7px 8px 0 8px;
font: bold 14px "Trebuchet MS", halvetica, Verdana, sans-serif; color:#655045;
}
#quote_request .textfield:hover {
background: transparent url(https://img.webme.com/pic/c/csstemplateworld1/textfield2.gif) no-repeat;
}
#quote_request label .info {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
display: block;
}
.success {
background: #d9e7f3 url(https://img.webme.com/pic/c/csstemplateworld1/success.gif) no-repeat 3px 3px;
display: block;
padding: 5px 5px 5px 55px!important;
height: 60px;
}
.error {
background: #ead2a8 url(https://img.webme.com/pic/c/csstemplateworld1/error.gif) no-repeat 3px 3px;
display: block;
padding: 5px 5px 5px 55px!important;
height: 60px;
}
.progress {
background: url(https://img.webme.com/pic/c/csstemplateworld1/loading.gif) no-repeat 3px 3px;
padding: 5px 5px 5px 55px!important;
height: 50px;
}
.bordered {
border-bottom: 1px dashed #999999;
margin-bottom: 15px;
padding-bottom: 10px;
display: block;
}
#bottom p {
display: block;
padding: 3px;
}
#bottom .columns h3 {
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
color: #194896;
display: block;
}
#midbottom img {
display: block;
float: left;
padding-top: 30px;
padding-left: 25px;
padding-right: 15px;
}
.resourcelist li {
display: block;
height: 25px;
}
.resourcelist a {
display: block;
height: 18px;
padding-top: 6px;
padding-right: 4px;
padding-left: 15px;
background: url(https://img.webme.com/pic/c/csstemplateworld1/bullet.jpg) no-repeat 0px 7px;
border-bottom:dashed 1px #ccc;}
.resourcelist a:hover {color:#000;}.theme_image {
display: block;
margin: auto;
padding: 5px;
background: #f4f4f4;
border: 1px solid #ccc;
}
#widecolumn {
padding: 8px;
}
.nrwcolumn {
float: left;
width: 23%;
margin: 4px;
padding: 4px;
}
#widecolumn #real2 {
background: url(https://img.webme.com/pic/c/csstemplateworld1/real2logo.jpg) no-repeat center top;
padding-top: 105px;
}
#widecolumn #omcms {
background: url(https://img.webme.com/pic/c/csstemplateworld1/omlogo.jpg) no-repeat center top;
padding-top: 105px;
}
#widecolumn #kre8ivity {
background: url(https://img.webme.com/pic/c/csstemplateworld1/kre8ivitylogo.jpg) no-repeat center top;
padding-top: 105px;
}
#widecolumn #oet {
background: url(https://img.webme.com/pic/c/csstemplateworld1/oetlogo.jpg) no-repeat center top;
padding-top: 105px;
}
#widecolumn  p {
line-height: 16px;
margin-bottom: 16px;
}
.blue {
color: #194896;
padding-bottom: 10px;
}
.lists li {
display: block;
background: url(https://img.webme.com/pic/c/csstemplateworld1/bullet.jpg) no-repeat 3px 5px;
padding: 5px 5px 5px 20px;
margin-bottom: 5px;
}
#portfolio .site {
padding: 15px 5px 5px;
background: #E0EEFC url(https://img.webme.com/pic/c/csstemplateworld1/portfoliobg.gif) repeat-x left bottom;
border: 1px solid #BDDBF9;
position: relative;
margin-bottom: 5px;
}
.portfolio_image {
display: block;
padding: 9px;
margin: auto;
background: #FFFFFF;
border: 1px solid #B9D9F9;
}
#portfolio .site .layer span {
display: block;
padding-top: 40px;
font: bold 14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
padding-left: 40px;
}
.site .layer {
display: block;
background: url(https://img.webme.com/pic/c/csstemplateworld1/portfoliolayer.gif) no-repeat;
height: 88px;
width: 80px;
position: absolute;
float: right;
z-index: 99;
right: 8px;
top: 114px;
}
#portfolio .site p {
display: block;
margin: 0px 10px 8px;
padding: 0px 5px 5px;
}
.portfolio_image:hover {
display: block;
padding: 9px;
margin: auto;
background: #ffe;
border: 1px solid #194896;
}
.testimonails blockquote {
background: url(https://img.webme.com/pic/c/csstemplateworld1/dblquotes.gif) no-repeat 3px 3px;
padding-left: 30px;
}
#results .description {
color: #333333;
padding: 5px;
margin-bottom: 10px;
border-bottom: 1px dashed #ccc;
}
#results .url {
padding: 5px;
background: #f4f4f4;
}
#results {
padding: 5px;
}
#result_report {
padding: 3px;
background: #4891ED;
color: #FFFFFF;
}
.columns h2 {
display: block;
padding-left: 10px;
padding-top: 3px;
height: 20px;
text-shadow:#000 1px 1px 1px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFF;
}
.portfolio_preview h2 img {
display: block;
padding-left: 12px;
padding-top: 3px;
}
br.clear {
display: block;
clear: both;
height: 1px;
}