Forum'da ara:
Ara


Yazar Mesaj
Mesaj19.12.2011, 15:35 (UTC)    
Mesaj konusu: tasarım altı üstü diye ayırırmısınız
Alıntıyla Cevap Gönder
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>City Portal</title>
<meta name="keywords" content="city portal, 3 columns, free css templates, website templates, white color" />
<meta name="description" content="City Portal is a 3-column free website template for everyone" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
{
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}
</script>
</head>
<body>

<div id="templatmeo_wrapper">

    <div id="templatemo_header">
   
        <div id="site_title">
            <h1><a href="http://www.templatemo.com" target="_parent">
                <img src="http://img.webme.com/pic/i/istanpolice/templatemo_logo.png" alt="City Portal" />
                <span>İSTANBUL</span>
            </a></h1>
        </div> <!-- end of site_title -->
       
        <div id="header_right">
       
            <ul id="header_button">
                <li><a href="#"><img src="http://i
mg.webme.com/pic/i/istanpolice/templatemo_home.jpg" alt="home" /></a></li>
                <li><a href="#"><img src="http://img.webme.com/pic/i/istanpolice/templatemo_contact.jpg" alt="contact us" /></a></li>   
            </ul>
           
            <div class="cleaner"></div>
           
            <form action="#" method="get">
                <input type="text" value="Enter a keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
                <input type="submit" name="Search" value="Go" alt="Search" id="searchbutton" title="Search" />
            </form>
       
        </div>
       
    </div> <!-- end of templatemo_header -->
   
    <div id="templatemo_banner">
   
       <div id="banner_box">
        <ul>
           <li><a href="http://www.templatemo.com/page/1" target="_parent"><span class="current"></span><img src="http://img.webme.com/pic/i/istanpolice/templatemo_city_info.jpg" alt="City Info." /></a></li>
            <li><a href="http://www.templatemo.com/page/2" target="_parent"><span></span><img src="http://img.webme.com/pic/i/istanpolice/templatemo_business.jpg" alt="Business" /></a></li>
            <li><a href="http://www.templatemo.com/page/3" target="_parent"><span></span><img src="http://img.webme.com/pic/i/istanpolice/templatemo_tourism.jpg" alt="Tourism" /></a></li>
            <li><a href="http://www.templatemo.com/page/4" target="_parent"><span></span><img src="http://img.webme.com/pic/i/istanpolice/templatemo_events.jpg" alt="Events" /></a></li>
        </ul>
        </div>
   
    </div> <!-- end of templatemo_banner -->
   
    <div id="templatemo_menu">
   
        <ul>
            <li><a href="http://istanpolice.tr.gg/">Anasayfa</a></li>
            <li><a href="http://istanpolice.tr.gg/iletisim.htm">İletişim</a></li>
            <li><a href="#">Sizden Gelenler</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Bağcılar</a></li>
            <li><a href="#">Güneşli</a></li>
            <li><a href="#">Fotoğraflar</a></li>
            <li><a href="#">Videolar</a></li>   
            <li><a href="http://istanpolice.tr.gg/AksarayGeceleri.htm">Aksaray Geceleri</a></li>   
        </ul>       
   
    </div> <!-- end of templatemo_menu -->
   
    <div id="templatemo_content_wrapper">
   
       <div id="templatemo_left_sidebar">
       
           <div class="templatemo_box">
               <h2><span></span>Categories</h2>
               
                <div class="body">
                    <ul class="side_menu">
                        <li><a href="#">Lorem ipsum dolor</a></li>
                        <li><a href="#">Donec bibendum semper</a></li>
                        <li><a href="#">Proin tincidunt dapibus</a></li>
                        <li><a href="#">Nulla consequat</a></li>
                        <li><a href="#">In enim justo</a></li>
                        <li><a href="#">Aenean vulputate</a></li>
                        <li><a href="#">Etiam ultricies</a></li>
                        <li><a href="#">Nullam vehicula egestas </a></li>             
                    </ul>
                </div>
           
               <div class="box_bottom"><span></span></div>
            </div>
           
            <div class="templatemo_box">
               <h2><span></span>Useful Resources</h2>
               
                <div class="body">
                   <ul class="side_menu">
                        <li><a href="#">Aliquam erat volutpat</a></li>
                        <li><a href="#">Praesent vestibulum</a></li>
                        <li><a href="#">Nulla consequat</a></li>
                        <li><a href="#">In enim justo</a></li>
                        <li><a href="#">Aenean vulputate</a></li>
                        <li><a href="#">Etiam ultricies</a></li>
                        <li><a href="#">Nullam vehicula egestas</a></li>
                        <li><a href="#">Sed consequat</a></li>
               </ul>
                </div>
           
               <div class="box_bottom"><span></span></div>
            </div>
       
        </div> <!-- end of left_sidebar -->
       
        <div id="templatemo_content">
       
         <div class="templatemo_box">
               <h2><span></span>Welcome to City Portal Website</h2>
               
                <div class="body">
                   
                    <p><img alt="" style="width: 415px; height: 373px" src="http://img.webme.com/pic/i/istanpolice/sarachane_1.jpg" /></p>
                 
              </div>
           
                <div class="box_bottom"><span></span></div>
            </div>
           
            <div class="templatemo_box">
               <h2><span></span>Popular Places</h2>
               
                <div class="body">
                   
                    <div class="news_box">
                        <a href="#"><img class="news_image" src="http://img.webme.com/pic/i/istanpolice/templatemo_image_06.jpg" alt="image" /></a>
                        <h3><a href="#">Praesent pretium diam quam</a></h3>
                        <p>Praesent accumsan porta odio eget hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nunc nisl, in pellentesque mi.</p>
                       
                      <div class="cleaner"></div>
                    </div>
               
              <div class="news_box">
                    <a href="#"><img class="news_image" src="http://img.webme.com/pic/i/istanpolice/templatemo_image_07.jpg" alt="image" /></a>
                   <h3><a href="#">Aliquam tincidunt mauris sed</a></h3>
                    <p>Nam non nisl massa, vitae dapibus nisl. Vivamus iaculis gravida odio sed tempor. Fusce tempor faucibus est, ac feugiat metus accumsan sit amet.</p>
                    <div class="cleaner"></div>
                </div>
               
              <div class="news_box">
                    <a href="#"><img class="news_image" src="http://img.webme.com/pic/i/istanpolice/templatemo_image_08.jpg" alt="image" /></a>
                  <h3><a href="#">Curabitur quis nulla purus</a></h3>
                    <p> Praesent rhoncus faucibus nibh, non molestie lectus sagittis sed. Praesent ac sem lectus. Cras molestie elit sit amet velit tincidunt imperdiet. Mauris nulla purus.</p>
                <div class="cleaner"></div>
                </div>
               
                <div class="more float_r"><a href="#">View All</a></div>
               
                <div class="cleaner"></div>
                 
                </div>
           
               <div class="box_bottom"><span></span></div>
            </div>
           
        </div> <!-- end of templatemo_content -->
       
          <div id="templatemo_right_sidebar">
       
           <div class="templatemo_box">
               <h2><span></span>Guest House  Services</h2>
               
                <div class="body">
                   
                    <ul class="side_menu">
                        <li><a href="#">Donec quam</a></li>
                        <li><a href="#">Nulla consequat</a></li>
                        <li><a href="#">In enim justo</a></li>
                        <li><a href="#">Aenean vulputate</a></li>
                        <li><a href="#">Etiam ultricies</a></li>
                        <li><a href="#">Nullam quis</a></li>
                        <li><a href="#">Sed consequat</a></li>
                        <li><a href="#">Cras dapibus</a></li>                   
                    </ul>
                 
                </div>
           
               <div class="box_bottom"><span></span></div>
            </div>
           
            <div class="sidebar_box">
               <a href="http://www.flashmo.com/page/1" target="_parent"><img src="http://img.webme.com/pic/i/istanpolice/nightlife.png" alt="Night Life" /></a>            </div>
           
            <div class="sidebar_box">
               <a href="http://www.templatemo.com/page/1" target="_parent"><img src="http://img.webme.com/pic/i/istanpolice/city-zoo.png" alt="City Zoo" /></a>            </div>
       
      </div> <!-- end of right_sidebar -->
       
        <div class="cleaner"></div>
   
    </div> <!-- end of templatemo_content_wrapper -->

 <div id="templatemo_footer_wrapper">

   <div id="templatemo_footer">

        <ul class="footer_menu">
           <li><a href="#">Homepage</a></li>
            <li><a href="#">Destinations</a></li>
            <li><a href="#">Life Style</a></li>
            <li><a href="#">Environments</a></li>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Technology</a></li>
            <li><a href="#">Business</a></li>
            <li><a href="#">Videos</a></li>
            <li class="last_menu"><a href="#">Contact</a></li>
        </ul>
   
        Copyright © 2048 <a href="#">Your Company Name</a> |
    <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a></div>
   <!-- end of footer -->
</div> <!-- end of templatmeo_footer_wrapper -->

</body>
</html>


CSS KODU
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;}
/*
Credit: http://www.templatemo.com
*/

body {
   margin: 0;
   padding: 0;
   line-height: 1.7em;
   font-family: Tahoma, Geneva, sans-serif;
   font-size: 12px;
   color: #666;
    background: #e5e5e5 url(http://img.webme.com/pic/i/istanpolice/templatmeo_body_top.jpg) repeat-x top;
}
      
a:link, a:visited { color: #0066FF; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #009900; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

p { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.float_l {
   float: left;
}

.float_r {
   float: right;
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }

.more a {
   display: block;
   width: 82px;
   height: 23px;
   padding: 3px 0 0 0;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_button.png) no-repeat;
   color: #777777;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
}

.more a:hover {
   color: #c85d16;
}

#templatmeo_wrapper {
   width: 970px;
   margin: 0 auto;
}

/* header */

#templatemo_header {
   clear: both;
   width: 910px;
   height: 100px;
   padding: 10px 30px;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_header.jpg) no-repeat;
}

#templatemo_header  #site_title {
   float: left;
   width: 300px;
   padding-top: 10px;
}

#templatemo_header  #site_title h1 {
   margin: 0;
   padding: 0;
}

#templatemo_header  #site_title h1 a {
   margin: 0px;
   padding: 0px;
   font-size: 30px;
   color: #ffffff;
   font-weight: bold;
   text-decoration: none;
}

#templatemo_header  #site_title h1 a span {
   display: block;
   margin-top: 5px;
   font-size: 12px;
   color: #5d5b5b;
   font-weight: bold;
   letter-spacing: 2px;
}

#templatemo_header #header_right {
   float: right;
}

#header_right #header_button {
   float: right;
   margin: 0;
   padding: 0;
   list-style: none;
}

#header_button li {
   margin: 0px;
   padding: 0px;
   display: inline;
}

#header_button li a {
   float: left;
   display: block;
   width: 48px;
   height: 48px;
   margin-left: 10px;
}

#header_right form {
   margin: 10px 0 0 0;
   padding: 0;
}

#searchfield {
   height: 18px;
   width: 170px;
   padding: 6px 5px 4px 5px;
   margin: 0 5px 0 0;
   font-size: 12px;
   font-variant: normal;
   line-height: normal;
}

#searchbutton {
    height: 30px;
   width: 72px;
   margin: 0px;
   padding: 6px 0 0 0;
   cursor: pointer;
   font-size: 12px;
   text-align: center;
   vertical-align: bottom;
   white-space: pre;
   color: #ffffff;
   background: url(http://img.webme.com/pic/i/istanpolice/search_button.jpg);
   border: none;
}

/* end of header */

/* banner */

#templatemo_banner {
   width: 970px;
   height: 280px;
   padding: 10px 0;
}

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

#templatemo_banner #banner_box li {
   margin: 0;
   padding: 0;
   display: inline;
}

#templatemo_banner #banner_box li a {
   position: relative;
   display: block;
   float: left;
   width: 230px;
   height: 280px;
   margin-left: 10px;
}

#templatemo_banner #banner_box li span {
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   width: 230px;
   height: 217px;
}

#templatemo_banner #banner_box li a span:hover {
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_banner_hover.png) no-repeat;
}

#templatemo_banner #banner_box li .current {
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   width: 230px;
   height: 217px;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_banner_hover.png) no-repeat;
}
/* end of banner */

/* menu */

#templatemo_menu {
   width: 950px;
   height: 50px;
   padding: 0 10px;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_menu_list.png) no-repeat center top;
}

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

#templatemo_menu ul li {
   padding: 0px;
   margin: 0px;
   display: inline;
}

#templatemo_menu ul li a {
   float: left;
   display: block;
   margin-right: 40px;
   font-size: 14px;
   text-decoration: none;
   color: #666666;   
   font-weight: normal;
   outline: none;
}
#templatemo_menu ul li a:hover {
   color: #009900;
}

/* end of menu */

.templatemo_box {
   margin-bottom: 10px;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_box_body.jpg) repeat-y right;
}

.templatemo_box .body {
   padding: 5px 15px 5px 15px;
}

.templatemo_box h2 {
   position: relative;
   height: 25px;
   margin: 0;
   padding: 8px 15px;
   font-size: 14px;
   color: #048dc6;
   font-weight: bold;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_box_tr.jpg) no-repeat top right;
}

.templatemo_box h2 span {
   position: absolute;
   width: 10px;
   height: 35px;
   top: 0;
   left: 0;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_box_tl.jpgg);
}

.templatemo_box .box_bottom {
   position: relative;
   height: 12px;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_box_br.jpg) top right;
}

.templatemo_box .box_bottom span {
   position: absolute;
   width: 10px;
   height: 12px;
   top: 0;
   left: 0;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_box_bl.jpg);
}

.side_menu {
   list-style: none;
   padding: 0px;
   margin: 0 0 0 0;
}

.side_menu li {
   padding: 0;
   margin: 5px 0;
}

.side_menu li a {
   display: block;
   color: #666;
   padding: 0px 15px;
   font-weight: normal;
   text-decoration: none;
   background: url(http://img.webme.com/pic/i/istanpolice/templatemo_menu_list.png) left center no-repeat;
}

.side_menu li a:hover {
   color: #c85d16;
}

/* content*/

#templatemo_content_wrapper {
   clear: both;
   padding: 10px;
}

#templatemo_left_sidebar {
   float: left;
   margin-right: 10px;
   width: 230px;
}

#templatemo_right_sidebar {
   float: right;
   width: 230px;
}

#templatemo_content {
   float: left;
   width: 470px;
}

.news_image {
   float: left;
   margin: 3px 15px 0 0;
   border: 5px solid #e5e5e5;
}

.news_box {
   clear: both;
   margin-bottom:20px;
}
   
.news_box h3{
   font-size: 14px;
   margin: 0 0 10px 0;
}

.sidebar_box {
   margin-bottom: 10px;
}

/* footer */

#templatemo_footer_wrapper {
   background: #bfbfbf url(http://img.webme.com/pic/i/istanpolice/templatemo_footer.jpg) top repeat-x;
}

#templatemo_footer {
   width: 950px;
   padding: 30px 10px;
   margin: 0 auto;
   text-align: center;
   color: #666666;
}

#templatemo_footer a {
   color: #666666;
   font-weight: normal;
}

#templatemo_footer a:hover {
   color: #333333;
   font-weight: normal;
}


#templatemo_footer a:hover {
   text-decoration: none;
}

#templatemo_footer .footer_menu {
   margin: 0 0 10px 0;
   padding: 0px;
   list-style: none;
}

.footer_menu li {
   margin: 0px;
   padding: 0 20px;
   display: inline;
   border-right: 1px solid #666666;
}

.footer_menu .last_menu {
   border: none;
}

/* end of footer */
↑
Mesaj19.12.2011, 15:36 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
tasarım altı ve üstü diye ayırırmısınız lütfen
↑
Ö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.