Bozuk Tasarım

    <div id="page">
     <div id="header">
       <div id="logo">
      <!-- type your logo and small slogan here -->
      <p>Sempati-<span class="green">Tasarim</span></p>
      <div id="slogan"><p>Tasarım Bizim İşimiz</p></div>
      <!-- end logo -->
      </div>
      <div id="nav">
        <div id="nav-menu-left"></div>
        <div id="nav-menu">
        <!-- start of navigation -->
          <ul>
           <li><a href="#">Anasayfa</a></li>
           <li><a href="#">İletişim</a></li>
           <li><a href="#">Tasarımlar</a></li>
           <li><a href="#">Üye Ol</a></li>
           <li><a href="#">Giriş Yap</a></li>
           <li><a href="#" style="background-image: none;">Forum</a></li>
         </ul>
         <!-- end navigation -->
          </div>
        <div id="nav-menu-right"></div>
      </div>
     </div>
     <div class="clearfloats"></div>
     <div id="header2">
       <!-- the large header slogan which is over top of the grass image can either be changed, or removed below -->
       <div id="header2-slogan1"><p>Bu Dünya Hepimizin</p></div>
       <div id="header2-slogan2"><p>Doğayı Koruyalım...</p></div>
       <!-- end header slogan -->
     </div>
    
     <div id="content">
       <div class="content-padding">
        <!-- page content below -->
         <h1>Değişken Gelebilir</h1>
         <p>

</p>
       </div>
     </div>
     <div id="body-divider"></div><!-- the division between the light green content section, and the dark -->
     <div id="content2">
       <div class="content-padding">
        <!-- content blocks (three side by side), can remove if needed, this was just an example -->
        <div class="content2-block">
         <h2>DUYURULAR</h2>
          <p>Buraya ve</p>
          <p>Buraya Duyuru Eklenecek</p>
        </div>
        <div class="content-divider"></div>
        <div class="content2-block">
          <h3>Top Tasarımlar</h3>
          <p>Buraya Ve</p>
          <p>Buraya Duyuru Eklenecek</p>
        </div>
        <div class="content-divider"></div>
          <div class="content2-block">
          <h4>Gazete Üyelik</h4>
         <p>Buradan Gazetemize Üye Olabilirsiniz :</p>
         <div id="subscribe">
              <form action="yourformmailhere" enctype="multipart/form-data" method="post">
                <input type="hidden" name="sendtoemail" value="youremailaddress" />
                <input type="hidden" name="redirect" value="yourwebsiteaddress" />
                <input type="hidden" name="subject" value="Newsletter subscription from your website" />
                <input name="name" type="text" value="İsminiz" class="inputstyle" />
              <input name="email" type="text" value="E-mail Adresiniz" class="inputstyle" />
              <input type="submit" value="Kaydet" class="button" />
            </form>
          </div>
        <!-- end content blocks -->
        </div>
        <div class="clearfloats"></div>
      </div>
      </div>
     <div id="footer-div"></div>
     <div id="footer">
       <p>Website &copy; Copyright 2011, All rights reserved. <a href="http://www.sempati-tasarim.tr.gg">Sempati-Tasarım</a></p>
     </div>
   </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  }

body {
  font-size:100%;
  font-family: Arial,'Lucida Grande',Verdana,sans-serif;
  text-align:center;
  background:#002400 url(http://img.webme.com/pic/s/sempati-tasarim/background.gif) no-repeat top center;
}


#page {width:992px; margin:0px auto; text-align:center;}

#header {
  height:191px;
  width:992px;
  background:url(http://img.webme.com/pic/s/sempati-tasarim/topbg.gif);
  text-align:left;
}

#logo {
  text-align:left;
  letter-spacing:-2px;
  text-shadow:0px 0px 8px #000;
  font:48px Georgia, Arial, "Times New Roman", Times;
  margin-left:18px;
  margin-top:94px;
  color:#FFF;
  width:364px;
  height:97px;
  float: left;
}

.green {
color:#AEF080;
}

#slogan {
  text-align:left;
  margin-left:100px;
  font:14px Arial, "Times New Roman", Times;
  letter-spacing:0px;
  color:#FFF;
}


/* TOP NAVIGATION BAR */
#nav {
  width:610px;
  float:left;
  margin-top:136px;
}

#nav-menu-left {
  background:url(http://img.webme.com/pic/s/sempati-tasarim/navbar-left.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu-right {
  background:url(http://img.webme.com/pic/s/sempati-tasarim/navbar-right.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu {
  background:url(http://img.webme.com/pic/s/sempati-tasarim/navbar-bg.gif) repeat-x top left;
  height:55px;
  width:556px;
  float: left;
}

#nav-menu ul {
  list-style:none;
}
 
#nav-menu ul a {
  background-image: url(http://img.webme.com/pic/s/sempati-tasarim/navbar-divider.gif);
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 12px;
  padding-left: 12px;
  padding-top:5px;
  display: block;
  line-height: 50px;
  text-decoration: none;
  text-shadow:1px 1px 1px #000;
  font-family: Arial, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #FFF;
}
   
#nav-menu ul a:hover {
  text-decoration:underline;
  text-shadow:0px 0px 4px #FF0000;
}
 
#nav-menu li {
  float:left;
}
/* END NAVIGATION BAR */

/* Large header image of grass and flower, with slogans */
#header2 {
  background:url(http://img.webme.com/pic/s/sempati-tasarim/header.jpg) no-repeat top left;
  width:992px;
  height:224px;
  text-shadow:1px 1px 1px #000;
}

#header2-slogan1 {
  font:48px Georgia, Arial, "Times New Roman", Times;
  padding:68px 0px 0px 106px;
  color:#FFF;
  text-align:left;
  letter-spacing:-2px;
}
#header2-slogan2 {
  font:48px Georgia, Arial, "Times New Roman", Times;
  padding:0px 0px 0px 267px;
  color:#FFF;
  text-align:left;
  letter-spacing:-2px;
}
/* end large header */

/* clears all floated elements */
.clearfloats {
  clear:both;
}
/* end clear floats */

/* first content section, lighter green area */
#content {
  background:#2E650D url(http://img.webme.com/pic/s/sempati-tasarim/body-bg.gif) no-repeat top left;
  width:992px;
  min-height:270px;
  text-align:left;
  padding-top:35px;
  padding-bottom:20px;
}

.content-padding {
  padding:0px 20px 0px 20px;
}

.content-padding a {
  font:16px Arial, "Times New Roman", Times;
  color:#CEFF9F;
  text-shadow:1px 1px 1px #104D00;
}

.content-padding a:hover {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-decoration:none;
  text-shadow:0px 0px 3px #FF0000;
}


#content h1 {
  font:36px Georgia, Arial, "Times New Roman", Times;
  color:#FFF;
  padding-bottom:10px;
  text-shadow:1px 1px 2px #000;
}

#content p {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-align:justify;
  padding-bottom:10px;
}
/* end content 1 section */


/* image that divides the two different colored content sections */
#body-divider {
  background:#1D5600 url(http://img.webme.com/pic/s/sempati-tasarim/body-divider.gif) no-repeat top left;
  width:992px;
  height:23px;
}
/* end content divider */

/* darker green content section, "content 2" */
#content2 {
  width:992px;
  min-height:250px;
  background:#1D5600;
  text-align:left;
  padding-top:10px;
  padding-bottom:30px;
}

#content2 p {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-align:justify;
  padding-bottom:10px;
}

#content2 h2,h3,h4,h5,h6 {
  background:#1D5600 url(http://img.webme.com/pic/s/sempati-tasarim/headline-arrow.gif) no-repeat top left;
  font:normal 25px serif, "Times New Roman", Times;
  line-height:25px;
  color:#FFF;
  text-shadow:1px 1px 2px #000;
  padding-bottom:10px;
  padding-left:30px;
}

.content2-block {
  width:274px;
  float:left;
}

.content2-block p {
  width:274px;
  float:left;
  text-align:left;
}

  /* three column area, vertical dotted divider */
  .content-divider {
    background:url(http://img.webme.com/pic/s/sempati-tasarim/content-divider.gif) no-repeat top center;
    width:2px;
    height:274px;
    float:left;
    padding:0px 30px 0px 30px;
  }
  /* end divider */

/* end content 2 */


/* subscribe form */
#subscribe {text-align:right; padding-right:15px;}
#subscribe input { margin:1px 0;}
.button {
  background:transparent url(http://img.webme.com/pic/s/sempati-tasarim/submit.gif) no-repeat top left;
  padding-bottom:5px;
  border:none;
  width:126px;
  height:33px;
  color:#FFFFFF;
  font:bold 13px Arial, Georgia, "Times New Roman", Times;
  cursor:pointer;
}
.inputstyle {
  background:#002200;
  width:200px;
  height:30px;
  color:#FFF;
  font-size:14px;
  padding:0px 5px 0px 10px;
  border:1px solid #427B23;
}
/* end subscribe form */



/* footer of page */
#footer-div {
  background:url(http://img.webme.com/pic/s/sempati-tasarim/footer-div.gif) no-repeat top left;
  width:992px;
  height:6px;
}

#footer {
  padding-top:15px;
  width:992px;
  height:150px;
  background:#001800;
  text-align:center;
}

#footer p {
  font:12px Arial, "Times New Roman", Times;
  color:#FFF;
}

#footer a {
  font:12px Arial, "Times New Roman", Times;
  color:#FFF;
}
/* end footer */