Radyom İçin Css Tasarımı

<div id="wrapper">
   <div id="container1">
     <div id="menu">
       <div id="pettabs" class="indentmenu">
         <ul>
           <li><a href="http://www.free-css.com/free-css-templates.php" rel="tab1" class="selected">Giriş</a></li>
           <li><a href="http://www.free-css.com/free-css-templates.php" rel="tab2">Dinle</a></li>
           <li><a href="http://www.free-css.com/free-css-templates.php" rel="tab3">Yayın Akışı</a></li>
           <li><a href="http://www.free-css.com/free-css-templates.php" rel="tab4">Dj Ler</a></li>
           <li><a href="http://www.free-css.com/free-css-templates.php" rel="tab5">İstek Hattı</a></li>
           <li><a href="http://www.free-css.com/free-css-templates.php" rel="tab6" style="border-right: none;">İletişim</a></li>
         </ul>
       </div>
       <div class="tabcontentstyle">
         <div  id="tab1" class="tabcontent"></div>
         <div id="tab2" class="tabcontent">
           <ul>
             <li><a href="http://www.free-css.com/free-css-templates.php">Service 1</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Service 2</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Service 3</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Service 4</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Service 5</a></li>
           </ul>
         </div>
         <div id="tab3" class="tabcontent">
           <ul>
             <li><a href="http://www.free-css.com/free-css-templates.php">Product 1</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Product 2</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Product 3</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Product 4</a></li>
           </ul>
         </div>
         <div id="tab4" class="tabcontent">
           <ul>
             <li><a href="http://www.free-css.com/free-css-templates.php">Link 1</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Link 2</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Link 3</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Link 4</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Link 5</a></li>
             <li><a href="http://www.free-css.com/free-css-templates.php">Link 6</a></li>
           </ul>
         </div>
         <div id="tab5" class="tabcontent"> Something you might want to know about us. </div>
         <div id="tab6" class="tabcontent"> Don't be hesitated to contact us if you have something to say. </div>
       </div>
     </div>
     <!-- end of mneu -->
     <div id="banner">
       <h1>Yeni tasarıma hoşgeldiniz !</h1>
       <p>bu tasarım <a href="http://bedavasitem.forum.st/profile.forum?mode=viewprofile&u=1020"><font color="white">Relaxis</font></a> tarafından tr.gg ye optimize edilmiştir .</p>
     </div>
     <div id="content1">
       <div id="content_top"></div>
       <div class="content_section_01">
         <div class="section_01_left">

  </div>
         <div class="section_01_right">
           <h1>Site Haberleri</h1>
           <h3>Siteniz hayırlı olsun.</h3>
           <p>Donec enim enim, imperdiet quis, mollis a, elementum a, diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
           <a href="http://bedavasitem.forum.st">Devamını oku</a> </div>
         <div class="cleaner">&nbsp;</div>
       </div>
       <div class="content_section_02">
         <div class="section_02_subsection">
           <h2>Featured Services</h2>
           <p>Suspen disse a nibh tristique justo rhoncus volutpat.</p>
           <ul>
             <li><a href="http://csspanel.tr.gg">Free Flash Templates</a></li>
             <li><a href="http://csspanel.tr.gg">CSS Web Templates</a></li>
             <li><a href="hhttp://csspanel.tr.gg">Web Design Blog</a></li>
             <li><a href="http://csspanel.tr.gg">Premium Templates</a></li>
           </ul>
           <a href="http://csspanel.tr.gg">devamını oku...</a> </div>
        <div class="section_02_subsection">
           <h2>Why choose us?</h2>
           <p>Pellentesque lectus justo, fermentum in, ornare vitae, vehicula eu, felis.</p>
           <ul>
             <li>Quisque facilisis suscipit elit</li>
             <li>Lacus et dictum tristique</li>
             <li>Eeros ac tincidunt aliquam</li>
             <li>Nullam commodo arcu non facilisis</li>
           </ul>
         <a href="http://csspanel.tr.ggt">devamını oku...</a> </div>
         <div class="section_02_subsection" style="border-right: none;">
           <h2>Testimonials</h2>
           <h3>Phasellus id purus</h3>
           <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque at nulla eu elit adipiscing tempor.</p>
           <a href="http://www.free-css.com/free-css-templates.php">Flash Templates</a>
           <div style="clear: both; margin-top: 30px;"> <a target="_blank" rel="nofollow" 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="website template image" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" rel="nofollow" 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="website template image" vspace="8" border="0" /></a> </div>
         </div>
         <div class="cleaner">&nbsp;</div>
       </div>
     </div>
     <div id="footer">
       <p><a href="http://bedavasitem.forum.st">Giriş</a> | <a href="hhttp://csspanel.tr.gg">Products</a> | <a href="http://csspanel.tr.gg">Services</a> | <a href="http://csspanel.tr.gg">S.S.S</a> |<a href="http://csspanel.tr.gg">İletişim</a> </p>
       <p>Copyright &copy; 2oo9 <a href="/Ana-Sayfa.htm"><strong>Sitenin Adı</strong></a> | <a href="http://csspanel.tr.gg">Tüm hakları saklıdır !</a> </p>
     </div>
     <!-- end of footer -->
   </div>
 </div>

table {margin-left: auto;margin-right: auto}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: Verdana, Arial, san-serif;
   font-size: 12px;
   color: #e7eaeb;
   background: #6d6a6b url(http://img.webme.com/pic/d/denemesitemx/bg.jpg) repeat;
 }

 a:link, a:visited { color: #00a1ff; text-decoration: none; font-weight: bold; }
 a:active, a:hover { color: #00a1ff; text-decoration: underline; }

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

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


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

 .cleaner_with_height {
   clear: both;
   width: 100%;
   height: 30px;
   font-size: 1px; 
 }

 .cleaner_with_width {
   float: left;
   width: 20px;
   height: 30px;
   font-size: 1px; 
 }

 #wrapper {
   margin: 0 auto;
   background: url(http://img.webme.com/pic/d/denemesitemx/gradient_bg.jpg) top repeat-x;
 }


 #container1 {
   width: 960px;
   margin: 0 auto;
   padding: 0 10px 10px 10px;
 }

 /* banner */
 #banner {
   clear: both;
   width: 880px;
   height: 250px;
   padding: 0 40px;
   margin: 0 0 5px 0;
   background: url(http://img.webme.com/pic/d/denemesitemx/banner_bg.jpg) no-repeat;
 }

 #banner h1 {
   margin: 0px;
   padding: 0px;
   padding: 80px 0 20px 0; 
   font-size: 50px;
   font-weight: bold;
   color: #fff;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
 }

 #banner p {
   font-size: 30px;
   width: 400px;
   line-height: 30px;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 }

 /* end of banner */

 #content1 {
   clear: both;
   position: relative;
   width: 956px;
   padding: 0 2px;
   background: url(http://img.webme.com/pic/d/denemesitemx/content_middle.jpg) repeat-y;
 }

 #content1 #content_top {
   position: absolute;
   width: 960px;
   height: 10px;
   top: 0;
   left: 0;
   background: url(http://img.webme.com/pic/d/denemesitemx/content_top.jpg) no-repeat;
 }

 #content1 h1 {
   font-size: 24px;
   color: #009dff;
   padding: 0 0 20px 0;
   margin: 0 0 10px 0;
   font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; 
 }

 #content h2 {
   font-size: 20px;
   color: #009dff;
   padding: 0 0 10px 0;
   margin: 0 0 10px 0;
   font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; 
 }

 #content1 h3 {
   font-size: 16px;
   color: #c6ca1d;
   padding: 0 0 5px 30px;
   margin: 0 0 5px 0;
   font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; 
   background: url(http://img.webme.com/pic/d/denemesitemx/list_icon.jpg) top left no-repeat;
 }

 #content img {
   float: left;
   border: 3px solid #221e1f;
   margin: 3px 30px 5px 0;
 }

 #content1 .content_section_01 {
   clear: both;
   width: 876px;
   padding: 40px;
   background-color: #444041;
 }

 .content_section_01 .section_01_left {
   float: left;
   width: 556px;
   padding-right: 40px;
   border-right: 1px solid #333;
 }

 .content_section_01 .section_01_right {
   float: right;
   width: 238px;
 }

 .section_01_left p{
   padding-bottom: 10px;
   text-align: justify;
 }

 .section_01_right p{
   padding-bottom: 5px;
   text-align: justify;
 }

 #content1 .content_section_02 {
   clear: both;
   color: #CCC;
   width: 956px;
   padding: 0px;
   border-top: 1px solid #2c2829;
   background-color: #221e1f;
 }

 .content_section_02 p {
   text-align: left;
 }

 .content_section_02 .section_02_subsection {
   float: left;
   width: 238px;
   margin: 30px 0px;
   padding: 0 40px;
   border-right: 1px solid #332e30;
   background-color: #221e1f; 
 }

 .section_02_subsection li a {
   color: #e7eaeb;
   font-weight: normal;
 }

 .section_02_subsection ul {
   margin: 20px 0 10px 10px;
   padding: 0px;
   list-style: none;
 }

 .section_02_subsection li {
   margin: 0px;
   padding: 0 0 15px 25px;
   background: url(http://img.webme.com/pic/d/denemesitemx/list_icon_02.jpg) top left no-repeat;
 }


 /* footer */
 #footer {
   clear: both;
   width: 960px;
   height: 65px;
   padding: 15px 0 0 0;
   text-align: center;
   color: #888;
   background: url(http://img.webme.com/pic/d/denemesitemx/footer.jpg);
 }

 #footer p {
   padding-bottom: 5px;
 }

 #footer a {
   color: #888;
   font-weight: normal;
 }
 /* end of footer */






 #menu {
   clear: both;
   width: 958px;
   height: 125px;
   padding: 0 1px;
   background: url(http://img.webme.com/pic/d/denemesitemx/top_panel_bg.jpg) no-repeat;
 }

 .indentmenu{
   font: bold 14px Arial;
   height: 58px;
   width: 958px; /*leave this value as is in most cases*/
 }

 .indentmenu ul{
   margin: 0;
   padding: 0;
   height: 58px;
   background: black url(http://img.webme.com/pic/d/denemesitemx/indentbg.gif) center center repeat-x;
 }

 .indentmenu ul li{
 display: inline;
 }

 .indentmenu ul li a{
 float: left;
 color: white; /*text color*/
 width: 158px;
 text-align: center;
 height: 40px;
 padding-top: 18px;
 text-decoration: none;
 border-right: 2px solid #000; /*navy divider between menu items*/
 background: url(http://img.webme.com/pic/d/denemesitemx/menu_bg.jpg) repeat-x;
 outline: none;
 }

 .indentmenu ul li a:visited{
 color: white;
 }

 .indentmenu ul li a.selected, .indentmenu ul li a:hover{
 color: white !important;
 background: black url(http://img.webme.com/pic/d/denemesitemx/menu_hover_bg.jpg) center center;
 }

 .indentmenu li .last{
   border-right: none;
 }

 .tabcontentstyle{ /*style of tab content oontainer*/
 clear: both;
 width:900px; height: 35px; padding: 23px 30px 0 30px;
 color: #fff;
 font-size: 14px;
 }


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

 .tabcontentstyle li{
   margin: 0px;
   padding: 0px;
   display: inline;
 }

 .tabcontentstyle li a {
   font-weight: normal;
   color: #FFF;
   margin: 0px;
   padding: 0 10px 0 5px;
 }

 .tabcontent{
 display:none;
 }

 @media print {
 .tabcontent {
 display:block !important;
 }
 }

http://canavar-03.tr.gg