Tasarımın Adresi

Turuncu Portakal Teması

Sitemiz tarafından düzenlenen ilk tasarımdır.Şık ve estetik bir görünüme sahip olduğu kadar da klasilktir.Tasarım kodunun içinde "URL GİR" / "BAŞLIK GİR" gibi yaptığımız eklentilerle tasarımı sitenize uyarlamanız kolaylaştırılmıştır.Zaten biraz HTML bilenler hemen işi çözecektir.Herhangi bir bilgiye sahip olmayanların ise sitemizdeki "Tasarımı Siteme Nasıl Uygularım?" başlığını incelemelerini tavsiye ederiz.

Tasarımın Kodları:

Tasarımın Üstündeki Metin:

<div id="wrapper">  	 	<div id="header"> 			<div id="logo"><a href="#" _fcksavedurl="#"><img src="img/logo.gif" _fcksavedurl="img/logo.gif" alt="Logo" width="25" height="41" /></a></div>  		 		<h1><a href="SİTENİN URL ADRESİNİ GİR" _fcksavedurl="SİTENİN URL ADRESİNİ GİR">SLOGAN GİR</a></h1> 		 		 			 			<h2>ALT SLOGAN GİR</h2> 			 		 		 		<form class="Searching" action=""> 		<fieldset> 			<label></label> 				<input class="Search" type="text" onfocus_fckprotectedatt="%20onfocus%3D%22if(this.value%3D%3Dthis.defaultValue)this.value%3D''%22"  			 onblur_fckprotectedatt="%09onblur%3D%22if(this.value%3D%3D'')this.value%3Dthis.defaultValue%22" value="Arayacağın Terimler…" /> 				<input class="hledat" type="submit" value="   Ara   " name="" alt="Search" /> 		</fieldset> 		</form> 		 		<div id="slogan"><span></span> – <span></span></div> 	</div> 	 	 	 	<div id="menu-box" class="cleaning-box"> 	<a href="#skip-menu" _fcksavedurl="#skip-menu" class="hidden">Skip menu</a> 		<ul id="menu"> 			<li class="first"><a href="URL GİR" _fcksavedurl="URL GİR" class="active">Anasayfa</a></li> 			<li><a href="URL GİR" _fcksavedurl="URL GİR">Hizmetler</a></li> 			<li><a href="URL GİR" _fcksavedurl="URL GİR">Kategoriler</a></li> 			<li><a href="URL GİR" _fcksavedurl="URL GİR">İletişim</a></li> 		</ul> 	</div> 	 	 <hr class="noscreen" />  <div id="skip-menu"></div> 	 	<div id="contennt">  		<div id="column-1">  			<div id="column-11">  				<div class="contennt">  					<h3 class="first"></h3>

Tasarımın Altındaki Yazı:

<div class="cleaner"> </div>  	 				</div> 			</div> 			 			<div id="column-12"> 				<h3>Duyurular</h3>  					<dl class="news"> 						<dt>DUYURU TARİHİ YAZ</dt> 							<dd>DUYURU METNİ YAZ… <a href="#" _fcksavedurl="#"></a></dd>  						<dt>DUYURU TARİHİ YAZ</dt> 							<dd>DUYURU METNİ YAZ… <a href="" _fcksavedurl=""></a></dd>  						<dt>DUYURU TARİHİ YAZ</dt> 							<dd>DUYURU METNİ YAZ… <a href="" _fcksavedurl=""></a></dd> 					</dl> 					 				<h3>Kategoriler</h3> 					<ul class="menicko"> 						<li> 							<ul> 								<li><a href="KATEGORİ LİNKİ GİR" _fcksavedurl="KATEGORİ LİNKİ GİR">KATEGORİ GİR</a></li> 								<li><a href="KATEGORİ LİNKİ GİR" _fcksavedurl="KATEGORİ LİNKİ GİR" class="active">KATEGORİ GİR</a></li> 								<li><a href="KATEGORİ LİNKİ GİR" _fcksavedurl="KATEGORİ LİNKİ GİR">KATEGORİ GİR</a></li> 								<li><a href="KATEGORİ LİNKİ GİR" _fcksavedurl="KATEGORİ LİNKİ GİR">KATEGORİ GİR</a></li> 								<li><a href="KATEGORİ LİNKİ GİR" _fcksavedurl="KATEGORİ LİNKİ GİR">KATEGORİ GİR</a></li> 							</ul> 						</li>  						<li> 							<ul> 								<li><a href="KATEGORİ LİNKİ GİR" _fcksavedurl="KATEGORİ LİNKİ GİR">KATEGORİ GİR</a></li> 								<li><a href="KATEGORİ LİNKİ GİR" _fcksavedurl="KATEGORİ LİNKİ GİR"> KATEGORİ GİR</a></li> 								<li><a href="KATEGORİ LİNKİ GİR" _fcksavedurl="KATEGORİ LİNKİ GİR"> KATEGORİ GİR</a></li> 							</ul> 						</li> 					</ul>  				<h3></h3>  			</div> 		</div> 		 		<div id="column-2">  			<h3>Hoşeldiniz...</h3>  				<div class="contennt"> 					<p><strong>Sitemize Hoşgeldiniz....</strong></p> 					<p>Sizleri yine bekleriz...</p> 				</div>  			<h3>Ana Menü</h3>  				<ul class="menicko"> 					<li>Heading 						<ul> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR" class="active">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 						</ul> 					</li>  					<li> 						<ul> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR"BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 						</ul> 					</li>  					<li> 						<ul> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 							<li><a href="BAŞLIK URL GİR" _fcksavedurl="BAŞLIK URL GİR">BAŞLIK GİR</a></li> 						</ul> 					</li> 				</ul>  			<h3>İletişim</h3> 				<address> 					<strong>İLETİŞİM BİLGİLERİ GİR 				</address> 		</div> 		<div class="cleaner"> </div> 	</div>  <hr class="noscreen" />  	 	<div id="footer"> 		<div id="footer-in"> 			<p class="footer-left">© <a href="http://www.tr-gg-css-king.tr.gg" _fcksavedurl="http://www.tr-gg-css-king.tr.gg">  www.tr-gg-css-king.tr.gg </a>Coprigt By MHD © 2013  Her Hakkı Saklıdır... .</p> 			<p class="footer-right"><a href="http://tr-gg-css-king.tr.gg/" _fcksavedurl="http://tr-gg-css-king.tr.gg/">Tasarım Yapılır</a>  			<a href="" _fcksavedurl=""></a></p> 		</div> 	</div> 	  </div>

CSS Kodu:

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}  /*  Hazırlayan / Design By MHD [http://tr-gg-css-king.tr.gg/]. Daha çok tema için takipte kaln...[http://tr-gg-css-king.tr.gg/]. */    /* CSS Document */   /* General */  * { margin: 0; padding: 0; }  html { height: 100%; font-size: 62.5%; }  body { height: 100%; text-align: center; font: 1.2em Verdana, Arial, Helvetica, sans-serif; min-width: 950px; }  a:link, a:visited { color: #005AA1; text-decoration: underline; font-weight: bold; }  a:hover { text-decoration: none; }  .cleaner { clear: both; height: 0; font-size: 0; visibility: hidden; contennt: ' '; }  .cleaning-box {  min-height: 1px; }  .cleaning-box:after { display: block;  clear: both;  visibility: hidden;  height: 0;  font-size: 0;  contennt: ' '; }  .noscreen { display: none; }  .hidden { /* Skip menu */ position: absolute; top: -10000px; left: 0; width: 1px; height: 1px; overflow: hidden; }   /* Wrapper of the site */  #wrapper { background-color: white; width: 950px; margin: 0 auto; }   /* Paragraphs, headings, ... */  p { line-height: 170%; margin-bottom: 10px; color: #252525; }  h1 { font-size: 1.9em; font-weight: normal; color: #FFFFFF; text-align: left; padding: 20px 0 4px 0; margin-left: 61px; background: url('http://www.mantisatemplates.com/template-preview/three-columns/three-columns-orange/img/h1-bg.gif') repeat-x 0 100%; width: 50%; }  h1 a:link, h1 a:visited { font-weight: normal; text-decoration: none; color: #FFFFFF; }  h2 { font-size: 1.3em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #FFFFFF; letter-spacing: 1px; text-align: left; padding-left: 61px; margin-top: 4px; }  h3 { font-size: 1.4em; font-weight: normal; font-family: Georgia, "Times New Roman", Times, serif; color: #252525; letter-spacing: 1px; padding-bottom: 3px; border-bottom: 1px solid #252525; margin: 20px 0 7px 0; width: 100%; }  h3.first { margin: 0 0 7px 0; }  address { font-style: normal; line-height: 160%; margin: 5px 8px; }   /* Header */  #header { width: 950px; height: 138px; position: relative; margin: 0 auto; background: #000000 url('http://www.mantisatemplates.com/template-preview/three-columns/three-columns-orange/img/hd-bg.gif') repeat-x 0 0; text-align: left; }   /* Logo, slogan */  #logo { position: absolute; top: 23px; left: 27px; width: 25px; height: 41px; }  #logo a, #logo a:visited { color: #FFFFFF; }  #logo img { border: 0; }  #slogan { font-size: 1.4em; letter-spacing: 1px; position: absolute; top: 97px; right: 290px; color: #FFFFFF; }  #slogan span { color: #FF8034; }   /* Search form */  form.searching { width: 240px; position: absolute; top: 20px; right: 20px; }  form.searching fieldset { border: 0; }  form.searching input.search { letter-spacing: 1px; float: left; padding: 2px 0 2px 6px; width: 139px; border: 0; }  form.searching input.hledat { font-size: 0.9em; letter-spacing: 2px; padding-left: 0; margin-left: 4px; font-weight: bold; float: left; }  form.searching label { display: none; }   /* Menu */  #menu-box { width: 950px; margin: 0 auto; background-color: #4A4A4A; background-image: url(http://www.mantisatemplates.com/template-preview/three-columns/three-columns-orange/img/menu-bg.gif) repeat-x 0 0; margin-bottom: 3px; }  #menu { width: 950px; margin: 0 auto; }  #menu li { display: inline; list-style-type: none; text-align: center; }  #menu li.first a { margin-left: 30px; display: inline }  #menu li a { float: left; color: #4A4A4A; font-weight: bold; display: block; padding: 0 1.4em; line-height: 29px; }  #menu li a:hover { color:  #4A4A4A; font-weight: bold; text-decoration: none; }  #menu li a.active { color: #FFFFFF; background-color: #252525; font-weight: bold; }   /* 3 columns layout */  #contennt { width: 950px; margin: 0 auto; text-align: left; background:  #4A4A4A url('http://www.mantisatemplates.com/template-preview/three-columns/three-columns-orange/img/content-bg.gif') repeat-y 0 0; }  #column-1 { float: right; width: 770px; }  #column-1 #column-11 { float: left; width: 590px; background-color: white;         }  #column-1 #column-12 { float: right; width: 178px; font-size: 0.9em; }  #column-2 { float: left; width: 178px; font-size: 0.9em; }  #column-1, #column-2, #column-12 { padding-bottom: 30px; }  #column-1 #column-12 p, #column-2 p { margin: 0; line-height: 1.4; }  #column-2 h3, #column-1 #column-12 h3 { background: #DB6201 url('http://www.mantisatemplates.com/template-preview/three-columns/three-columns-orange/img/h3-bg.gif') no-repeat 0 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.1em; font-weight: bold; color: #FFFFFF; line-height: 29px; margin: 0; padding: 0; border: 0; text-align: center; width: 100%; }  #column-11 div.contennt { margin: 0.5em 1.3em 0 1em; }  #column-2 div.contennt, #column-12 div.contennt { margin: 0.4em 0.5em 1.2em 0.9em; }  #column-12, #column-2 { background-color: #FFEADD; }   /* Menu in columns */  .menicko { text-align: left; list-style-type: none; margin: 0.6em 0.3em 1.2em 0.3em; }  .menicko li { color: #252525; font-weight: bold; text-decoration: none; margin: 0 0 12px 5px; }  .menicko li a, .menicko li a:visited { color: #252525; font-weight: bold; text-decoration: underline; }  .menicko li a:hover { text-decoration: none; }  .menicko ul { list-style-type: square; list-style-position: inside; }  .menicko ul li { margin: 5px 0 0 0; }  .menicko ul li a, .menicko ul li a:visited { font-weight: normal; }  .menicko ul li a:hover, .menicko ul li a.active { text-decoration: none; background-color: #252525; color: #FFFFFF !important; padding: 0 1px; }   /* Definition list in colum */  dl.news { margin: 0.6em 0.3em 1.2em 0.6em; }  dl.news dt { font-weight: bold; }  dl.news dd { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dotted #202020; }  dl.news dd a, dl.news dd a:visited { font-style: italic; color: #A51F00; }   /* Gallery in midlle column */  #small-gallery { margin: 1.5em 0 3em 0; width: 100%; padding: 1px 0; }  #small-gallery .foto { float: left; display: inline; width: 128px; height: 110px; text-align: center; margin: 0 17px 22px 0; }  #small-gallery .foto img { border: 3px solid silver; }  #small-gallery .foto a:hover img { border: 3px solid #F87500; }  #small-gallery .foto p { margin: 0; }  #small-gallery .foto p a, #small-gallery .foto p a:visited { color: #202020; font-weight: normal; }   /* Table */  table { font-size: 1.1em; border-collapse: collapse; border: 2px solid #202020; margin: 15px 0 20px 0; }  th, td { padding: 3px 13px; border: 1px solid #202020; }  th { text-align: right; font-weight: bold; }  td { text-align: right; }  .first-row { background: #F4FF7C; }  .first-row th { text-align: center; font-weight: bold; border-bottom: 2px solid #202020; }  .first-column { background: #FFD162; border-right: 1px solid #202020; }  .last-column { background-color: #FFD162; border-left: 1px solid #202020; }   /* Footer */  #footer { width: 950px; margin: 0 auto; height: 38px; background: #000000 url('http://www.mantisatemplates.com/template-preview/three-columns/three-columns-orange/img/footer-bg.gif') repeat-x 0 0; clear: both; }  #footer-in { width: 950px; margin: 0 auto; }  p.footer-left { float: left; width: 450px; color: #FFFFFF; text-align: left; margin: 7px 0 0 15px; display: inline; }  p.footer-left a, p.footer-left a:visited { color: #FFFFFF; padding: 1px 2px; }  p.footer-left a:hover { background-color: #FFFFFF; color: #202020; }  p.footer-right { float: right; width: 450px; color: #FFFFFF; text-align: right; margin: 7px 15px 0 0; display: inline; }  p.footer-right a, p.footer-right a:visited { font-size: 0.9em; color: #FFFFFF; padding: 1px 2px; }  p.footer-right a, p.footer-right a:visited  { font-weight: normal; }

CSS Tasarımın Adresi / www.tr-gg-css-king.tr.gg

Turuncu Portakal Teması

Tasarımlar

Diğer Başlıklar