- CSS TASARIM 22

CSS TASARIM 22

TASARIMIN ÜSTÜNE

<!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>Game Website Template, Free Download, XHTML/CSS Layout</title>
<meta name="keywords" content="Game Website Template, free templates, website templates, CSS, XHTML" />
<meta name="description" content="Game Website Template - download free XHTML/CSS files from templatemo.com" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="templatemo_wrapper_outer">
<div id="templatemo_wrapper_inner">
   
    <div id="templatemo_banner"></div> 
   
    <div id="templatemo_menu">
       <ul>
            <li><a href="#" class="current">Home</a></li>
            <li><a href="#">Games</a></li>
            <li><a href="#">Popular</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div> 
   
    <div id="templatemo_content_wrapper">
   
       <div class="templatemo_side_bar margin_right_10">
           
            <div class="header_01">Games by Platform</div>
               <ul>
                   <li><a href="#">PC</a></li>
                    <li><a href="#">PLAYSTATION® 3</a></li>
                    <li><a href="#">PSP® 3</a></li>
                    <li><a href="#">GAMECUBE™</a></li>
                    <li><a href="#">NINTENDO™</a></li>
                    <li><a href="#">GAME BOY® ADVANCE</a></li>
                    <li><a href="#">WII™</a></li>
                    <li><a href="#">XBOX 360</a></li>
                </ul>
         
            <div class="margin_bottom_20 horizontal_divider"></div>
         <div class="margin_bottom_20"></div>
 
            <div class="header_01">Search Any Game</div>     
            <form action="" method="post">
                  <input type="text" id="search_field" />
                  <input type="submit" value="" id="search_button" />
            </form>
            <div class="margin_bottom_20"></div>
        </div> 
       
        <div class="templatemo_content margin_right_10">
       
           <div class="content_section">
              
           
           <div class="margin_bottom_40"></div>
        </div> 
       
     [/quote]

TASARIMIN ALTINA

<div style="position: absolute; top: 432px; left: 890px">
   <div class="templatemo_side_bar">
             
            <div class="header_01">Latest News</div>
           
            <div class="latest_news border_bottom">
                <div class="header_03"><a href="#">Aenean a bibendum augue</a></div>
                <p>Fusce egestas feugiat turpis, ac ultrices turpis vestibulum at.</p>
         </div>
                       
            <div class="margin_bottom_10"></div>
           
         <div class="latest_news">
                <div class="header_03"><a href="#">Sed nec enim magna</a></div>
                <p>Proin lectus orci, iaculis at facilisis sed, sodales a neque.</p>
         </div>
           
          <div class="margin_bottom_20 horizontal_divider"></div>
         <div class="margin_bottom_20"></div>
           
            <div class="header_01">Sample Video</div>
 
            <div class="latest_news">
               <div class="image_wrapper_02"><span></span><a href="#"><img src="images/templatemo_image_03.jpg" alt="video" /></a></div>
                <p>Donec venenatis tellus non massa blandit vitae volutpat urna fringilla. Aenean ante lorem, vestibulum eu lacinia.</p>
         </div>
                       
          <div class="margin_bottom_10"></div>
        </div> 
       
        <div class="cleaner"></div>   
    </div> 
   
</div>
</div>
 </div>
 <div id="templatemo_footer">
        Copyright © 2024 <a href="#">Your Company Name</a> | adaptado por <a href="http://www.buscador1.es.tl/" target="_parent">buscador1</a>
      </div> 
    <div class="margin_bottom_10"></div>
   
    <div class="content_section">
       <center>
       <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px"  src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a>
   </center>
      <div class="margin_bottom_10"></div>
   </div>
</body>
</html>

CSS BÖLÜMÜNE

lli.nav_element{display: none;}
li.nav_element a{display: none;}
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;}

/*
CSS Credit: http://www.templatemo.com
*/

body {
   margin: 0;
   padding: 0;
   line-height: 1.5em;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #999;
   background: #272525 url(http://img26.xooimage.com/files/d/f/f/templatemo_top_bg-12d0aea.jpg) repeat-x;
}

a:link, a:visited { color: #FFFFFF; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #99FF00; text-decoration: underline; }

p {
   margin: 0px;
   padding: 0px;
   text-align: justify;
}

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

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px;   }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px;   }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px;   }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px;   }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px;   }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px;   }

.margin_right_10 { margin-right: 10px; }
.margin_right_60 { margin-right: 60px; }

.horizontal_divider {
   background: url(http://img24.xooimage.com/files/2/c/8/templatemo_horizo..._divider-12d0af3.jpg) repeat-x bottom;
}

.border_bottom {
   border-bottom: 1px dashed #000;
}

.fl {
   float: left;
}

.fr {
   float: right;
}

.rc_btn_01 a {
   clear: both;
   display: block;
   width: 120px;
   height: 25px;
   font-size: 12px;
   text-align: center;
   color: #000000;
   text-decoration: none;
   border: medium none;
   background: url(http://img44.xooimage.com/files/b/5/9/templatemo_button_01-12d9300.png) no-repeat;; padding-left:0; padding-right:0; padding-top:5px; padding-bottom:0
}

#templatemo_wrapper_outer {
   width: 100%;
   margin: 0 auto;
}

#templatemo_wrapper_inner {
   width: 980px;
   margin: 0 auto;
   background: url(http://img48.xooimage.com/files/f/e/6/templatemo_wrapper_bg-12d9303.png) repeat-y;; padding-left:5px; padding-right:5px; padding-top:0; padding-bottom:0
}

#templatemo_banner {
   width: 980px;
   height: 250px;
   background: url(http://img40.xooimage.com/files/6/7/b/templatemo_banner_bg-12d0b0e.jpg) no-repeat;
}

/* menu */

#templatemo_menu {
   clear: both;
   width: 500px;
   height: 65px;
   background: url(http://img46.xooimage.com/files/5/3/7/templatemo_menu_bg-12d0b1f.jpg) no-repeat;; padding-left:240px; padding-right:240px; padding-top:0; padding-bottom:0
}

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

#templatemo_menu ul li {
   display: inline;
}

#templatemo_menu ul li a {
   float: left;
   padding: 0 20px;
   text-align: center;
   font-size: 12px;
   text-align: center;
   text-decoration: none;
   color: #999999;   
   font-weight: bold;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
   color: #ffffff;
}
/* end of menu*/

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

.templatemo_content {
   float: left;
   width: 460px;
   padding: 20px 19px 0 19px;
   background: #1b1919;
   border: 1px solid #363434;
}

.header_01 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 14px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}

.header_02 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 18px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}

.header_03 {
   padding: 0 0 5px 0;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff;
   /*color: #99be29;*/   
}

.header_03 a { color: #ffffff; text-decoration: none; }
.header_03 a:hover { color: #99FF00; }

.templatemo_side_bar {
   float: left;
   width: 180px;
   padding: 20px 19px 0 19px;
   background: #1b1919;
   border: 1px solid #363434;   
}

.templatemo_side_bar ul {
   margin: 0px;
   padding: 0px;
}

.templatemo_side_bar ul li {
   margin: 0px;
   padding: 0 0 0 0;
   margin-bottom: 5px;
   border-left: 5px solid #000;
   list-style: none;
}

.templatemo_side_bar ul li a {
   display: block;
   background: #242224;
   padding: 5px 0 5px 10px;
   color: #b5b1b1;
   text-decoration: none;
}

.templatemo_side_bar ul li a:hover {
   color: #ffffff;
   background: #000;
}

.templatemo_side_bar form {
   margin: 0px;
   padding: 0px;
}

#search_field {
   padding: 5px 0 0 0;
   height: 20px;
   width: 175px;
   margin-bottom: 10px;
}

#search_button {
   float: right;
   width: 120px;
    height: 30px;
   padding: 0;
   margin: 0;
   cursor: pointer;
   font-size: 12px;
   text-align: center;
   white-space: pre;
   background: url(http://img26.xooimage.com/files/e/1/a/templatemo_button_02-12d0b30.png) no-repeat;
   color: #000000;
   border: medium none;
}

.content_section {
   clear: both;
   padding: 0 0 0 0;
}

.content_section p span {
   color: #ffffff;
}

.image_wrapper_01 {
   float: left;
   position: relative;
   margin: 3px 20px 0 0;
   background: #131212;
   padding: 4px;
}

.image_wrapper_01 img {
   border: 1px solid #363434;
}

.image_wrapper_02 {
   position: relative;
   margin: 0 0 10px 0;
   background: #131212;
   padding: 4px;
}

.image_wrapper_02 span {
   position: absolute;
   width: 20px;
   height: 20px;
   bottom: 10px;
   right: 10px;
   background: url(http://img24.xooimage.com/files/9/1/5/templatemo_play_icon-12d0ad9.jpg) no-repeat;
}

.image_wrapper_02:hover span {
   background: url(http://img44.xooimage.com/files/8/d/4/templatemo_play_icon_hover-12d0ae2.jpg) no-repeat;
}

.image_wrapper_02 img {
   border: 1px solid #363434;
}

.image_wrapper img {
   border: 1px solid #363434;
}

.latest_news {
   clear: both;
   padding-bottom: 10px;
}

#templatemo_footer {
   clear: both;
   width: 990px;
   height: 40px;
   margin: 0 auto;
   text-align: center;
   background: url(http://img48.xooimage.com/files/f/f/2/templatemo_footer-12d0b3e.jpg) no-repeat;; padding-left:0; padding-right:0; padding-top:20px; padding-bottom:0
}