Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje23-12-2011, 20:50 (UTC)    
Título del mensaje: Css Design [WCSST 30]
Responder citando


Texto Por Encima

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

<title>WCSST 30</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery.jcarousel.pack.js" type="text/javascript" charset="utf-8"></script>

<script src="js/func.js" type="text/javascript" charset="utf-8"></script>

<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />

<!--[if IE 6]><script src="js/png-fix.js" type="text/javascript" charset="utf-8"></script><![endif]-->

</head>

<body>

<!-- START PAGE SOURCE -->

<div id="page">

  <div id="header">

    <div class="left">

      <h1 id="logo"><a href="#">W<span>CSS</span>T 30</a></h1>

      <p class="slogan">free website templates</p>

    </div>

    <div id="navigation">

      <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">About Us</a></li>

        <li><a href="#">Services </a></li>

        <li><a href="#">Solutions</a></li>

        <li><a href="#">Blog</a></li>

        <li class="last"><a href="#">Contacts</a></li>

      </ul>

    </div>

  </div>

  <div id="slider-frame">

    <div id="slider">

      <ul>

        <li>

          <div class="image"> <img src="http://i43.tinypic.com/f4fus5.jpg" alt="" /> </div>

          <div class="caption">

            <h2>Slide Heading</h2>

            <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is an industry's standard for a <a href="#">long</a> period. </p>

          </div>

        </li>

        <li>

          <div class="image"> <img src="http://i43.tinypic.com/f4fus5.jpg" alt="" /> </div>

          <div class="caption">

            <h2>Slide Heading</h2>

            <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is an industry's standard for a <a href="#">long</a> period. </p>

          </div>

        </li>

        <li>

          <div class="image"> <img src="http://i43.tinypic.com/f4fus5.jpg" alt="" /> </div>

          <div class="caption">

            <h2>Slide Heading</h2>

            <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is an industry's standard for a <a href="#">long</a> period. </p>

          </div>

        </li>

        <li>

          <div class="image"> <img src="http://i43.tinypic.com/f4fus5.jpg" alt="" /> </div>

          <div class="caption">

            <h2>Slide Heading</h2>

            <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is an industry's standard for a <a href="#">long</a> period. </p>

          </div>

        </li>

      </ul>

      <div class="slider-controls"> <a href="#">1</a> <a href="#" class="active">2</a> <a href="#">3</a> <a href="#" class="last">4</a> </div>

    </div>

  </div>

  <div id="main">

    <div class="quote">

      <div class="inner">


Texto por Debajo

Código:
 </div>

    </div>

    <div class="box">

       <div class="t">&nbsp;</div>

      <div class="cnt">

        <div class="cols">

          <div class="col">

            <h3>The Company</h3>

            <div class="content">

              <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>

            </div>

            <p><a href="#" class="btn"><span><strong>Read More</strong></span> </a></p>

          </div>

          <div class="col">

            <h3>Our Blog</h3>

            <div class="content">

              <div class="entry">

                <div class="meta"> <a href="#">September 8th, 2010</a> </div>

                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been </p>

              </div>

              <div class="entry last-entry">

                <div class="meta"> <a href="#">September 7th, 2010</a> </div>

                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been </p>

              </div>

            </div>

            <p><a href="#" class="btn"><span><strong>Blog More</strong></span> </a></p>

          </div>

          <div class="col last">

            <h3>Recent Works</h3>

            <div class="content">

              <div class="project-list">

                <ul>

                  <li><a href="#"><img src="http://i39.tinypic.com/34zznz9.jpg" alt="" width="61" height="61" /></a></li>

                  <li><a href="#"><img src="http://i39.tinypic.com/34zznz9.jpg" alt="" width="61" height="61" /></a></li>

                  <li><a href="#"><img src="http://i39.tinypic.com/34zznz9.jpg" alt="" width="61" height="61" /></a></li>

                  <li class="last"><a href="#"><img src="http://i39.tinypic.com/34zznz9.jpg" alt="" width="61" height="61" /></a></li>

                  <li><a href="#"><img src="http://i39.tinypic.com/34zznz9.jpg" alt="" width="61" height="61" /></a></li>

                  <li><a href="#"><img src="http://i39.tinypic.com/34zznz9.jpg" alt="" width="61" height="61" /></a></li>

                  <li><a href="#"><img src="http://i39.tinypic.com/34zznz9.jpg" alt="" width="61" height="61" /></a></li>

                  <li class="last"><a href="#"><img src="http://i39.tinypic.com/34zznz9.jpg" alt="" width="61" height="61" /></a></li>

                </ul>

                <div class="cl">&nbsp;</div>

              </div>

            </div>

            <p><a href="#" class="btn"><span><strong>View All</strong></span> </a></p>

          </div>

          <div class="cl">&nbsp;</div>

        </div>

      </div>

      <div class="b">&nbsp;</div>

    </div>

  </div>

  <div class="footer">

    <p class="lf">Copyright &copy; 2010 <a href="#">SiteName</a> - All Rights Reserved</p>

    <p class="rf"><a href="http://www.webics.es.tl" target="_blank">Adaptado por Web ICS </a>Diseño Por<a href="http://www.free-css.com" target="_blank">Free-CSS</a></p>

    <div style="clear:both;"></div>

  </div>

</div>

<!-- END PAGE SOURCE -->

</body>

</html>



Css Code

Código:
table {margin-left:auto;margin-right:auto;}

#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#title {display: none;}
#nav_container {display:none;}

* {
   padding:0;
   margin:0;
   outline:0;
}
body {
   font-size:12px;
   line-height:1.3;
   font-family:Arial, Helvetica, sans-serif;
   color:#d8cece;
   background:url(http://i42.tinypic.com/2yxitsn.jpg);
   text-align:left;
}
a img {
   border:0;
}
a {
   color:#d8cece;
   text-decoration:none;
   cursor:pointer;
}
a:hover {
   text-decoration:underline;
}
textarea {
   font-family:Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4 {
   color:#fefefe;
}
h1 {
   font-size:23px;
}
h2 {
   font-size:18px;
}
h3 {
   font-size:23px;
}
h4 {
   font-size:16px;
}
.cl, .clear {
   display:block;
   height:0;
   font-size:0;
   line-height:0;
   text-indent:-4000px;
   clear:both;
}
.notext {
   font-size:0;
   line-height:0;
   text-indent:-9000px;
}
.left {
   float:left;
   display:inline;
}
.right {
   float:right;
   display:inline;
}
#page {
   width:962px;
   margin:0 auto;
   min-width:962px;
}
.last {
   margin-right:0 !important;
}
#header {
   height:87px;
}
#header .shell {
   height:87px;
}
h1#logo {
   padding:23px 0 0 3px;
}
h1#logo a {
   color:#ffffff;
   text-decoration:none;
}
.slogan {
   text-align:right;
   color:#cdc6c6;
   font-size:11px;
}
#navigation {
   float:right;
   display:inline;
   height:51px;
   background:url(http://i43.tinypic.com/112hqwj.png) no-repeat 0 0;
   padding-left:13px;
   margin-top:17px;
}
#navigation ul {
   list-style:none;
   height:51px;
   background:url(http://i44.tinypic.com/kedhra.png) no-repeat right 0;
   padding-right:18px;
   padding-left:5px;
   float:left;
}
#navigation li {
   float:left;
   display:inline;
   margin-right:17px;
   height:51px;
}
#navigation li.last {
   margin-right:0;
}
#navigation a {
   color:#fefefe;
   font:normal normal bold 13px/51px Arial, sans-serif;
   text-transform:uppercase;
}
#navigation a:hover, #navigation a.active {
   text-decoration:underline;
}
#slider-frame {
   width:940px;
   height:280px;
   padding:11px;
   background:url(http://i44.tinypic.com/nytft4.png);
}
#slider, #slider .jcarousel-clip {
   width:940px;
   height:280px;
   position:relative;
   overflow:hidden;
}
#slider ul {
   height:280px;
   position:relative;
   overflow:hidden;
   list-style:none;
}
#slider li {
   float:left;
   display:inline;
   width:940px;
   height:280px;
   position:relative;
}
#slider .image {
   position:absolute;
   top:0;
   left:0;
}
#slider .caption {
   position:relative;
   padding:35px 40px 40px 503px;
}
#slider h2 {
   font:normal 29px/1.3 Arial, sans-serif;
   color:#622613;
   padding-bottom:20px;
}
#slider p {
   line-height:18px;
   color:#6b6b6b;
}
#slider a {
   color:#6b6b6b;
   text-decoration:underline;
}
#slider a:hover {
   text-decoration:none;
}
.slider-controls {
   position:absolute;
   top:248px;
   left:833px;
}
.slider-controls a {
   float:left;
   margin-right:5px;
   width:19px;
   height:19px;
   background:#452115;
   font-size:0;
   line-height:0;
   text-indent:-4000px;
}
.slider-controls a.active, .slider-controls a:hover {
   background:#4c3d36;
}
#main {
   padding:10px 0;
   height:100%;
}
h2.title {
   font:italic normal normal 18px/30px 'Georgia', serif;
   padding-bottom:45px;
}
.quote {
   padding:8px 0 18px 55px;
   background:url(http://i43.tinypic.com/350o1ea.png) no-repeat 0 0;
   margin-left:15px;
}
.quote .inner {
   padding:0 35px 0 0;
   background:url(http://i41.tinypic.com/nynnn.jpg) no-repeat right bottom;
   margin-right:15px;
}
.quote h2 {
   padding-bottom:0 !important;
}
.box {
   width:962px;
}
.box .t {
   height:16px;
   background:url(http://i42.tinypic.com/2s7ua3c.png) no-repeat 0 0;
}
.box .b {
   height:16px;
   background:url(http://i44.tinypic.com/o5b7zd.png) no-repeat 0 0;
}
.box .cnt {
   background:url(http://i42.tinypic.com/35d1bv8.png) repeat-y 0 0;
   padding:5px 30px 15px;
   height:100%;
}
.box .col {
   float:left;
   display:inline;
   width:280px;
   margin-right:30px;
}
.box .col .content {
   min-height:150px;
   height:auto !important;
   height:150px;
}
.box h3 {
   padding-bottom:5px;
   margin-bottom:5px;
   border-bottom:1px dotted #907167;
}
.box p {
   font-size:12px;
   line-height:19px;
}
.btn {
   display:inline-block;
}
.btn span, .btn strong {
   float:left;
}
.btn, .btn span, .btn strong {
   height:32px;
   line-height:32px;
}
.btn {
   background:url(http://i41.tinypic.com/2vvt07o.png) no-repeat 0 0;
   padding-left:9px;
}
.btn span {
   background:url(http://i41.tinypic.com/d41z5.png) no-repeat right 0;
   padding-right:9px;
}
.btn strong {
   padding-left:12px;
   background:url(http://i40.tinypic.com/986fl5.jpg) no-repeat 2px center;
}
.entry {
   padding-bottom:10px;
   border-bottom:1px dotted #907167;
   margin-bottom:10px;
}
.last-entry {
   border-bottom:0;
   margin-bottom:0;
}
.meta, .meta a {
   font-size:10px;
   line-height:18px;
   color:#6b6b6b;
}
.project-list {
}
.project-list ul {
   list-style:none;
   padding-top:5px;
}
.project-list li {
   float:left;
   display:inline;
   width:63px;
   height:63px;
   margin:0 6px 8px 0;
   border:1px solid #4c3e37;
}
.footer {
   padding:10px 0 20px;
   height:100%;
   font-size:10px;
}
.footer, .footer a {
   color:#9a6a5b;
   text-decoration:none;
}
.footer p {
   margin:0;
   padding:0;
   line-height:normal;
}
.footer .lf {
   float:left;
}
.footer .rf {
   float:right;
}
↑
Mensaje23-12-2011, 21:21 (UTC)    
Título del mensaje: Re: Css Design [WCSST 30]
Responder citando
Al diseño le faltan librerias amigo,


Cita:
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery.jcarousel.pack.js" type="text/javascript" charset="utf-8"></script>

<script src="js/func.js" type="text/javascript" charset="utf-8"></script>

<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />

<!--[if IE 6]><script src="js/png-fix.js" type="text/javascript" charset="utf-8"></script><![endif]-->


+ Te dejo unos tutoriales para adaptar diseños css:
http://www.paginawebgratis.es/forum/viewtopic.php?t=58634
http://www.paginawebgratis.es/forum/viewtopic.php?t=48903

+ Quitar los códigos innecesarios de los diseños:
http://www.paginawebgratis.es/forum/viewtopic.php?t=50115-

+Recuerda que no debes adaptar diseños Premium. Y dejar los créditos del autor de la plantilla porque si no estarías plagiando el diseño
______________
Es una reina, es una reina, fiesta fiesta. Tito el bambino
↑
Mensaje24-12-2011, 03:31 (UTC)    
Título del mensaje: Re: Css Design [WCSST 30]
Responder citando
Es Un Slider , o un diseño ?
↑
Mensaje24-12-2011, 03:35 (UTC)    
Título del mensaje: Re: Css Design [WCSST 30]
Responder citando
guias-programas escribió:
Es Un Slider , o un diseño ?


Me preguntaba lo mismo
______________
[img[/img:872askjd]
↑
Mensaje24-12-2011, 11:23 (UTC)    
Título del mensaje: Re: Css Design [WCSST 30]
Responder citando
allpwg escribió:
guias-programas escribió:
Es Un Slider , o un diseño ?


Me preguntaba lo mismo


Yo igual lo me lo dudo
______________


Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo
↑
Mensaje24-12-2011, 14:40 (UTC)    
Título del mensaje:
Responder citando
Un diseño pero me salio mal al tomar la foto

aqui teneis una mejor

↑
Mensaje27-01-2012, 21:58 (UTC)    
Título del mensaje: Es un slider?
Responder citando
eso es un slider? necesito un slider ke se mueva solo pero no encuentro :S Este se mueve?
↑
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.