Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj01.11.2008, 10:24 (UTC)    
Mesaj konusu: Bu Kodu Tasarım Altı, Üstü ve Css Bölümü Olarak Nasıl ... ?

Düzenleme : ironarchives
Başlıklarınızı Konunuzu Özetleyecek Şekilde Açınız...


Kod:
<div id="bg1">
   <div id="header">
      <h1><a href="#">WidgetLike<sup>1.0</sup></a></h1>
      <h2>By <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">FreeCSSTemplates</a></h2>
   </div>
   <!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
   <div id="header2">
      <div id="menu">
         <ul>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Friends</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </div>
      <!-- end #menu -->
      <div id="search">
         <form method="get" action="#">
            <fieldset>
            <input type="text" name="q" value="search keywords" id="q" class="text" />
            <input type="submit" value="Search" class="button" />
            </fieldset>
         </form>
      </div>
      <!-- end #search -->
   </div>
   <!-- end #header2 -->
</div>
<!-- end #bg2 -->
<div id="bg3">
   <div id="bg4">
      <div id="bg5">
         <div id="page">
            <div id="content">
               <div class="post">
                  <div class="title">
                     <h2><a href="#">Lorem ipsum dolor</a></h2>
               
                  <div class="meta">
                     <p class="credit">Posted by <a href="#">Someone</a> on October 14, 2008</p>
                     <p class="links"><a href="#" class="comments">Comments (18)</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" class="more">Read more</a></p>
                  </div>
               </div>
               <div class="post">
                  <div class="title">
                     <h2><a href="#">Blandit veroeros</a></h2>
                     <p>10.11.08</p>
                  </div>
                  <div class="entry">
                     <p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris <a href="#">sed elit venenatis</a> porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet veroeros consequat.</p>
                  </div>
                  <div class="meta">
                     <p class="credit">Posted by <a href="#">Someone</a> on October 11, 2008</p>
                     <p class="links"><a href="#" class="comments">Comments (18)</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" class="more">Read more</a></p>
                  </div>
               </div>
            </div>
            <!-- end #content -->
            <div id="sidebar">
               <ul>
                  <li>
                     <h2>Tempus aliquam</h2>
                     <p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet aliquam. <a href="#">Read more&hellip;</a></p>
                  </li>
                  <li>
                     <h2>Ipsum sed interdum</h2>
                     <ul>
                        <li><a href="#">Sed vel quam vestibulum</a></li>
                        <li><a href="#">Pellentesque morbi sit veroeros</a></li>
                        <li><a href="#">Magna interdum donec pede</a></li>
                        <li><a href="#">Nisl gravida iaculis auctor vitae</a></li>
                        <li><a href="#">Bibendum sit amet mauris cras</a></li>
                        <li><a href="#">Adipiscing libero et risus donec</a></li>
                        <li><a href="#">Venenatis porttitor morbi quam</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
            <!-- end #sidebar -->
            <div style="clear: both; height: 40px;">&nbsp;</div>
         </div>
         <!-- end #page -->
      </div>
   </div>
</div>
<!-- end #bg3 -->
<div id="footer">
   <p>(c) 2008 Sitename.com. Design by <a href="http://www.nodethirtythree.com/">nodeThirtyThree</a> + <a href="http://www.freewpthemes.net/">Free CSS Templates</a></p>
</div>
<!-- end #footer -->

<style type="text/css">
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
   margin: 0;
   padding: 0;
}

body {
   margin: 0px;
   background: #002F43 url(http://www.hizliresim.com/2008/11/1/2317.jpg) repeat-x;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #B9B9B9;
}

h1, h2, h3 {
   margin-bottom: 1.5em;
}

h1 {
   font-size: 2em;
}

h2 {
   font-size: 1.4em;
}

h3 {
   font-size: 1em;
}

p, ul, ol {
   margin-bottom: 1.5em;
   line-height: 180%;
}

ul, ol {
   margin-left: 3em;
}

blockquote {
   margin-left: 3em;
   margin-right: 3em;
}

a {
   color: #8AC800;
}

a:hover {
   text-decoration: none;
}

strong {
   color: #D7D7D7;
}

img.left {
   float: left;
   margin: 5px 25px 0px 0px;
}

img.right {
   float: right;
   margin: 5px 0px 0px 25px;
}

/* Background */

#bg1 {
   background: url(http://www.hizliresim.com/2008/11/1/2319.jpg) no-repeat center top;
}

#bg2 {
   background: url(http://www.hizliresim.com/2008/11/1/2323.jpg) no-repeat center top;
}

#bg3 {
   background: url(http://www.hizliresim.com/2008/11/1/2325.jpg) repeat-y center top;
}

#bg4 {
   background: url(http://www.hizliresim.com/2008/11/1/2327.jpg) no-repeat center top;
}

#bg5 {
   background: url(http://www.hizliresim.com/2008/11/1/2329.jpg) no-repeat center bottom;
}

/* Header */

#header {
   width: 900px;
   height: 145px;
   margin: 0px auto;
   text-transform: lowercase;
   color: #FFFFFF;
}

#header h1 {
   float: left;
   margin: 0px;
   padding: 70px 0px 0px 25px;
   font-size: 40px;
}

#header h1 sup {
   font-weight: normal;
}

#header h2 {
   float: right;
   margin: 0px;
   padding: 95px 25px 0px 0px;
   font-size: 14px;
}

#header a {
   text-decoration: none;
   color: #FFFFFF;
}

/* Header2 */

#header2 {
   width: 900px;
   height: 88px;
   margin: 0px auto;
}

/* Menu */

#menu {
   float: left;
}

#menu ul {
   margin: 0px;
   padding: 34px 0px 0px 0px;
   list-style: none;
   text-transform: lowercase;
}

#menu li {
   float: left;
}

#menu a {
   padding-left: 50px;
   text-decoration: none;
   font-size: 16px;
   font-weight: bold;
   color: #FFFFFF;
}

/* Search */

#search {
   float: right;
}

#search form {
   margin: 0px;
   padding: 35px 80px 0px 0px;
}

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

#search input.text {
   width: 160px;
   background: none;
   border: none;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #AEC38B;
}

#search input.button {
   display: none;
}

/* Page */

#page {
   width: 846px;
   margin: 0px auto;
   padding: 40px 0px 0px 0px;
}

/* Content */

#content {
   float: left;
   width: 583px;
}

.post {
}

.post .title {
   height: 49px;
   background: url(http://www.hizliresim.com/2008/11/1/2336.gif) no-repeat;
}

.post .title h2 {
   float: left;
   padding: 12px 0px 0px 24px;
   font-size: 24px;
   text-transform: lowercase;
}

.post .title h2 a {
   text-decoration: none;
   color: #FFFFFF;
}

.post .title h2 a:hover {
   color: #8AC800;
}

.post .title p {
   float: right;
   padding: 12px 24px 0px 0px;
   font-size: 15px;
   font-weight: bold;
   color: #343434;
}

.post .entry {
   padding: 30px 23px 0px 23px;
}

.post .meta {
   height: 70px;
   clear: left;
   margin: 0px 23px;
   padding: 15px 0px 0px 0px;
   border-top: 1px solid #262626;
}

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

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

.post .meta .links .more {
   padding-left: 17px;
   background: url(http://www.hizliresim.com/2008/11/1/2346.gif) no-repeat left center;
}

.post .meta .links .comments {
   padding-left: 19px;
   background: url(http://www.hizliresim.com/2008/11/1/2343.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
   float: right;
   width: 236px;
}

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

#sidebar li {
   background: url(http://www.hizliresim.com/2008/11/1/2339.gif) no-repeat;
   padding: 0px 23px 20px 23px;
}

#sidebar li ul {
}

#sidebar li li {
   padding: 8px 0px;
   background: none;
   border-bottom: 1px solid #262626;
}

#sidebar h2 {
   margin: 0px;
   padding: 16px 0px 30px 0px;
   text-transform: lowercase;
   font-size: 14px;
   color: #FFFFFF;
}

/* Footer */

#footer {
}

#footer p {
   margin: 0px;
   padding: 20px 0px;
   text-align: center;
   text-transform: lowercase;
   color: #566D77;
}

#footer a {
   color: #8097A1;
}
</style>




tasarımın üstüne altına css kodu yardım


En son siir-kitabim tarafından 01.11.2008 21:58:14 tarihinde değiştirildi, toplam 1 kere değiştirildi
Mesaj01.11.2008, 11:15 (UTC)    
Mesaj konusu:

neden kode tusuna başmadana attın
______________

Mesaj01.11.2008, 11:33 (UTC)    
Mesaj konusu:

Kod:
CSS KODUNA:
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
margin: 0;
padding: 0;
}

body {
margin: 0px;
background: #002F43 url(http://www.hizliresim.com/2008/11/1/2317.jpg) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #B9B9B9;
}

h1, h2, h3 {
margin-bottom: 1.5em;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1em;
}

p, ul, ol {
margin-bottom: 1.5em;
line-height: 180%;
}

ul, ol {
margin-left: 3em;
}

blockquote {
margin-left: 3em;
margin-right: 3em;
}

a {
color: #8AC800;
}

a:hover {
text-decoration: none;
}

strong {
color: #D7D7D7;
}

img.left {
float: left;
margin: 5px 25px 0px 0px;
}

img.right {
float: right;
margin: 5px 0px 0px 25px;
}

/* Background */

#bg1 {
background: url(http://www.hizliresim.com/2008/11/1/2319.jpg) no-repeat center top;
}

#bg2 {
background: url(http://www.hizliresim.com/2008/11/1/2323.jpg) no-repeat center top;
}

#bg3 {
background: url(http://www.hizliresim.com/2008/11/1/2325.jpg) repeat-y center top;
}

#bg4 {
background: url(http://www.hizliresim.com/2008/11/1/2327.jpg) no-repeat center top;
}

#bg5 {
background: url(http://www.hizliresim.com/2008/11/1/2329.jpg) no-repeat center bottom;
}

/* Header */

#header {
width: 900px;
height: 145px;
margin: 0px auto;
text-transform: lowercase;
color: #FFFFFF;
}

#header h1 {
float: left;
margin: 0px;
padding: 70px 0px 0px 25px;
font-size: 40px;
}

#header h1 sup {
font-weight: normal;
}

#header h2 {
float: right;
margin: 0px;
padding: 95px 25px 0px 0px;
font-size: 14px;
}

#header a {
text-decoration: none;
color: #FFFFFF;
}

/* Header2 */

#header2 {
width: 900px;
height: 88px;
margin: 0px auto;
}

/* Menu */

#menu {
float: left;
}

#menu ul {
margin: 0px;
padding: 34px 0px 0px 0px;
list-style: none;
text-transform: lowercase;
}

#menu li {
float: left;
}

#menu a {
padding-left: 50px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}

/* Search */

#search {
float: right;
}

#search form {
margin: 0px;
padding: 35px 80px 0px 0px;
}

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

#search input.text {
width: 160px;
background: none;
border: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #AEC38B;
}

#search input.button {
display: none;
}

/* Page */

#page {
width: 846px;
margin: 0px auto;
padding: 40px 0px 0px 0px;
}

/* Content */

#content {
float: left;
width: 583px;
}

.post {
}

.post .title {
height: 49px;
background: url(http://www.hizliresim.com/2008/11/1/2336.gif) no-repeat;
}

.post .title h2 {
float: left;
padding: 12px 0px 0px 24px;
font-size: 24px;
text-transform: lowercase;
}

.post .title h2 a {
text-decoration: none;
color: #FFFFFF;
}

.post .title h2 a:hover {
color: #8AC800;
}

.post .title p {
float: right;
padding: 12px 24px 0px 0px;
font-size: 15px;
font-weight: bold;
color: #343434;
}

.post .entry {
padding: 30px 23px 0px 23px;
}

.post .meta {
height: 70px;
clear: left;
margin: 0px 23px;
padding: 15px 0px 0px 0px;
border-top: 1px solid #262626;
}

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

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

.post .meta .links .more {
padding-left: 17px;
background: url(http://www.hizliresim.com/2008/11/1/2346.gif) no-repeat left center;
}

.post .meta .links .comments {
padding-left: 19px;
background: url(http://www.hizliresim.com/2008/11/1/2343.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
float: right;
width: 236px;
}

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

#sidebar li {
background: url(http://www.hizliresim.com/2008/11/1/2339.gif) no-repeat;
padding: 0px 23px 20px 23px;
}

#sidebar li ul {
}

#sidebar li li {
padding: 8px 0px;
background: none;
border-bottom: 1px solid #262626;
}

#sidebar h2 {
margin: 0px;
padding: 16px 0px 30px 0px;
text-transform: lowercase;
font-size: 14px;
color: #FFFFFF;
}

/* Footer */

#footer {
}

#footer p {
margin: 0px;
padding: 20px 0px;
text-align: center;
text-transform: lowercase;
color: #566D77;
}

#footer a {
color: #8097A1;
}

Kod:
TASARIMIN ÜSTÜNE:
<div id="bg1">
<div id="header">
<h1><a href="#">WidgetLike<sup>1.0</sup></a></h1>
<h2>By <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">FreeCSSTemplates</a></h2>
</div>
<!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
<div id="header2">
<div id="menu">
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="search">
<form method="get" action="#">
<fieldset>
<input type="text" name="q" value="search keywords" id="q" class="text" />
<input type="submit" value="Search" class="button" />
</fieldset>
</form>
</div>

Kod:
TASARIMIN ALTINA:
<!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
<div id="header2">
<div id="menu">
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="search">
<form method="get" action="#">
<fieldset>
<input type="text" name="q" value="search keywords" id="q" class="text" />
<input type="submit" value="Search" class="button" />
</fieldset>
</form>
</div>
<!-- end #search -->
</div>
<!-- end #header2 -->
</div>
<!-- end #bg2 -->
<div id="bg3">
<div id="bg4">
<div id="bg5">
<div id="page">
<div id="content">
<div class="post">
<div class="title">
<h2><a href="#">Lorem ipsum dolor</a></h2>

<div class="meta">
<p class="credit">Posted by <a href="#">Someone</a> on October 14, 2008</p>
<p class="links"><a href="#" class="comments">Comments (1</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" class="more">Read more</a></p>
</div>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Blandit veroeros</a></h2>
<p>10.11.08</p>
</div>
<div class="entry">
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris <a href="#">sed elit venenatis</a> porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet veroeros consequat.</p>
</div>
<div class="meta">
<p class="credit">Posted by <a href="#">Someone</a> on October 11, 2008</p>
<p class="links"><a href="#" class="comments">Comments (1</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" class="more">Read more</a></p>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>Tempus aliquam</h2>
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet aliquam. <a href="#">Read more&hellip;</a></p>
</li>
<li>
<h2>Ipsum sed interdum</h2>
<ul>
<li><a href="#">Sed vel quam vestibulum</a></li>
<li><a href="#">Pellentesque morbi sit veroeros</a></li>
<li><a href="#">Magna interdum donec pede</a></li>
<li><a href="#">Nisl gravida iaculis auctor vitae</a></li>
<li><a href="#">Bibendum sit amet mauris cras</a></li>
<li><a href="#">Adipiscing libero et risus donec</a></li>
<li><a href="#">Venenatis porttitor morbi quam</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 40px;">&nbsp;</div>
</div>
<!-- end #page -->
</div>
</div>
</div>
<!-- end #bg3 -->
<div id="footer">
<p>(c) 2008 Sitename.com. Design by <a href="http://www.nodethirtythree.com/">nodeThirtyThree</a> + <a href="http://www.freewpthemes.net/">Free CSS Templates</a></p>
</div>
<!-- end #footer -->

Benden bu kadar eksikleri olabilir onlarıda sen düzeltirsin...
______________

Önceki mesajları göster:   


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