Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje07-09-2011, 01:58 (UTC)    
Título del mensaje: [CSS] Widget Template

Código:
<script type="text/javascript" src="http://i2.x-demos.tk/widget/jquery.js"></script>
<script type="text/javascript" src="http://i2.x-demos.tk/widget/slider.js"></script>
<script type="text/javascript" src="http://i2.x-demos.tk/widget/superfish.js"></script>
<script type="text/javascript" src="http://i2.x-demos.tk/widget/custom.js"></script>
</head>


<body class="noheader">
<div id="container">
   <div id="header">
       <h1><a href="/">Tu<strong>Sitio</strong></a></h1>
        <h2>Adaptado por: www.xmies.tk</h2>
        <div class="clear"></div>
    </div>
    <div id="nav">
       <ul class="sf-menu dropdown">
            <li class="selected"><a href="#">Home</a></li>
           <li><a class="has_submenu" href="#">link</a>
               <ul>
                   <li class="selected"><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
            <li><a class="has_submenu" href="#">link</a>
               <ul>
                   <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </div>
       
    <div id="body">           
      <div id="content">
            <div class="box">
            <h2>Titulo</h2>
                <p>


Código:
</p>
            </div>
        </div>
       
        <div class="sidebar">
            <ul>   
               <li>
                    <h4><span>BOX <strong>1</strong></span></h4>
                    <ul class="blocklist">
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </li>
               
                <li>
                    <h4><span>BOX <strong>2</strong></span></h4>
                    <ul>
                        <li>
                           <p style="margin: 0;">Aqui creo que deberias de poner un texto aca bien chingon xD.</p>
                        </li>
                    </ul>
                </li>
               
                <li>
                    <h4 class="h4"><span>BOX <strong>3</strong></span></h4>
                    <ul>
                        <li><a href="#" title="Titulo"><strong>Nombre link</strong></a> - Descripcion del link</li>                        <li><a href="#" title="Titulo"><strong>Nombre link</strong></a> - Descripcion del link</li>
                        <li><a href="#" title="Titulo"><strong>Nombre link</strong></a> - Descripcion del link</li>
                    </ul>
                </li>
               
            </ul>
        </div>
       <div class="clear"></div>
    </div>
</div>
 <div id="footer">
      <div class="footer-content">

        <div class="footer-box">
            <h4>Footer Box 1</h4>

            <p>
                Creo que aqui deberias de poner algo acerca de tu sitio.
            </p>
        </div>
       
        <div class="footer-box">
            <h4>Footer Box 2</h4>

            <ul>
              <li><a href="#">link.</a></li>
              <li><a href="#">link.</a></li>
              <li><a href="#">link.</a></li>
              <li><a href="#">link.</a></li>
              <li><a href="#">link.</a></li>
            </ul>
        </div>
       
        <div class="footer-box">

            <h4>Footer Box 3</h4>
            <ul>
                <li><a href="#" title="Titulo">Nombre del link</a></li>
                <li><a href="#" title="Titulo">Nombre del link</a></li>
                <li><a href="#" title="Titulo">Nombre del link</a></li>
                <li><a href="#" title="Titulo">Nombre del link</a></li>
                <li><a href="#" title="Titulo">Nombre del link</a></li>
            </ul>   
        </div>
       
        <div class="footer-box end-footer-box">
            <h4>Search our site</h4>

            <form action="#" method="get">
                <p>
                    <input type="text" id="searchquery" size="18" name="searchterm" />

                    <input type="submit" id="searchbutton" value="Search" class="formbutton" />
                </p>
            </form>
        </div>     
        <div class="clear"></div>
    </div>
    <div id="footer-links">
            <p>&copy; Tu Sitio 2011. Design by: <a href="http://www.spyka.net">Free CSS Templates</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a> | <a href="http://www.xmies.tk">Adaptado por XmIeS</a></p>
    </div> 
</div>
</body>


Código:
body {
   background: #FFF url('http://img.webme.com/pic/x/xmies0/body-single.png') repeat-x scroll top left;
   margin:0;
   padding:0;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 13px;
   color: #666;
}

body.homepage {
   background: #FFF url('http://img.webme.com/pic/x/xmies0/body.png') repeat-x scroll top left;
}

body.noheader {
   background: #FFF url('http://img.webme.com/pic/x/xmies0/body-noheader.png') repeat-x scroll top left;
}

* {
   margin:0;
   padding:0;
}

/** element defaults **/
table {
   width: 100%;
   text-align: left;
}

th, td {
   padding: 10px 10px;
}

th {
   color: #fff;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow:-1px -1px #CE5709;
   background: #F87B27 url('http://img.webme.com/pic/x/xmies0/frontpage-link.png') repeat-x scroll top left;
}

td {
   border-bottom: 1px solid #ccc;
}

code, blockquote {
   display: block;
   border-left: 5px solid #222;
   padding: 10px;
   margin-bottom: 20px;
}
code {
   background-color: #222;
   color:#ccc;
   border: none;
}
blockquote {
   border-left: 5px solid #222;
}

blockquote p {
   font-style: italic;
   font-family: Georgia, "Times New Roman", Times, serif;
   margin: 0;
   color: #333;
   height: 1%;
}

p {
   line-height: 1.9em;
   margin-bottom: 20px;
   font-size: 12px;
}

a {
   color: #F97B27;
}

a:hover {
   color: #E5620A;
}

a:focus {
   outline: none;
}

fieldset {
   display: block;
   border: none;
   border-top: 1px solid #ccc;
}

fieldset legend {
   font-weight: bold;
   font-size: 13px;
   padding-right: 10px;
   color: #333;
}

fieldset form {
   padding-top: 15px;
}

fieldset p label {
   float: left;
   width: 150px;
}

form input, form select, form textarea {
   padding: 5px;
   color: #333333;
   border: 1px solid #ddd;
   border-right:1px solid #ccc;
   border-bottom:1px solid #ccc;
   background-color:#fff;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
}

form input.formbutton {
   color: #ffffff;
   font-weight: bold;
   padding: 6px 8px;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow:-1px -1px #CE5709;
   background: #F87B27 url('http://img.webme.com/pic/x/xmies0/frontpage-link.png') repeat-x scroll top left;
   border: none;
   width: auto;
   overflow: visible;
}

fieldset form input.formbutton {
   margin-left: 150px;
}

form.searchform p {
   margin: 5px 0;
}


span.required {
   color: #ff0000;
}

h1 {
   color: #000;
   font-size: 35px;
   font-family: Arial, Helvetica, sans-serif;
   padding: 0;
   background: none;
   border-bottom: none;
   text-transform: none;
   line-height: 1.0em;
   padding: 0 0 5px;
}

#body h1 {
   color: #D5570A;
}

h1 strong {
   font-weight: normal;
}

h2 {
   color: #000;
   font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
   font-size: 30px;
   letter-spacing: -0.25px;
   font-weight: bold;
   padding: 0 0 5px;
   margin: 0;
}

#body h2 {
   font-weight: normal;
}

h3 {
   color: #555;
   font-size: 18px;
   font-weight: normal;
   margin-bottom: 10px;
   font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
}

h4 {
   padding-bottom: 10px;
   font-size: 15px;
   color: #EE7524;
}

h5 {
   padding-bottom: 10px;
   font-size: 13px;
   color: #999;
}

ul, ol {
   margin: 0 0 35px 35px;
}

li {
   padding-bottom: 5px;
}

li ol, li ul {
   font-size: 1.0em;
   margin-bottom: 0;
   padding-top: 5px;
}

ul.styledlist {
   list-style: none;
   margin-left: 20px;

}

ul.styledlist li {
   background: #fff url('http://img.webme.com/pic/x/xmies0/list-item.gif') no-repeat scroll left center;
   padding-left: 15px;
   padding-bottom: 0;
   margin-bottom: 5px;
}


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

#header {
   padding: 0px 15px;
   margin: 0 auto;
   height: 111px;
}

#header h1 {
   padding: 0;
}
#header h1 a {
   color: #eee;
   padding-top: 40px;
   font-size: 40px;
   font-weight: normal;
   font-family: Lucida,"Lucida Sans",Geneva,Arial,sans-serif;
   text-decoration: none;
   letter-spacing: -3px;
   float: left;
   text-shadow: 1px 1px #111;
}

#header h1 a strong {
   color: #F87B27;
}

#header h2 {
   color: #999;
   float: left;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 13px;
   font-weight: bold;
   letter-spacing: 0;
   margin-left: 5px;
   margin-top: 50px;
   padding-bottom: 0;
   padding-left: 4px;
}

#nav {
   height: 50px;
   width: 960px;
   position: relative;
   z-index: 999;
}

#nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
   height: 50px;
}

#nav ul ul {
   padding-top: 0;
}

#nav ul li {
   display: block;
   float: left;
}

#nav ul li a {
   display: block;
   color: #999;
   display: block;
   border-top: 3px solid #333;
   font-size: 14px;
   font-weight: bold;
   float: left;
   letter-spacing: 0.5px;
   font-family: Arial, Helvetica, sans-serif;
   padding: 17px 15px 17px;
   text-decoration: none;
}

#nav ul li a.has_submenu {
   background: transparent url('http://img.webme.com/pic/x/xmies0/submenu-item.gif') no-repeat scroll right center;
   padding-right: 30px;
}

#nav ul li a.has_submenu:hover, #nav ul li.sfHover a.has_submenu {
   background-image: url('http://img.webme.com/pic/x/xmies0/submenu-item-hover.gif');
}


#nav ul ul li a {
   float: none;
   width: 170px;
}

#nav ul li.selected li a {
   text-decoration: none;
}

#nav ul li.selected a, #nav ul li.selected a:hover, #nav ul li.selected li.selected a  {
   color: #fff;
   border-top: 3px solid #F87B27;
}

#nav ul ul li.selected a, #nav ul ul li.selected a:hover {
   text-decoration: underline;
}

#nav ul li a:hover, #nav ul li.sfHover a, #nav ul ul a {
   color: #fff;
   background-color: #F87B27;
   border-top: 3px solid #F87B27;
}

#nav ul li li a:hover, #nav ul li.sfHover li a:hover {
   border-top: 3px solid #fff;
   background-color: #FBA770;
}

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
   margin:         0;
   padding:      0;
   list-style:      none;
}
.sf-menu {
   line-height:   1.0;
}
.sf-menu ul {
   position:      absolute;
   top:         -999em;
   width:         200px; /* left offset of submenus need to match (see below) */
   margin-top:    10px;
   padding-top:   0;
}
.sf-menu ul li {
   width:         100%;
}
.sf-menu li:hover {
   visibility:      inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
   float:         left;
   position:      relative;
}
.sf-menu a {
   display:      block;
   position:      relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
   left:         0;
   top:         49px; /* match top ul list item height */
   z-index:      99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
   top:         -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
   left:         200px; /* match ul width */
   top:         0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
   top:         -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
   left:         10em; /* match ul width */
   top:         0;
}


/* front page slider styles */
div#jFlowSlide {
   margin:0 auto;
}
div#slides-static {
   padding: 40px 55px 0;
   width: 850px;
}
div.slides-container {
   height: 271px;
   overflow: hidden;
   width: 960px;
   padding-top: 40px;
}
div.slides-container div#jFlowSlide {
   height: 315px;
}
div.slides-container div.jFlowSlideContainer img {
   margin:auto;
}
div.slides-container div.jFlowSlideContainer div {
}
div.slides-container div.jFlowSlideContainer div.slide-image {
   float:left;
   width: 370px;
   padding-top: 0px;
}
span.jFlowPrev, span.jFlowNext {
   background-image:url('http://img.webme.com/pic/x/xmies0/slide-prev.gif');
   background-repeat:no-repeat;
   display:block;
   height:41px;
   width:24px;
   float:left;
   margin:0;
   cursor:pointer;
}
span.jFlowPrev span, span.jFlowNext span { display:none; }
span.jFlowNext {
   background-image:url('http://img.webme.com/pic/x/xmies0/slide-next.gif');
   float:right;
}
div.slides-container div.controls {
   position:relative;
   top:-220px;
   width:960px;
   margin:0 auto;
}
div.slides-container p {
   padding-top: 10px;
   color: #eee;
}
div.slides-container a {
   color: #eee;
}
div.slides-container h2, div#sub-header h2 {
   font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
   color: #fff;
   text-shadow: 1px 1px #21441D;
   font-weight: normal;
}
div.slide-text {
   padding-top: 10px;
}
p.frontpage-button a {
   padding: 17px 20px;
   color: #fff;
   font-size: 14px;
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow:-1px -1px #CE5709;
   background: #F87B27 url('http://img.webme.com/pic/x/xmies0/frontpage-link.png') repeat-x scroll top left;
   border: 1px solid #000;
}
p.frontpage-button a:hover {
   background: #E5620A none;
   color: #fff;
}
.hidden { display:none;  }

div#sub-header {
   height: 101px;
}

div#sub-header h2 {
   padding-top: 27px;
}

#body {
   background: none;
   margin:0 auto;
   padding: 20px 0 0;
   width: 960px;
}

#content {
   float: left;
   width: 635px;
}

.box {
   margin: 0;
   padding: 0 5px;
   background-color: #fff;
}

.sidebar {
   width: 280px;
   padding: 25px 0 0;
   float: right;
}


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

.sidebar ul li {
   margin-bottom: 20px;
   line-height: 1.9em;
}

.sidebar li ul {
   padding: 10px;
}

.sidebar li ul li {
   display: block;
   border-top: none;
   padding: 6px 2px;
   margin: 0;
   line-height: 1.5em;
   font-size: 13px;
   border: none;
}

.sidebar li ul li a {
   font-weight: normal;
   color: #666;
}

.sidebar li ul li a:hover {
   color: #F87B27;
}

.sidebar li ul.blocklist {
   padding: 0;
}

.sidebar li ul.blocklist li {
   padding: 0;
   display: inline;
}

.sidebar li ul.blocklist li a {
   display: block;
   border-bottom:1px solid #e0e0e0;
   padding: 8px 10px;
   text-decoration: none;
   font-weight: bold;
   text-transform: uppercase;
   font-family: Lucida,"Lucida Sans",Geneva,Arial,sans-serif;
   font-size: 12px;
}

.sidebar li ul.blocklist li a:hover {
   color: #F87B27;
}



.sidebar h4  {
   color: #333;
   font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
   font-size: 16px;
   text-transform:uppercase;
   margin: 0;
   line-height: 1.9em;
   padding: 0px 0px 15px 5px;
   font-weight: bold;
   background: transparent url('http://img.webme.com/pic/x/xmies0/h4.png') no-repeat scroll left bottom;
}

.sidebar h4 strong {
   color: #F87B27;
}

.clear {
   clear: both;
}

#footer {
   margin:0 auto;
   background: #000 url('http://img.webme.com/pic/x/xmies0/footer.jpg') repeat-x scroll bottom left;
   padding: 30px 5px 0;
}

.footer-content {
   width: 960px;
   margin: 0 auto;
   display: block;
   padding-bottom: 30px;
}

#footer a {
   color: #999;
   text-decoration: underline;
}

#footer h4 {
   color: #ccc;
   font-size: 18px;
   font-weight: normal;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
}

#footer p {
   text-align: left;
   color: #999;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0;
}

#footer form {
   margin: 0;
   padding: 0;
}

#footer form input#searchbutton {
   margin: 0;
   border-bottom: none;
   overflow:visible;
   width:auto;
}

#footer form input#searchquery {
   background-color: #333;
   color: #fff;
   font-family: Arial, Helvetica, sans-serif;
   border: none;
   padding: 6px 3px;
}

#footer ul {
   margin: 0;
   padding: 0;
   list-style: none;
   border-top: 1px solid #222;
}

#footer ul li {
   padding: 0;
}

#footer ul li a  {
   display: inline-block; /* for IE 6, 7 */
}

#footer ul li a {
   text-decoration: none;
   display: block;
   font-size: 11px;
   padding: 7px 10px;
   border-bottom: 1px solid #222;
}

#footer ul li a:hover {
   background-color: #111;
}

.footer-box {
   width: 220px;
   margin-right: 26px;
   float: left;
}

.end-footer-box {
   margin-right: 0;
}

#footer-links {
   background-color: #000;
   color: #ccc;
   padding: 5px;
}
div#footer-links p {
   text-align: right;
   padding: 0;
   margin: 0 auto;
   font-size: 10px;
   width: 960px;
   display: block;
}
#footer-links a {
   color: #eee;
   font-weight: bold;
   text-decoration: underline;
}

______________

FB: /CarlosLP01 | @CarlosLP0 | Mail: JuanLopez2696@Facebook.com


Ultima edición por xmies0 el Lun Sep 26, 2011 10:06 pm; editado 2 veces
Mensaje20-11-2011, 18:51 (UTC)    
Título del mensaje:

Esta Bueno ese Diseño

Mi Nota : 10/10

Saludos!

Super Mari o World SNES
______________


Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo


Ultima edición por supermarioworldsnes el Dom Nov 20, 2011 2:52 pm; editado 2 veces
Mensaje20-11-2011, 18:58 (UTC)    
Título del mensaje:

muy bueno el diseño,saludos
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje20-11-2011, 23:40 (UTC)    
Título del mensaje: n.n

Super aporte
______________
Tonbox la nueva ayuda web entra yaaa
Mensaje21-11-2011, 14:14 (UTC)    
Título del mensaje: Re: n.n

Buen diseño , me gusto , pero los menus un poco feos
Mensaje27-11-2011, 00:12 (UTC)    
Título del mensaje: jaja

me gusto el diseño pero con algunas Dificultades
______________
Mensaje27-11-2011, 12:36 (UTC)    
Título del mensaje:

buen diseño y buen aporte,saludos
______________
SnaKe

Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group