Forum'da ara:
Ara


Yazar Mesaj
Mesaj25.12.2011, 21:11 (UTC)    
Mesaj konusu: TNCforum || Graffiti Tasarımı || Css || Hazır ||
Alıntıyla Cevap Gönder
Tasarım Adı : Graffiti
Tasarımın Yüklenme Tarihi : 25 Aralık 2011
Tasarımı Yükleyen : TNCforum

Tasarım Örneği : http://kodkullan.tr.gg/

Emeğe saygı ... ( Tasarım alıntıdır fakat kendi ellerimle düzenledim ve hazır hale getirdim .. )

Tasarım şu şekilde verilecektir:

Tasarımın üstü
Tasarımın altı
Css kodu
İçerik Konu Kodu



T. Üstü
Kod:
</style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--

Name       : Graffiti

Description: A two-column, fixed-width design with dark color scheme.

Version    : 1.0

Released   : 20111223



-->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Graffitiby</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<link href="http://fonts.googleapis.com/css?family=Ruthie" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

   <div id="wrapper-bgtop">

      <div id="wrapper-bgbtm">

         <div id="header" class="container">

            <div id="logo">

               <h1><a href="#">Site Adınız</a></h1>

               <p>Template Design By <a href="http://tncforum.tr.gg">TNCforum</a></p>

            </div>

            <div id="menu">

               <ul>

                  <li class="current_page_item"><a href="#">Ana sayfa</a></li>

                  <li><a href="#">iletİŞİM</a></li>

                  <li><a href="#">HAKKIMDA</a></li>

                  <li><a href="#">GALERİ</a></li>

                  <li><a href="#">FORUM</a></li>

               </ul>

            </div>

         </div>

         <!-- end #header -->

         <div id="page" class="container">

            <div id="content">
              <div class="post">

                  <div class="post-bgtop">




T.altı
Kod:

                  </div>

              </div>

           </div>

            <!-- end #content -->

            <div id="sidebar">

               <ul>

                  <li>

                     <div id="search" >

                        <form method="get" action="#">

                           <div>

                              <input type="text" name="s" id="search-text" value="" />

                              <input type="submit" id="search-submit" value="GO" />
                           </div>
                        </form>
                     </div>

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

                  <li>

                     <h2>hakkımda</h2>

                     <p>Bu tasarımın üzerinde TNCforum.tr.gg tarafından oynama yapılmıştır.</p>
                  </li>

                  <li>

                     <h2>kategori</h2>

                     <ul>

                        <li><a href="#">oyun</a></li>

                        <li><a href="#">film</a></li>

                        <li><a href="#">program</a></li>

                        <li><a href="#">fragman</a></li>

                        <li><a href="#">css</a></li>

                        <li><a href="#">html</a></li>
                     </ul>
                  </li>

                  <li>

                     <h2>son paylaşımlar</h2>

                     <ul>

                        <li><a href="#">sON YAPLAŞIM ADI</a></li>

                        <li><a href="#">sON YAPLAŞIM ADI</a></li>
                        <li></li>

                        <li><a href="#">sON YAPLAŞIM ADI</a></li>
                        <li><a href="#"></a></li>

                        <li><a href="#">sON YAPLAŞIM ADI</a></li>
                        <li><a href="#"></a></li>

                        <li><a href="#">sON YAPLAŞIM ADI</a></li>
                        <li><a href="#"></a></li>

                        <li><a href="#">sON YAPLAŞIM ADI</a></li>
                        <li><a href="#"></a></li>
                     </ul>
                  </li>

                  <li>

                     <h2>arşiv</h2>

                     <ul><li>ARALIK 2011</li>

                        <li>ARALIK 2011</li>

                        <li><a href="#">ARALIK 2011</a></li>

                        <li><a href="#">ARALIK 2011</a></li>

                        <li><a href="#">ARALIK 2011</a></li>

                        <li><a href="#">ARALIK 2011</a></li>
                     </ul>
                  </li>

                  <li>

                     <h2>Link takas</h2>

                     <ul>

                        <li><a href="#">link takas</a></li>

                        <li><a href="#">link takas</a></li>

                        <li><a href="#">link takas</a></li>

                        <li><a href="#">link takas</a></li>

                        <li><a href="#">link takas</a></li>
                     </ul>
                  </li>
               </ul>

           </div>

            <!-- end #sidebar -->

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

         </div>

         <!-- end #page -->

      </div>

   </div>

</div>

<div id="footer">

   <p>Copyright (c) 2011 Siteadın.tr.gg Tüm hakları saklıdır .Design by<a href="http://tncforum.tr.gg"> TNCforum</a></p>

</div>

<!-- end #footer -->

</body>

</html>




Css
Kod:
/*Menü Gizleme Kodu*/
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

<style type="text/css">
<!--
body {
   margin: 0;
   padding: 0;
   background: #100A0E;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #292929;
}

h1, h2, h3 {
   margin: 0;
   padding: 0;
   font-family: 'Ruthie', cursive;
   font-weight: normal;
   color: #FFFFFF;
}

h1 {
   font-size: 2em;
}

h2 {
   font-size: 2.8em;
}

h3 {
   font-size: 1.6em;
}

p, ul, ol {
   margin-top: 0;
   line-height: 240%;
}

ul, ol {
}

a {
   text-decoration: none;
   color: #27A5D5;
}

a:hover {
}

#wrapper {
   background: url(http://a1112.hizliresim.com/s/t/1cdru.jpg) repeat-y center top;
}

#wrapper-bgtop {
   background: url(http://a1112.hizliresim.com/s/t/1cds2.jpg) no-repeat center top;
}

#wrapper-bgbtm {
   overflow: hidden;
   background: url(http://a1112.hizliresim.com/s/t/1cds9.jpg) no-repeat center bottom;
}

.container {
   width: 940px;
   margin: 0px auto;
}

/* Header */

#header {
   margin: 0 auto;
   padding: 0px 30px;
}

/* Logo */

#logo {
   float: left;
   width: 350px;
   margin: 0;
   padding: 0;
   color: #204359;
}

#logo h1, #logo p {
}

#logo h1 {
   margin: 0px;
   padding: 70px 0px 0px 0px;
   letter-spacing: -1px;
   text-transform: lowercase;
   font-size: 95px;
}

#logo h1 a {
   font-weight: bold;
   color: #204359;
}

#logo p {
   margin-top: -30px;
   padding: 0px;
   letter-spacing: 1px;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #204359;
}

#logo p a {
   color: #204359;
}

#logo a {
   border: none;
   background: none;
   text-decoration: none;
   color: #000000;
}

/* Splash */

#splash {
   width: 960px;
   height: 300px;
   margin: 0px auto;
}

/* Search */

#search {
   float: right;
   width: 280px;
   height: 60px;
   padding: 20px 0px 0px 0px;
}

#search form {
   height: 41px;
   margin: 0;
   padding: 10px 0 0 0px;
}

#search fieldset {
   margin: 0;
   padding: 0;
   border: none;
}

#search-text {
   width: 165px;
   height: 17px;
   margin-right: 5px;
   padding: 6px 5px 3px 5px;
   border: 1px solid #A8A8A8;
   background: #FFFFFF;
   text-transform: lowercase;
   font: normal 11px Arial, Helvetica, sans-serif;
}

#search-submit {
   width: 51px;
   height: 26px;
   border: none;
   background: url(http://b1112.hizliresim.com/s/t/1cdsk.jpg) no-repeat left top;
   color: #FFFFFF;
}

/* Menu */

#menu {
   float: right;
   width: 500px;
   height: 90px;
   margin: 0 auto;
   padding: 0;
}

#menu ul {
   float: right;
   margin: 0;
   padding: 130px 0px 0px 0px;
   list-style: none;
   line-height: normal;
}

#menu li {
   float: left;
}

#menu a {
   display: block;
   height: 20px;
   margin-right: 1px;
   padding: 0px 20px 15px 20px;
   text-decoration: none;
   text-align: center;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   font-weight: bold;
   color: #FFFFFF;
   border: none;
}

#menu a:hover, #menu .current_page_item a {
   text-decoration: none;
   color: #204359;
}

#menu .current_page_item a {
}

/* Page */

#page {
}

/* Content */

#content {
   float: left;
   width: 620px;
   padding: 30px 0px 0px 0px;
}

.post {
   overflow: hidden;
   margin-bottom: 20px;
   background: url(http://b1112.hizliresim.com/s/t/1cdsx.jpg) repeat-y left top;
}

.post-bgtop {
   background: url(http://b1112.hizliresim.com/s/t/1cdt9.jpg) no-repeat left top;
}

.post-bgbtm {
   overflow: hidden;
   background: url(http://a1112.hizliresim.com/s/t/1cdtj.jpg) no-repeat left bottom;
   padding: 30px 40px 30px 40px;
}

.post .title {
   margin: 0px;
   padding: 15px 0px 20px 0px;
   letter-spacing: -1px;
}

.post .title a {
   border: none;
   letter-spacing: 1px;
   text-align: left;
   text-transform: lowercase;
   font-size: 50px;
   font-weight: bold;
   color: #204359;
}

.post .meta {
   margin-bottom: 30px;
   padding: 0px;
   letter-spacing: 1px;
   text-align: left;
   text-transform: uppercase;
   font-size: 11px;
   font-weight: normal;
}

.post .meta .date {
   float: left;
}

.post .meta .posted {
   float: right;
}

.post .meta a {
}

.post .entry {
   padding: 0px 0px 30px 0px;
   padding-bottom: 20px;
   text-align: justify;
}

.links {
   float: right;
   margin: 20px 0px 30px 0px;
   text-align: right;
   text-transform: uppercase;
   font-size: 12px;
   font-weight: normal;
}

.more {
   display: block;
   float: left;
   padding: 0px 0px 0px 0px;
   margin-right: 30px;
}

.comments {
   display: block;
   float: left;
   padding: 0px 0px 0px 0px;
}

/* Sidebar */

#sidebar {
   float: right;
   width: 310px;
   margin: 0px;
   padding: 30px 0px 0px 0px;
}

#sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

#sidebar li {
   margin: 0;
   padding: 0;
}

#sidebar li ul {
   margin: 0px 0px;
   padding-bottom: 50px;
}

#sidebar li li {
   line-height: 35px;
   border-bottom: 1px dashed #A8A8A8;
   margin: 0px 30px;
   font-size: 12px;
   font-weight: normal;
}

#sidebar li li span {
   display: block;
   margin-top: -20px;
   padding: 0;
   font-size: 11px;
   font-style: italic;
}

#sidebar li li a {
   padding: 0px 0px 0px 0px;
   color: #292929;
}

#sidebar h2 {
   margin: 0px;
   padding: 0px 0px 30px 0px;
   padding-left: 30px;
   letter-spacing: 1px;
   text-align: left;
   text-transform: lowercase;
   font-size: 40px;
   font-weight: bold;
   color: #204359;
}

#sidebar p {
   margin: 0 0px;
   padding: 0px 30px 20px 30px;
   text-align: justify;
}

#sidebar a {
   border: none;
}

#sidebar a:hover {
   text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
   padding: 20px;
}

#calendar table {
   width: 100%;
}

#calendar tbody td {
   text-align: center;
}

#calendar #next {
   text-align: right;
}

/* Footer */

#footer {
   height: 200px;
   margin: 0 auto;
   background: url(http://a1112.hizliresim.com/s/t/1cdtv.jpg) no-repeat center top;
   font-family: Arial, Helvetica, sans-serif;
}

#footer p {
   margin: 0;
   padding-top: 60px;
   line-height: normal;
   text-align: center;
   text-decoration: none;
   text-align: center;
   font-size: 12px;
   font-weight: normal;
   color: #2D2129;
}

#footer a {
   color: #2D2129;
}



Konu İçerik Kodu ( Siteye uygun )
Kod:
<div class="post-bgbtm">
<h2 class="title"><a href="#">Konu Başlık </a></h2>
<p class="meta"><span class="date">Aralık 25, 2011</span><span class="posted">Posted by <a href="#">TNCforum</a></span></p>
<div class="entry">
<p>Bu tasarım TNCforum.tr.gg tarafından d&uuml;zenlenmiştir....</p>
<p class="links"><a href="#" class="more">Devamını Oku ...</a></p>
</div>
</div>



Bir teşekkür yeter
↑
Önceki mesajları göster:   
  • 1. sayfa (Toplam 1 sayfa)

  •  
    • Geçiş Yap:  


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

© 2024 webme GmbH, Almanya, Tüm hakları saklıdır.