Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj03.10.2010, 11:33 (UTC)    
Mesaj konusu: Sade Ama Güzel Tasarım

Ekran Görüntüsü ;


TASARIM ÜSTÜ;

Kod:
<div id="main" class="box">      <!-- Header -->     <div id="header">          <!-- Logotyp -->         <h3 id="logo"><a href="./" _fcksavedurl="./" title="CrystalX [Go to homepage]">Crystal<strong>X</strong><span></span></a></h3>         <hr class="noscreen" />                    <!-- Quick links -->         <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>             <hr />         </div>          <!-- Search -->         <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> <!-- /search -->      </div> <!-- /header -->       <!-- Main menu (tabs) -->      <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> <!-- Active -->                 <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>          <hr class="noscreen" />      </div> <!-- /tabs -->      <!-- Page (2 columns) -->     <div id="page" class="box">     <div id="page-in" class="box">          <div id="strip" class="box noprint">              <!-- RSS feeds -->             <p id="rss"><strong>RSS:</strong> <a href="#" _fcksavedurl="#">articles</a> / <a href="#" _fcksavedurl="#">comments</a></p>             <hr class="noscreen" />              <!-- Breadcrumbs -->             <p id="breadcrumbs">You are here: <a href="#" _fcksavedurl="#">Home</a> > <a href="#" _fcksavedurl="#">Category</a> >  <strong>Page</strong></p>             <hr class="noscreen" />                      </div> <!-- /strip -->                   <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 Altı;

Kod:
</p></div>              <hr class="noscreen" />                            </div> <!-- /content -->          <!-- Right column -->         <div id="col" class="noprint">             <div id="col-in">                  <!-- About Me -->                 <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> <!-- /about-me -->                  <hr class="noscreen" />                  <!-- Category -->                 <h5 ><span>Category</span></h5>                  <ul id="category">                     <li id="category-active"><a href="#" _fcksavedurl="#">Selected category</a></li> <!-- Active -->                     <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>                  <hr class="noscreen" />                  <!-- Archive -->                 <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> <!-- Active -->                     <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>                  <hr class="noscreen" />                  <!-- Links -->                 <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>                  <hr class="noscreen" />                          </div> <!-- /col-in -->         </div> <!-- /col -->      </div> <!-- /page-in -->     </div> <!-- /page -->      <!-- Footer -->     <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>         <hr class="noscreen" />          <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->                 <p id="createdby"><a href="http://www.nuviotemplates.com/" _fcksavedurl="http://www.nuviotemplates.com/">Free web templates</a></p>         <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->                  <p id="copyright">© 2007 <a href="mailto:my( at )mail.com" _fcksavedurl="mailto:my( at )mail.com">My Name</a></p>     </div> <!-- /footer -->  </div>


Css Kutusuna;

Kod:
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;}


Not: Tasarımın İçine İframe Kodu Eklemeyiniz tasarım bozulur . Tr.gG sitelerinde iframe kodu zaten yasak.
Mesaj03.10.2010, 11:35 (UTC)    
Mesaj konusu:

Paylaşım için teşekkür güelde bi tasarım ama kod paylaşımları sabit başlık altında dostum Wink
Mesaj03.10.2010, 12:45 (UTC)    
Mesaj konusu:

sitereklammerkezi yazmış:
Paylaşım için teşekkür güelde bi tasarım ama kod paylaşımları sabit başlık altında dostum Wink

tamam Smile
Mesaj03.10.2010, 13:08 (UTC)    
Mesaj konusu:

kodunhazir yazmış:
sitereklammerkezi yazmış:
Paylaşım için teşekkür güelde bi tasarım ama kod paylaşımları sabit başlık altında dostum Wink

tamam Smile


Kodlar bu başlık altında paylaşılmalı diye bi kısım var bu kodları orada paylaş ilgilenen arkadaşlar olur belki yardımcı olmuş olursun Wink

Anlayışın için tşkrler bu arada Smile
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu