Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj05.04.2009, 12:07 (UTC)    
Mesaj konusu: Tasarım Kodu Ayırma.. [YARDIM]

Arkadaşlar aşağıdaki 3 kodu ayırabilecek olan var mı.. Ya da bu konuda bana yardımcı olacak biri var mı.. Şimdiden teşekkürler..

1.Kod
Style
Kod:
html, body, h1, h2, h3, h4 {
   margin: 0;
   padding: 0;
}
h1 img {
   display: block;
}
img {
   border: 0;
}
a {
   color: #990000;
   font-weight: bold;
   text-decoration: none;
}
a:hover {
   color: #FFA405;
   text-decoration: underline;
}
.left {
   float: left;
}
.right {
   float: right;
}
.more {
   text-align: right;
}
.clear {
   clear: both;
}

body {
  background: #000;
   text-align: center;
   font: 11px arial, sans-serif;
   color: #312F1A;
}

/** layout **/
#wrapper {
   text-align: left;
   margin: 20px auto;
   width: 714px;
  position: relative;
}

#header {
  background: top center url(images/logo.jpg) no-repeat;
  padding-top: 51px;
  width: 252px;
  position: relative;
}

/** Header **/
h1 {
  color: #FDE7C2;
  background: #991111;
  border: 2px solid #C4B888;
  padding: 8px;
  text-align: center;
  font: 25px "Times new roman", sans-serif;
  font-style: italic;
  font-weight: normal;
  margin: 0 0 2px 21px;
}

#search {
  width: 148px;
  background: #E8E7DA url(images/search_top.jpg) no-repeat;
  text-align: center;
  position: absolute;
  bottom: -1px;
  left: 558px;
  padding: 6px 0;
}
#search .text {
  width: 63px;
}

/** Body **/
#body {
  position: relative;
  width: 100%;
}

#nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 252px;
  padding-top: 292px;
  background: url(images/pic_1.jpg) no-repeat;
}
#nav ul {
  background: bottom right #991111 url(images/nav_bot.jpg) no-repeat;
  margin: 0 7px 0 28px;
  padding: 5px 20px 15px 20px;
}
#nav li {
  list-style: none;
  background: bottom left url(images/dots.jpg) repeat-x;
}
#nav a {
  color: #FDE7C2;
  font: 18px "times new roman", serif;
  font-style: italic;
  background: #991111;
  padding-right: 8px;
}

/** content **/

#content {
  background: #E8E7DA bottom right url(images/body_bottom_right.jpg) no-repeat;
  width: 462px;
  margin-left: 254px;
  min-height: 278px;
}

#content .main, #content .main2 {
  float: right;
  width: 250px;
  margin-top: 14px;
  padding-right: 28px;
}

#content .main {
  padding-bottom: 1em;
  border-bottom: 1px solid #D6D3BA;
}

#content .main p, #content .main2 p {
  margin: 0em 1em 0 0;
}
#content .main2 .right {
  margin-left: 18px;
}
#content .main .clear, #content .main2 .clear {
  height: 20px;
  margin-bottom: -10px;
}

#beauty {
  float: right;
  width: 134px;
  border-left: 1px solid #D6D3BA;
  padding: 12px;
  background: top right url(images/bogy_top_right.jpg) no-repeat;
}
#beauty span {
  float: left;
  width: 12px;
  font-size: 9px;
  clear: both;
  margin-top: 3px;
}
#beauty p {
  float: left;
  width: 110px;
  margin: 0 0 0.6em 0;
  padding: 0 0 0 1em;
  line-height: 1.3;
}
#beauty .clear {
  height: 10px;
}

h2 {
  font: italic 22px "Times new roman", serif;
  color: #991111;
  margin: 0 0 0.5em 0;
}

/** Footer **/

#footer {
  color: #E8E7DA;
  margin: 2px 0 0 275px;
}

#privacy {
  position: absolute;
  right: 8px;
  width: 148px;
  padding: 4px 0;
  text-align: center;
  background: #E8E7DA bottom left url(images/footer_tab.jpg) no-repeat;
}
#privacy a {
  color: #000;
  font-weight: normal;
}


İndex
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Beauty Salon template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1>Beauty Salon</h1>
    <div id="search"> search
      <input type="text" name="q" value="" class="text" />
      <input type="submit" name="s" value="go" />
    </div>
  </div>
  <div id="body">
    <div id="nav">
      <div id="nav-bot">
        <ul>
          <li><a href="http://www.free-css.com/">home</a></li>
          <li><a href="http://www.free-css.com/">about us</a></li>
          <li><a href="http://www.free-css.com/">services</a></li>
          <li><a href="http://www.free-css.com/">portfolio</a></li>
          <li><a href="http://www.free-css.com/">contact us</a></li>
        </ul>
      </div>
    </div>
    <div id="content">
      <div id="beauty">
        <h2>Beauty Tips</h2>
        <span>01</span>
        <p>Professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
        <span>02</span>
        <p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
        <div class="clear"> </div>
        <img src="images/pic_4.jpg" width="123" height="53" alt="Pic 4" /> </div>
      <div class="main">
        <h2>Welcome to our site</h2>
        <p>Don't forget to check <a href="http://www.free-css.com/">free website templates</a> every day, because we add a new free website template almost daily.</p>
      </div>
      <div class="main2">
        <h2>News &amp; Events</h2>
        <img src="images/pic_2.jpg" width="82" height="53" alt="Pic 2" class="right" />
        <p>You can remove any link to our websites from this template you're free to use the template without linking back to us..</p>
        <div class="clear"></div>
        <img src="images/pic_3.jpg" width="82" height="53" alt="Pic 3" class="right" />
        <p>If you're having problems editing the template ask for help on <a href="http://www.free-css.com/">the forum</a>.</p>
      </div>
      <div class="clear"> </div>
    </div>
  </div>
  <div id="privacy"> <a href="http://www.free-css.com/">Privacy Policy</a> </div>
  <div id="footer"> Copyright statement goes here. All rights reserved<br />designed by <a href="http://www.freewebsitetemplates.com">free website templates</a></div>
</div>
</body>
</html>



2.Kod

Style
Kod:
html, body, h1, h2, h3, h4, ul, li {
   margin: 0;
   padding: 0;
}
h1 img {
   display: block;
}
img {
   border: 0;
}
a {
   color: #FFFFFF;
}
a:hover {
   color: #FFA405;
}
.left {
   float: left;
}
.right {
   float: right;
}
.more {
   text-align: right;
}
.clear {
   clear: both;
}

body {
   background: #3A0404 url(images/page_bg.jpg) repeat-x;
   font: 11px arial, sans-serif;
   color: #464544;
   padding-bottom: 10px;
}

/** layout **/
#wrapper {
   width: 678px;
   min-height: 750px;
   _height: 750px;
   background: url(images/header.jpg) no-repeat;
  position: relative;
}

h1 {
  padding: 25px 0 0 30px;
  font: 32px "arial black", arial, sans-serif;
  color: #151515;
}

h1 em {
  color: #ffffff;
  font-weight: bold;
  font-style: normal;
  position: relative;
  top: -4px;
}

/* nav */

#nav {
  position: absolute;
  top: 0px;
  left: 335px;
  width: 500px;
}
#nav li {
  float: left;
  background: url(images/nav_left.gif) no-repeat;
  list-style: none;
  padding-left: 10px;
  padding-right: 20px;
  padding-top: 45px;
  line-height: 1.1;
}
#nav span {
  display: block;
  font-size: 28px;
}
#nav a {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}

/** topcontent **/

#topcon {
  background: url(images/topcon.jpg) no-repeat;
  width: 427px;
  position: absolute;
  top: 105px;
  left: 338px;
  color: #fff;
}
#topcon-inner {
  margin: 33px 40px 41px 85px;
  height: 120px;
  overflow: auto;
}
#topcon h2 {
  font-size: 14px;
}

/** Body **/

#content {
  width: 710px;
  position: absolute;
  color: #fff;
  top: 299px;
  left: 33px;
}
#content a {
  color: #fff;
}
#content a:hover {
  color: #fee;
}
#body {
  border: 3px solid white;
  background: #901315;
  padding: 18px;
}

.box {
  float: left;
  width: 195px;
  background: #730F11;
  margin-right: 18px;
}
.box-t { background: top url(images/box_t.gif) repeat-x; }
.box-r { background: right url(images/box_r.gif) repeat-y; }
.box-b { background: bottom url(images/box_b.gif) repeat-x; }
.box-l { background: left url(images/box_l.gif) repeat-y; }
.box-tr { background: top right url(images/box_tr.gif) no-repeat; }
.box-br { background: bottom right url(images/box_br.gif) no-repeat; }
.box-bl { background: bottom left url(images/box_bl.gif) no-repeat; }
.box-tl { background: top left url(images/box_tl.gif) no-repeat; }

.box-tl {
  padding: 13px 18px;
}

.box p {
  margin: 1em 0;
}

p.more {
  margin: 0;
}

#hits {
  width: 240px;
}
#hits .box-tl {
  padding-bottom: 22px;
}
#hits ul {
  margin: 1em 0;
}
#hits li {
  list-style: none;
  margin: 0.9em 0;
}
#hits ul a {
  text-decoration: none;
}
#hits ul a:hover {
  text-decoration: underline;
}

#new {
  margin-right: 0;
}
#new .box-tl {
  padding-bottom: 18px;
}
#new p {
  margin-top: 0;
  margin-bottom: 3.6em;
}

#body h2 {
  font-size: 12px;
  text-align: right;
  margin-bottom: 1.5em;
}
#body h3 {
  font-size: 9px;
  color: #FFEA00;
}
#body .more a {
  font-weight: bold;
  text-decoration: none;
}
#body .more a:hover {
  text-decoration: underline;
}
#body .hr-yellow {
  border-top: 1px solid #FFEA00;
  padding-bottom: 1em;
  margin-top: 1em;
}

/** footer **/
#footer {
  text-align: center;
}
#footer p, #footer ul {
  margin: 0.8em;
}
#footer ul {
  margin-top: 1.2em;
}
#footer li {
  display: inline;
  list-style: none;
}



İndex
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Music Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="wrapper">
  <h1><em>MUSIC</em> SHOP</h1>
  <div id="nav">
    <ul>
      <li><a href="http://www.free-css.com/"><span>01</span> ABOUT SHOP</a></li>
      <li><a href="http://www.free-css.com/"><span>02</span> GALLERY</a></li>
      <li><a href="http://www.free-css.com/"><span>03</span> FREE MUSIC</a></li>
      <li><a href="http://www.free-css.com/"><span>04</span> ARTIST</a></li>
      <li><a href="http://www.free-css.com/"><span>05</span> CONTACTS</a></li>
    </ul>
  </div>
  <div id="topcon">
    <div id="topcon-inner">
      <h2>Welcome to Music Shop</h2>
      <p>Don't forget to check <a href="http://www.free-css.com/">free website templates</a> every day, because we add a new free website template almost daily.</p>
      <p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
    </div>
  </div>
  <div id="content">
    <div id="body">
      <div class="box" id="news">
        <div class="box-t">
          <div class="box-r">
            <div class="box-b">
              <div class="box-l">
                <div class="box-tr">
                  <div class="box-br">
                    <div class="box-bl">
                      <div class="box-tl">
                        <h2>NEWS &amp; EVENTS</h2>
                        <h3>05.03.2007</h3>
                        <p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
                        <p class="more"><a href="http://www.free-css.com/">more...</a></p>
                        <div class="hr-yellow"> </div>
                        <h3>05.03.2007</h3>
                        <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                        <p>If you're having problems editing the template please don't hesitate to ask for help on <a href="http://www.free-css.com/">the forum</a>.</p>
                        <p class="more"><a href="http://www.free-css.com/">more...</a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box" id="hits">
        <div class="box-t">
          <div class="box-r">
            <div class="box-b">
              <div class="box-l">
                <div class="box-tr">
                  <div class="box-br">
                    <div class="box-bl">
                      <div class="box-tl">
                        <h2>HIT'S LIST</h2>
                        <h3>movie hits</h3>
                        <img src="images/pic_1.jpg" width="63" height="91" alt="Pic 1" class="right" />
                        <ul>
                          <li><a href="http://www.free-css.com/">Lorem ipsum dolor s........</a></li>
                          <li><a href="http://www.free-css.com/">Vivamus lobortis p........ </a></li>
                          <li><a href="http://www.free-css.com/">Sit amet, consectetu.......</a></li>
                          <li><a href="http://www.free-css.com/">Lorem ipsum dolor s........</a></li>
                          <li><a href="http://www.free-css.com/">Vivamus lobortis p........ </a></li>
                        </ul>
                        <div class="hr-yellow"> </div>
                        <h3>album hist</h3>
                        <img src="images/pic_2.jpg" width="63" height="81" alt="Pic 2" class="right" />
                        <ul>
                          <li><a href="http://www.free-css.com/">Vivamus lobortis p........ </a></li>
                          <li><a href="http://www.free-css.com/">Lorem ipsum dolor s........</a></li>
                          <li><a href="http://www.free-css.com/">Vivamus lobortis p........ </a></li>
                          <li><a href="http://www.free-css.com/">Sit amet, consectetu.......</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box" id="new">
        <div class="box-t">
          <div class="box-r">
            <div class="box-b">
              <div class="box-l">
                <div class="box-tr">
                  <div class="box-br">
                    <div class="box-bl">
                      <div class="box-tl">
                        <h2>NEW RELEASES</h2>
                        <h3>eestas sed</h3>
                        <img src="images/pic_3.jpg" width="66" height="52" alt="Pic 3" class="right" />
                        <p>porta vel, nulla. Maecenas condi- mentum sollicitu</p>
                        <h3>Maecenas</h3>
                        <img src="images/pic_4.jpg" width="66" height="52" alt="Pic 4" class="right" />
                        <p>ndimentum sollicitudin quam. Sed convallis</p>
                        <h3>sollicitudin</h3>
                        <img src="images/pic_5.jpg" width="66" height="52" alt="Pic 5" class="right" />
                        <p>quam. Sed nvallis lacus .vallislacus arcu.vallis</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"> </div>
    </div>
    <div id="footer">
      <ul>
        <li><a href="http://www.free-css.com/">PICTURE</a> | </li>
        <li><a href="http://www.free-css.com/">GALLERY</a> | </li>
        <li><a href="http://www.free-css.com/">FREE MUSIC</a> | </li>
        <li><a href="http://www.free-css.com/">FEATURES</a> | </li>
        <li><a href="http://www.free-css.com/">CONTACTS</a> | </li>
      </ul>
      <p>&copy; Business Co <a href="http://www.free-css.com/">Privacy Policy</a> | designed by <a href="http://www.freewebsitetemplates.com">free website templates</a>.</p>
    </div>
  </div>
</div>
</body>
</html>



3.Kod

Style
Kod:
/* CSS Document */
body{background:url(images/main-bg.gif) 0 0 repeat-x #A8A39D; color:#1A1917; margin:84px 0 0; padding:0; font:14px/20px Arial, Helvetica, sans-serif;}
div, p, h1, h2, h3, ul{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*--TOP PANEL--*/
#topPan{width:464px; height:398px; position:relative; margin:0 auto;}
#topPan ul {width:464px;}
#topPan ul li{float:left; font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase;}
#topPan ul li a{width:92px; height:30px; display:block; background:url(images/menubg-normal.gif) 0 0 no-repeat #66605B; color:#FDFDFD;  text-decoration:none; text-align:center;}
#topPan ul li a:hover{background:url(images/menubg-hover.gif) 0 0 no-repeat #66605B; color:#1A1917;}
#topPan ul li.menupadding{margin:0 0 0 1px;}
#topPan ul li.home{width:92px; height:30px; display:block; background:url(images/menubg-hover.gif) 0 0 no-repeat #FDFDFD; color:#1A1917; text-align:center;}

#topPan h1{display:block; width:464px; height:198px; background:url(images/header.jpg) 0 0 no-repeat; text-indent:-2000px; margin:0; clear:both;}

#toplinkPan{width:464px; height:159px; position:relative; margin:0 auto;}
#toplinkfastPan{width:148px; height:140px; float:left; background:url(images/blog-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 0 0; color:#fff;}
#toplinkfastPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinkfastPan a:hover{text-decoration:none; background:url(images/blog-hover.jpg) 0 0 no-repeat;}
#toplinkfastPan p{display:block; width:90px; height:15px; position:absolute; top:0px; left:0px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px;}

#toplinksecondPan{width:148px; height:140px; float:left; background:url(images/chat-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 10px 0; color:#fff;}
#toplinksecondPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinksecondPan a:hover{text-decoration:none; background:url(images/chat-hover.jpg) 0 0 no-repeat;}
#toplinksecondPan p{display:block; width:90px; height:15px; position:absolute; top:0px; left:157px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px; }

#toplinkthirdPan{width:148px; height:140px; float:left; background:url(images/tools-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 0 0; color:#fff;}
#toplinkthirdPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinkthirdPan a:hover{text-decoration:none; background:url(images/tools-hover.jpg) 0 0 no-repeat;}
#toplinkthirdPan p{display:block; width:90px; height:15px; position:absolute; top:0px; right:34px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px; }


/*--/TOP PANEL--*/
/*--BODY PANEL--*/
#bodyPan{width:352px; background:url(images/bodytopbg.jpg) 0 0 no-repeat #fff; color:#1A1917; position:relative; margin:0 auto; padding:0 56px;}
#bodyPan h1{width:352px; height:32px; display:block; background:url(images/welcomebg.gif) 0 100% repeat-x; font:28px/26px Georgia, "Times New Roman", Times, serif; padding:42px 0 0;}
#bodyPan h1 span{background:#F9F9F9; color:#9A0000; font-size:26px;}
#bodyPan h2{width:350px; height:32px; display:block; background:url(images/dotline.gif) 0 100% repeat-x #fff; font:28px/26px Georgia, "Times New Roman", Times, serif; padding:42px 0 0; color:#9A0000;}

#bodyPan p{padding:18px 0 0 0;}
#bodyPan p.bigtext{background:#fff; font-size:18px; color:#B3A7A0; font-weight:bold; padding:18px 0 0;}
#bodyPan p.more{width:89px; height:39px;}
#bodyPan p.more a{display:block; width:89px; height:39px; background:url(images/more1.jpg) 0 0 no-repeat #FBFBFB; color:#fff;  font:14px/36px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; margin:0 0 0 262px; text-align:center;}
#bodyPan p.more a:hover{text-decoration:none; background:url(images/more2.jpg) 0 0 no-repeat;}
#bodyPan p.morenext{width:89px; height:60px; right:0px; top:0px; clear:both;}
#bodyPan p.morenext a{display:block; width:89px; height:39px; background:url(images/more2.jpg) 0 0 no-repeat #FBFBFB; color:#fff;  font:14px/36px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; margin:0 0 0 262px; text-align:center;}
#bodyPan p.morenext a:hover{text-decoration:none; background:url(images/more1.jpg) 0 0 no-repeat;}

#bodybottomPan{width:464px; height:42px; background:url(images/bodybottombg.jpg) 0 0 no-repeat; position:relative; margin:0 auto; clear:both; }

#bodyPan ul{width:352px; height:110px; margin:20px 0 0;}
#bodyPan ul li{background:url(images/arrow.jpg) 0 4px no-repeat; padding:0 0 0 20px;}
#bodyPan ul li a{background:#fff; color:#9A0000; text-decoration:none;}
#bodyPan ul li a:hover{text-decoration:underline;}

#bodyPan form{width:350px; height:162px; background:url(images/formarea.jpg) 0 100% no-repeat; padding:0px; margin:30px 0 0;}
#bodyPan form h2{display:block; width:310px; height:45px; background:url(images/formtop.gif) 0 0 no-repeat #F9F9F9; color:#fff; font:20px/39px Georgia, "Times New Roman", Times, serif; margin:0; padding:0 0 0 40px;}
#bodyPan form input{width:165px; height:18px; margin:0 0 10px 130px;}
#bodyPan form input.paddingtop{margin-top:16px;}
#bodyPan form input.button{width:54px; height:25px; display:block; background:url(images/button.gif) 0 0 no-repeat #EBEBEB; border:none; color:#fff;  font:14px/25px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase; margin:0 0 0 262px; text-align:center;}

/*--/BODY PANEL--*/
/*--FOOTER PANEL--*/
#footermainPan{height:155px; background: url(images/footerbg.gif) 0 0 repeat-x #000; color:#fff; margin:43px 0 0; padding:51px 0 0;}
#footerPan{width:330px; height:90px; display:block; position:relative; margin:0 auto;}
#footerPan p{padding:51px 0 0;}
#footerPan p span{background:#1C1B19; color:#AC2626; font-size:10px;}
#footerPan p.copyright{ background:#1F1D1B; margin:0; display:block; position:absolute; bottom:0px; right:23px; color:#fff; font:11px/15px Tahoma,Arial, Helvetica, sans-serif; padding:0;}

#footerPan ul{width:330px; display:block; position:absolute; left:0px; top:0; padding:0; }
#footerPan li{float:left; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}
#footerPan ul li a{padding:0 0 0 12px; color:#fff; background:#181716; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan ul.info{width:330px; height:45px; display:block; position:absolute; left:0px; top:29px; padding:0;}
#footerPan ul.info li{display:block; width:109px;}
#footerPan ul.info li.address{width:97px; background:url(images/vertical-dot.gif) 100% 0 repeat-y #1C1B19; color:#7B746B; font-size:10px; font-weight:bold; padding:0 0 0 12px;}
#footerPan ul.info li.phone{width:94px; background:url(images/vertical-dot.gif) 100% 0 repeat-y #1C1B19; color:#7B746B; font-size:10px; padding:0 0 0 15px; font-weight:bold;}
#footerPan ul.info li.fax{width:94px; background:#1C1B19; color:#7B746B; font-size:10px; padding:0 0 0 15px; font-weight:bold;}
#footerPan ul li span{background:#1C1B19; color:#AC2626; font-size:10px; font-weight:bold; line-height:14px;}

#footerPan ul.templateworld{width:158px; background:#1C1B19; color:#fff; display:block; position:absolute; top:97px; left:152px;}
#footerPan ul.templateworld li a{background:#1C1B19; display:block; color:#fff; text-decoration:none;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}




İndex
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Time Manager</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topPan">
  <ul>
    <li class="menupadding"><a href="http://www.free-css.com/">Home</a></li>
    <li class="menupadding"><a href="http://www.free-css.com/">About us</a></li>
    <li class="menupadding"><a href="http://www.free-css.com/">Support</a></li>
    <li class="menupadding"><a href="http://www.free-css.com/">Solution</a></li>
    <li class="menupadding"><a href="http://www.free-css.com/">contact</a></li>
  </ul>
  <h1>Time Manager</h1>
  <div id="toplinkPan">
    <div id="toplinkfastPan">
      <p>Phasellus felis</p>
      <a href="http://www.free-css.com/">&nbsp;</a> </div>
    <div id="toplinksecondPan">
      <p>Phasellus felis</p>
      <a href="http://www.free-css.com/">&nbsp;</a> </div>
    <div id="toplinkthirdPan">
      <p>Phasellus felis</p>
      <a href="http://www.free-css.com/">&nbsp;</a> </div>
  </div>
</div>
<div id="bodyPan">
  <h1><span>Welcome</span></h1>
  <p class="bigtext">This is a free, tableless, W3C-compliant web design layout by Template World.</p>
  <p>Time Manager is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
  <p>We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.</p>
  <p>If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
  <p class="more"><a href="http://www.free-css.com/">more</a></p>
  <form action="http://www.free-css.com/" method="post">
    <h2>member login</h2>
    <input type="text" class="paddingtop" value="Your Name" />
    <input name="" type="text" value="Email ID" />
    <input name="" type="submit" class="button" value="GO" />
  </form>
  <h2>Why choose us ?</h2>
  <p class="bigtext">amet,conadipscingelit.sectetueradipis ngelit.adipiscing elit. Donec vitae leo. Integer</p>
  <p>Phasellus dui lectus, . Pellentesque molestiepellensque quisPellentesque, molestie sed, tempus eu,nc. Pelle</p>
  <p>ntesque luctus, convallis at, metus. Nullam lectus mi, consectetuer quis, pellentesque vitae, . Pellentesque tempus sit amet, ante. Pellentesque </p>
  <ul>
    <li><a href="http://www.free-css.com/">vitae facilisis diam elit sed massa. Curabitursem</a></li>
    <li><a href="http://www.free-css.com/">vitae facilisis diam elit sed massa. Curabitursem</a></li>
    <li><a href="http://www.free-css.com/">vitae facilisis diam elit sed massa. Curabitursem</a></li>
    <li><a href="http://www.free-css.com/">vitae facilisis diam elit sed massa. Curabitursem</a></li>
    <li><a href="http://www.free-css.com/">vitae facilisis diam elit sed massa. Curabitursem</a></li>
  </ul>
  <p class="morenext"><a href="http://www.free-css.com/">more</a></p>
</div>
<div id="bodybottomPan">&nbsp;</div>
<div id="footermainPan">
  <div id="footerPan">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a>|</li>
      <li><a href="http://www.free-css.com/">About us</a> |</li>
      <li><a href="http://www.free-css.com/">Support</a>|</li>
      <li><a href="http://www.free-css.com/">Clients</a> |</li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
    <ul class="info">
      <li class="address">23-Ambush road 0128thonhill <br />
        CANADA</li>
      <li class="phone"><span>PH: </span><br />
        012-2568-6897 <br />
        012-2568-6898</li>
      <li class="fax"><span>FAX:</span> <br />
        012-2568-6897 <br />
        012-2568-6898</li>
    </ul>
    <p class="copyright">©time manager all right reaserved </p>
    <ul class="templateworld">
      <li>Design By:</li>
      <li><a href="http://www.templateworld.com">Template World</a></li>
    </ul>
  </div>
</div>
</body>
</html>
[/quote]
______________
Mesaj05.04.2009, 18:00 (UTC)    
Mesaj konusu:

tasarımın linkini atabilirmisin?
Mesaj08.04.2009, 08:54 (UTC)    
Mesaj konusu:

Yok mu bunu yapacak olan...
______________
Mesaj08.04.2009, 09:10 (UTC)    
Mesaj konusu:

kardeş bunlar tek kodmu yaw anlamadım 2-3 koda benziyor bide bunun resimli anlatımı aşağıdaki linkte
http://www.bedava-sitem.com/forum/viewtopic.php?t=25694
Mesaj10.04.2009, 06:29 (UTC)    
Mesaj konusu:

mysebebim yazmış:
kardeş bunlar tek kodmu yaw anlamadım 2-3 koda benziyor bide bunun resimli anlatımı aşağıdaki linkte
http://www.bedava-sitem.com/forum/viewtopic.php?t=25694



Teşekkürler dostum.. Bu bana yardımcı oldu işte.. Smile
______________
Önceki mesajları göster:   


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