Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje19-01-2012, 01:57 (UTC)    
Título del mensaje: [Css Desing] UberCharged Adactada por By zT[G]aming
Responder citando


Texto por encima de la pagina:

Código:
<style type="text/css">
table[height ="102"] {margin:auto;}
</style>
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>UberCHARGED - A ClanTemplates.com Free TF2 Template</title>
    <link rel="stylesheet" href="main.css" type="text/css" media="all" />
</head>

<body>

<!--
/**
 * Copyright (c) 2008 ClanTemplates.com
 * UBERcharged; a free template by Serenity at ClanTemplates.com
 * No part of this file may be redistributed without written permission
 * Coded by Crazymik3 <mike.hj.rice@gmail.com>
 * http://www.clantemplates.com/pages/Legal
 */
-->

<div id="container">

<div id="container-top">

   <div id="left">
   
       <h1><img src="http://i48.servimg.com/u/f48/16/68/71/52/banner13.jpg" alt="UBERcharged &bull; A Free Release from ClanTemplates.com" /></h1>
       
           <!-- Navigation -->
           <ol id="main">
               <li><a href="#" id="selected">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Roster</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Contact</a></li>
            </ol>
            <div id="left_space"></div>
            <!-- Navigation End -->
           
               <!-- Latest News -->

               <div class="box">
               
                   <h2>Latest News</h2>
                   
                       <ul class="news">
                           <li><span class="name">Introduction</span> - 01/01/08</li>
                            <li><span class="name">Editing Your...</span> - 01/01/08</li>
                            <li><span class="name">Getting Help</span> - 01/01/08</li>
                            <li><span class="name">Introduction</span> - 01/01/08</li>
                            <li><span class="name">Introduction</span> - 01/01/08</li>
                        </ul>

                </div>
                <!-- Latest News End -->
               
                <!-- Recent Match Results -->
                <div class="box">
               
                   <h2>Recent Match Results</h2>
                   
                       <ul>
                              <li>
                                    <span class="name">IGL</span> vs <span class="name">Bane</span>                                  <p><span class="arrow">»</span> R1: 2-0  R2: 3-2  <span class="result">Win!</span></p>

                              </li>
                              <li>
                                    <span class="name">STA</span> vs <span class="name">The Savage</span>                                  <p><span class="arrow">»</span> R1: 2-0  R2: 3-2  <span class="result">Win!</span></p>
                              </li>

                        </ul>
                   
                </div>
                <!-- Recent Match Results End -->
               
                <!-- Upcoming Matches -->
             <div class="box">
               
                   <h2>Upcoming Matches</h2>
                   
                       <ul>
                              <li>

                                    <span class="name">STA</span> vs <span class="name">Decoys of Hostility</span>
                                    <p><span class="arrow">»</span> Tuesday 01/01 @ 9:30 EST</p>
                              </li>
                              <li>
                                    <span class="name">TFL</span> vs <span class="name">Clock Work Orange</span>

                                    <p><span class="arrow">»</span> Monday 01/01 @ 9:00 EST</p>
                              </li>
                        </ul>
                       
                </div>
                <!-- Upcoming Matches End -->
                <div id="box_clear"></div>
                   
                    <!-- Main Content Area -->


                    <div id="content">





Texto por debajo de la pagina:


Código:
</div>
                   
                    </div>
                         
    </div>
   
       <!-- Right Area Begin -->
        <div id="right">
           <div id="top"></div>
               
                <div class="right_box">

                    <h2>Members Area</h2>
                        <form id="login" action="#" method="post">
       
                            <div id="username">
                                <label for="username-field">User: </label>
                                <input id="username-field" type="text" name="username" title="Username" value="" />
                            </div>
                           
                            <div id="password">
                                <label for="password-field">Pass: </label>

                                <input id="password-field" type="password" name="password" title="Password" value="" />
                            </div>
                         
                                <div><input id="submit-button" type="submit" name="submit" value="Login" /></div>
                                <div><input id="reset" type="reset" name="reset" value="Reset" /></div>
                                </form>
                           
                   <div class="r_space"></div>
                </div>
               
                <div class="right_box">
                   <h2>Roster</h2>

                      
                        <!-- IMAGES MUST BE 49px X 49px -->
                        <ul class="roster-top">
                           <li><a href="#"><img src="images/roster/pro1.jpg" alt="noob" /></a></li>
                            <li><a href="#"><img src="images/roster/pro2.jpg" alt="noob" /></a></li>
                            <li><a href="#"><img src="images/roster/madpro.jpg" alt="noob" /></a></li>
                            <li><a href="#"><img src="images/roster/pro3.jpg" alt="noob" /></a></li>
                        </ul>
                       
                        <ul class="roster-top">
                           <li><a href="#"><img src="images/roster/pro7.jpg" alt="noob" /></a></li>

                            <li><a href="#"><img src="images/roster/pro6.jpg" alt="noob" /></a></li>
                            <li><a href="#"><img src="images/roster/pro5.jpg" alt="noob" /></a></li>
                            <li><a href="#"><img src="images/roster/pro4.jpg" alt="noob" /></a></li>
                        </ul>
                       
                       
                      <div class="r_foot"></div>
                </div>
               
                <div class="right_box">
                   <h2>League Records</h2>

                      
                        <p>
                           <span class="name">Stronger Than All - Gold</span><br />
                           <span class="arrow">»</span> Wins: 7   Losses: 1
                          </p>
                       
                        <p>
                           <span class="name">Team Fortress League - 1A</span><br />
                           <span class="arrow">»</span> Wins: 5   Losses: 2
                        </p>

                       
                        <p>
                            <span class="name">Iron Glove League - 8v8</span><br />
                            <span class="arrow">»</span> Wins: 3   Losses: 0
                        </p>
                   
                   <div class="r_foot"></div>
                </div>
               
                <div class="right_box">
                   <h2>Affiliates</h2>

                       
                        <ul class="affiliates">
                           
                            <li><a href="http://www.clantemplates.com"><img src="images/ct_button.jpg" alt="clantemplates.com" longdesc="http://www.clantemplates.com" /></a></li>
                           
                            <li><a href="http://www.thiseffect.com"><img src="images/thisEFFECT.jpg" alt="thiseffect.com" longdesc="http://www.thiseffect.com" /></a></li>
                           
                            <li><a href="http://www.digital-mind.net"><img src="images/digital_mind.jpg" alt="digital-mind.net" longdesc="http://www.digital-mind.net" /></a></li>
                           
                            <li><a href="http://www.crazymik3.com"><img src="images/crazymik3.jpg" alt="crazymik3.com" longdesc="http://www.crazymik3.com" /></a></li>
                        </ul>
                            <div class="affiliate-clear"></div>

                            <div class="affiliate"><a href="#">Show All</a> · <a href="#">Become an Affiliate</a></div>

                           
                  <div class="r_foot"></div>
                </div>
        </div>
       
           <div id="footer">
           
               <ul>
                   <li><a href="#">Home</a> ·</li>
                    <li><a href="#">About</a> ·</li>

                    <li><a href="#">Roster</a> ·</li>
                    <li><a href="#">Forums</a> ·</li>
                    <li><a href="#">Events</a> ·</li>
                    <li><a href="#">Matches</a> ·</li>

                    <li><a href="#">Contact Us</a></li>
                </ul>
          </div>
       
</div>
</div>

</body>
</html>





CSS-Code sin Style Tags:


Código:
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;}

@charset "utf-8";
/**
 * Copyright (c) 2008 ClanTemplates.com
 * UBERcharged; a free template by Serenity at ClanTemplates.com
 * No part of this file may be redistributed without written permission
 * Coded by Crazymik3 <mike.hj.rice@gmail.com>
 * http://www.clantemplates.com/pages/Legal
 **
 *---------->>> GLOBAL <<<-----------*/
html { margin:0; padding:0;}
* { margin: 0; padding: 0; outline: 0;}
body {
   margin:0; padding:0;
   font-family: Verdana, Arial, Tahoma, "Trebuchet MS";
   font-size: 11px;
   color: #ffffff;
   background: #000000;
}
a:link, a:visited { margin: 0; padding: 0; color: #d7d7d7; text-decoration: none; }
a:hover, a:active { margin: 0; padding: 0; color: #ff5200; text-decoration: none; }
/* ---------->>> structure <<<-----------*/
#container {
   margin: 0 auto; padding: 0;
   background: url(http://i48.servimg.com/u/f48/16/68/71/52/bg10.jpg) repeat-y;
   width: 790px;
}
   #container-top {
      margin: 0; padding: 0;
      background: url(.servimg.com/u/f48/16/68/71/52/bg-top10.jpg) no-repeat top;
      width: 790px;
   }
/* ---------->>> left <<<-----------*/
#container #left {
   float: left;
   width: 554px;
   margin: 10px 0 0 5px; padding: 0;
   overflow: hidden;
}
* html #container #left { display:inline; } 
   #container #left h1 {
      padding: 0; margin: 0;
      width:554px; height: 126px;
      overflow: hidden;
      float: left;
   }
/* ---------->>> navigation <<<-----------*/
#container #left ol#main {
   height: 33px; width: 540px;
   background:url(http://i48.servimg.com/u/f48/16/68/71/52/nav_bg11.jpg) no-repeat;
   margin: 0; padding: 0 0 0 14px;
   list-style: none;
   clear:both;
}
   ol#main li {
      margin:0; padding:0;
      float: left;
      font-size: 12px;
   }
      ol#main li a:link, ol#main li a:visited {
         color: #ffffff;
         text-decoration: none;
         font-weight: bold;
         display:block;
         background:url(http://i48.servimg.com/u/f48/16/68/71/52/nav_a10.jpg) no-repeat;
            width: 73px; height: 23px;
            margin: 3px 0 0 1px; padding: 7px 0 0 0;
            text-align: center;
      }
      ol#main li a:hover, ol#main li a:active {
         color: #ff5200;
         text-decoration: none;
         font-weight: bold;
         display:block;
         background:url(http://i48.servimg.com/u/f48/16/68/71/52/nav_a_10.jpg) no-repeat;
            width: 73px; height: 23px;
            margin: 3px 0 0 1px; padding: 7px 0 0 0;
            text-align: center;
      }
         ol#main li a#selected {
            color: #ff8f26;
            text-decoration: none;
            font-weight: bold;
            display:block;
            background:url(http://i48.servimg.com/u/f48/16/68/71/52/nav_a_11.jpg) no-repeat;
               width: 75px; height: 23px;
               margin: 2px 0 0 1px; padding: 8px 0 0 0;
               text-align: center;
         }
   #left_space {
      background: url(http://i48.servimg.com/u/f48/16/68/71/52/spacer11.jpg) no-repeat;
      margin: 0; padding: 0;
      width: 554px; height: 11px;
   }
/* ---------->>> boxes <<<-----------*/
.box {
   float: left;
   width: 184px; height: 105px;
   margin: 0; padding: 0;
   background: url(http://i48.servimg.com/u/f48/16/68/71/52/box_bg10.jpg) repeat-y;
}
   .box h2 {
      font-size: 11px;
      font-weight: bold;
      color: #ff8f25;
      background: url('http://i48.servimg.com/u/f48/16/68/71/52/box_h210.jpg') repeat-x;
      width: 179px /*185*/; height: 19px /*24*/;
      margin: 0; padding: 5px 0 0 5px;
   }
   .box ul li {
      margin: 7px 0 0 13px; padding: 0;
      list-style: none;
      font-size: 9px;
   }
   .box ul.news{
      margin: 4px 0 0 13px; padding: 0;
      list-style: none;
      font-size: 9px;
   }
      .box ul.news li{
         margin: 0px 0 3px 0; padding: 0;
         list-style: none;
         font-size: 9px;
      }
      .box ul li p {
         font-size: 11px;
      }
         p span.arrow {
            font-size: 9px;
            color: #ff5200;
            font-weight: bold;
         }
         .box ul li p span.result {
            color: #ff8f25;
         }
      span.name {
         font-weight:bold;
         color: #ff8f25;
      }
#box_clear {
   background: url(http://i48.servimg.com/u/f48/16/68/71/52/box_cl10.jpg) no-repeat;
   width: 554px; height: 12px;
   margin: 0; padding: 0;
   clear: both;
}
/* ---------->>> content <<<-----------*/
#content {
   width: 554px;
   background: #616161;
   float: left;
   margin: 0; padding: 5px 0 3px 0;
}

.content_box {
   background: url(http://i48.servimg.com/u/f48/16/68/71/52/main_b10.jpg) repeat-y;
   width: 547px;
   float: left; display: inline; /*want a piece of me IE6?*/
   margin: 3px 0 3px 4px; padding: 0;
   border-bottom: 2px solid #505050;
   line-height: normal;
}
   .content_box p {
      margin: 5px 5px 5px 8px;
   }
   .content_box h2    {
      background: url(http://i48.servimg.com/u/f48/16/68/71/52/h2_mai10.jpg) no-repeat;
      width: 534px;/*547*/ height: 19px;/*24*/
      margin: 0; padding: 5px 0 0 13px;
      color: #ff8f25;
      font-weight: bold;
      font-size: 12px;
   }
/* ---------->>> right <<<-----------*/
#right {
   width: 226px;
   margin: 10px 0 0 0; padding: 0;
   background: url(http://i48.servimg.com/u/f48/16/68/71/52/right_10.jpg) repeat-y center;
   float: left;
   overflow: hidden;
}
      #right #top {
         background: url(http://i48.servimg.com/u/f48/16/68/71/52/right_11.jpg) no-repeat;
         margin: 0; padding: 0;
         width: 226px; height: 33px;
      }
   #right h2 {
      background: url(http://i48.servimg.com/u/f48/16/68/71/52/right_12.jpg) no-repeat;
      width: 209px;/*222*/ height: 18px;/*23*/
      margin: 0 0 5px 0; padding: 5px 0 0 13px;
      color: #ff8f25;
      font-weight: bold; clear: both;
      font-size: 12px;
   }
   .right_box {
      background: url(http://i48.servimg.com/u/f48/16/68/71/52/right_13.jpg) no-repeat top center;
      width: 222px;
      margin: 0px 0 0 4px; padding: 0;
   }
      .right_box p {
         padding: 4px 0 6px 15px;
      }
   .r_space {
      background: url(http://i48.servimg.com/u/f48/16/68/71/52/right_14.jpg) no-repeat top center;
      width: 222px; height: 28px;
      margin: 30px 0 0 0; padding: 0;
      clear: both;
   }
   .r_foot {
      background: url(http://i48.servimg.com/u/f48/16/68/71/52/right_15.jpg) no-repeat top center;
      width: 222px; height: 8px;
      overflow: hidden;
      margin: 4px 0 0 0; padding: 0;
      clear: both;
   }
      form#login {
        margin: 0px 0px 8px 10px; padding: 0 0 10px 0;
      }
         span#username,
         span#password {
           margin:0; padding:0;
           font-size: 11px;
           color: #ff8f25;
         }
            input#username-field,
            input#password-field {
                 background: url(http://i48.servimg.com/u/f48/16/68/71/52/field_10.jpg) no-repeat right;
                 width: 165px;/*171*/ height: 17px; /*20*/
                 margin: 0; padding: 3px 3px 0 3px;
                 border: none;
                 color: #cccccc;
                 font-size: 11px;
            }
               input#submit-button {
                  background: url(http://i48.servimg.com/u/f48/16/68/71/52/form-b10.jpg) no-repeat;
                  margin: 8px 0 0 103px; padding: 0;
                  width: 46px; height: 22px;
                  border: none; float: left;
                  color: #ffffff; font-size: 11px;
               }
               input#reset {
                  background: url(http://i48.servimg.com/u/f48/16/68/71/52/form-b10.jpg) no-repeat;
                  margin: 8px 0 0 10px; padding: 0;
                  width: 46px; height: 22px;
                  border: none; float: left;
                  color: #ffffff; font-size: 11px;
               }
   ul.roster-top {
      margin: 0 0 0 0; padding: 0px;
      list-style: none;
   }
      ul.roster-top li {
         margin:0; padding:0;
         float: left;
      }
         ul.roster-top li a:link, ul.roster-top li a:visited {
            display:block;
            background:url(http://i48.servimg.com/u/f48/16/68/71/52/roster10.jpg) no-repeat top right;
               width: 49px; height: 49px;/*51*/
               margin: 0px 0 6px 3.5px; padding: 2px 0 0 2px;
         }
         ul.roster-top li a:hover, ul.roster-top li a:active {
            background:url(http://i48.servimg.com/u/f48/16/68/71/52/roster10.jpg) no-repeat top left;
         }
            ul.roster-top li a img { border: none; margin: 0; padding: 0; }
            
   ul.affiliates {
      margin: 0px 0px 0px 0px; padding: 0 0 0px 0;
      list-style: none;
   }
   .affiliate-clear {
      border: 0;
      clear: both;
      display: block;
      float: none;
      margin: 0;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
   }
      ul.affiliates li {
         margin: 0; padding: 0;
         float: left;
      }
         ul.affiliates li a img {
            display: block;
            margin: 13px 0 0 15px; padding: 0;
            border: none;
         }
      div.affiliate {
         text-align: center;
         font-size: 11px;
         clear: both;
         margin: 0 0 10px 5px; padding: 12px 0 0 0;
      }
         /*div.affiliate a {
            color: #d7d7d7;
            text-decoration: none;
            margin: 0;
         }*/
/* ---------->>> footer <<<-----------*/
#footer {
   width: 780px; height: 29px;/*57*/
   background:url(http://i48.servimg.com/u/f48/16/68/71/52/footer10.jpg) no-repeat top right;
   margin: 0 0 0 5px; padding: 28px 0 0 0;
   clear: both;
}
#footer ul {
   padding: 0; margin: 0 0 0 8px;
   list-style: none;
}
   #footer ul li {
      margin: 0 5px 0 0; padding: 0;
      float: left;
   }
      #footer ul li a:link, #footer ul li a:visited {
         margin: 0px; padding: 0px;
         color: #FFFFFF;
         text-decoration: none;
      }
      .span dot {
         font-weight: bold;
         color: #ff8f25;
      }
      




Nota deberan colocar al crear una pagina esto

Código:
<div class="content_box">
<h2>Nombre de la pagina</h2>

despues el contenido...


y para cerralo esta

</div>



Cualquier duda solo colocarlo aca y les respondere


Ultima edición por singlehack el Mie Ene 18, 2012 9:59 pm; editado 1 vez
↑
Mensaje22-01-2012, 06:20 (UTC)    
Título del mensaje: hola
Responder citando
buen diseño bro me gustaron los colores
↑
Mensaje19-05-2012, 18:43 (UTC)    
Título del mensaje: Re: [Css Desing] UberCharged Adactada por By zT[G]aming
Responder citando
Amigo me gustaria saber como le hago para poder poner mas box en el Costado Derecho Graxias
↑
Mensaje19-05-2012, 22:38 (UTC)    
Título del mensaje: Re: hola
Responder citando
mm Me gusto maso menos :D

+8

PD: Pone el url de donde la adaptaste
↑
Mensaje02-06-2012, 09:54 (UTC)    
Título del mensaje:
Responder citando
adaCCCCCCCCCCCCCCCCCtada ok
______________
Luciano Jmz
Luciano Jmz
↑
Mensaje03-06-2012, 20:23 (UTC)    
Título del mensaje:
Responder citando
tumamalaflogger escribió:
adaCCCCCCCCCCCCCCCCCtada ok


jaja xD
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.