Diseños CSS compatibles en PWG

Ir abajo

Diseños CSS compatibles en PWG

Mensaje por QUIQUEOSUNA el Lun Sep 10, 2012 10:13 pm

Imagen: http://img.webme.com/pic/w/webcp/throughout.png
Texto por encima
Código:

<!-- www.cssplantillas.es.tl --><script type="text/javascript" src="http://recursosweb.comoj.com/cs/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://recursosweb.comoj.com/cs/js/jquery.slidertron-0.1.js"></script>
<div id="logo">
   <h1>Titulo de tu web!</h1>
   <p>Tu slogan</p>
</div><div id="head"><div id="menu"><ul>
         <li><a href="URL" class="first">Link's 1</a></li>
         <li class="current_page_item"><a href="URL">Link's 2</a></li>
         <li><a href="URL">Link's 3</a></li>
         <li><a href="URL">Link's 4</a></li>
         <li><a href="URL">Link's 5</a></li>
</ul></div><div id="search">
<form method="get" action=""><fieldset>
<input type="text" name="s" id="search-text" size="15" />
</fieldset></form></div></div><hr />
<div id="slideshow">
<!-- Galeria -->
<div id="foobar">
<div id="col1"><a href="#" class="previous"> </a></div>
<div id="col2"><div class="viewer"><div class="reel">
<div class="slide"><img src="URL DE TU IMAGEN 1" width="726" height="335" /><span>DESCRIPCIÓN IMAGEN 1</span></div>
<div class="slide"><img src="URL DE TU IMAGEN 2" width="726" height="335" /><span>DESCRIPCIÓN IMAGEN 2</span></div>
<div class="slide"><img src="URL DE TU IMAGEN 3" width="726" height="335" /><span>DESCRIPCIÓN IMAGEN 3</span></div>
</div></div></div>
<div id="col3"><a href="#" class="next"> </a></div></div>
<script type="text/javascript">
$('#foobar').slidertron({
viewerSelector:         '.viewer',
reelSelector:         '.viewer .reel',
slidesSelector:         '.viewer .reel .slide',
navPreviousSelector:   '.previous',
navNextSelector:      '.next',
navFirstSelector:      '.first',
navLastSe
lector:      '.last'
});</script></div>
<!-- Fin galeria -->
<div id="page"><div id="page-bgtop">
<div id="conta">
Por debajo:
Código:

<!-- www.cssplantillas.es.tl --></div><div id="sidebar"><ul><li>
   <h2>Box de contenido</h2><p>
Pon aqui lo que tu quieras!, imagenes, videos, texto, etc.
</p></li><li>
   <h2>Menu vertical 1</h2><ul>
   <li><a href="URL">Link's 1</a></li>
   <li><a href="URL">Link's 2</a></li>
   <li><a href="URL">Link's 3</a></li>
   <li><a href="URL">Link's 4</a></li>
   <li><a href="URL">Link's 5</a></li>
   <li><a href="URL">Link's 6</a></li>
   <li><a href="URL">Link's 7</a></li>
   <li><a href="URL">Link's 8</a></li>
</ul></li><li>
   <h2>Menu vertical 2</h2><ul>
   <li><a href="URL">Link's 1</a></li>
   <li><a href="URL">Link's 2</a></li>
   <li><a href="URL">Link's 3</a></li>
   <li><a href="URL">Link's 4</a></li>
   <li><a href="URL">Link's 5</a></li>
   <li><a hre
f="URL">Link's 6</a></li>
   <li><a href="URL">Link's 7</a></li>
   <li><a href="URL">Link's 8</a></li>
</ul></li></ul></div>
<div style="clear: both;"></div></div></div>
<div id="footer"><p>
Copyright (c) Tu sitio web. Todos los derechos reservados. Diseño por: <a href="http://freecsstemplates.org">Free CSS Templates</a> adaptacion por: <a href="http://cssplantillas.es.tl">CssPlantillas</a>.
</p></div>
Css sin stile tags:
Código:

#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;}
#header {display: none;}
#title {display: none;}
#nav_container {display:none;}
table {margin-left:auto;margin-right:auto;}
/* Nombre: Throughout
Diseño por: http://freecsstemplates.org
Adaptación por: http://cssplantillas.es.tl */
body {margin: 0px;padding: 0;
background: #4C9BCD url("http://img.webme.com/pic/w/webcp/throughout01.jpg") repeat-x left top;
font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #919191;}
h1, h2, h3 {margin: 0;text-transform: uppercase;font-weight: normal;color: #549900;}
h1 { font-size: 44px; }
h2 { font-size: 18px; }
h3 { }
p, ul, ol {margin-top: 0;line-height: 240%;text-align: justify;}
ul, ol { }
blockquote { }
a { color: #4999CB; }
a:hover {text-decoration: none; }
a img {border: none;}
img.left {float: left;margin: 7px 30px 0 0;}
img.right {float: right;margin: 7px 0 0 30px;}
hr { display: none; }
.list1 {}
.list1 li {float: left;line-height: normal;}
.list1 li img {margin: 0 30px 30px 0;}
.list1 li.alt img {margin-right: 0;}
#slideshow {width: 940px;height: 393px;margin: 0px auto;padding: 57px 0px 0px 0px;
background: url("http://img.webme.com/pic/w/webcp/throughout03.jpg") no-repeat left top;}
#foobar {position: relative;}
#foobar .navigation {position: absolute;display: block;z-index: 100;color: #ffffff;
bottom: 0px;right: 0px;margin: 10px;padding: 10px;background-color: #303030;opacity: 0.75;}
#foobar .navigation a {color: #ffffff;text-decoration: none;outline: none;}
#foobar .viewer {width: 726px;height: 336px;}
#foobar .viewer .reel .slide {position: relative;width: 726px;height: 336px;}
#foobar .viewer .reel .slide span {   position: absolute;display: block;width: 726px;
opacity: 0.30;padding: 15px;background-color: #FFFFFF;color: #000000;bottom: 0px;
left: 0px;font-size: 18px;}
#foobar .viewer-wrapper {float: left;width: 726px;height: 336px;background: red;}
.arrow-left {background: blue;width: 107px;float: left;}
.arrow-right {background: green;width: 100px;float: right;}
#col1 {width: 107px;float: left;}
#col1 a {outline: none;display: block;width: 77px;height: 206px;
background: url("http://img.webme.com/pic/w/webcp/throughout05.jpg") no-repeat 30px 130px;
text-decoration: none;}
#col2 {float: left;width: 733px;}
#col3 a {float: right;outline: none;width: 87px;height: 206px;text-decoration: none;
background: url("http://img.webme.com/pic/w/webcp/throughout06.jpg") no-repeat 10px 130px;}
#wrapper {}
#head {width: 940px;height: 68px;margin: 0 auto;
background: url("http://img.webme.com/pic/w/webcp/throughout02.jpg") no-repeat left top;}
#menu {float: left;width: 500px;height: 68px;}
#menu ul {margin: 0;padding: 15px 0px 0px 5px;list-style: none;line-height: normal;}
#menu li {display: block;float: left;}
#menu a {display: block;float: left;height: 32px;padding: 10px 20px 0px 20px;letter-spacing: -1px;
text-decoration: none;text-align: center;text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;font-size: 18px;font-weight: normal;color: #FFFFFF;}
#menu a:hover { text-decoration: none; }
#menu .current_page_item a {}
#menu .first {}
#search {float: right;padding: 10px 10px 0px 0px;}
#search form {float: right;margin: 0;padding: 4px 0px 0 0;}
#search fieldset {margin: 0;padding: 0;border: none;}
#search input {float: left;font: 12px Arial, Helvetica, sans-serif;}
#search-text {width: 170px;margin-top: 8px;margin-left: 60px;margin-right: 40px;
padding: 6px 0 0 7px;border: none;background: none;font-family: Arial, Helvetica, sans-serif;color: #838383;}
#search-submit {width: 82px;height: 28px;margin-left: 10px;padding: 0px 5px;
background: url("http://img.webme.com/pic/w/webcp/throughout03.jpg") no-repeat left top;
border: none;text-indent: -9999px;color: #FFFFFF;}
#page {width: 880px;margin: 0px auto;padding: 40px 30px 0px 30px;background: #222222;}
#page-bgtop {}
#logo {width: 920px;height: 45px;margin: 0 auto;
padding-top: 5px;padding-left: 20px;}
#logo h1, #logo p {float: left;margin: 0px;line-height: normal;text-transform: lowercase;
font-weight: normal;color: #FFFFFF;}
#logo p {padding: 13px 0px 0px 5px;text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;color: #FFFFFF;}
#logo h1 {letter-spacing: -1px;font-size: 30px;}
#logo a {text-decoration: none;color: #FFFFFF;}
#banner {padding-bottom: 20px;}
#conta {float: left;width: 600px;}
#sidebar {float: right;width: 240px;font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
#sidebar ul {margin: 0;padding: 0;list-style: none;line-height: normal;}
#sidebar li {margin-bottom: 30px;padding: 0 0 10px 0px;background: #1E1E1E;}
#sidebar li ul {margin: 0px 0px;}
#sidebar li li {margin: 0px;padding: 8px 0px 8px 0px;border-bottom: 1px solid #222222;}
#sidebar li li a {padding: 0px 20px;font-weight: normal;}
#sidebar li li a:hover {color: #666666;}
#sidebar p {margin: 0;padding: 0px 14px;}
#sidebar h2 {height: 30px;margin: 0 0 10px 0px;padding: 6px 20px 2px 20px;
background: #161616;text-transform: capitalize;font-size: 18px;
font-weight: normal;color: #4999CB;}
#sidebar p {line-height: 200%;}
#sidebar a {text-align: left;text-decoration: none;font-weight: bold;color: #666666;}
#calendar #today {background: #24130F;}
#footer {width: 940px;height: 120px;margin: 0 auto;padding: 0;
background: url("http://img.webme.com/pic/w/webcp/throughout09.jpg") no-repeat left top;}
#footer p {margin: 0;padding: 30px 0px 0px 30px;text-align: center;
text-transform: uppercase;line-height: normal;font-size: 10px;}
#footer a {}
Ese diseño contenia una genial galeria que estava visible en cualquiere momento, tengo una web en la que podesis ver claramente el diseño, porque es ese» http://quiqueosuna4.es.tl/
Este diseño es compatible en PWG Question
Proximamente mas plantillas
avatar
QUIQUEOSUNA
Moderador
Moderador

Mensajes Mensajes : 5
MCoins MCoins : 1066627
Gracias Gracias : 0
Advertencia Advertencia : 100%


Ver perfil de usuario

Volver arriba Ir abajo

Re: Diseños CSS compatibles en PWG

Mensaje por Deryan el Lun Sep 10, 2012 10:16 pm

Buen aporte recuerda siempre dejar los creditos y dejar la fuente.
PD:Edita el tema y pon la fuente
avatar
Deryan
Administrador
Administrador

Mensajes Mensajes : 134
MCoins MCoins : 1070225
Gracias Gracias : 8
Advertencia Advertencia : 100%


Ver perfil de usuario http://mundocodigos.foroactivo.mx

Volver arriba Ir abajo

Re: Diseños CSS compatibles en PWG

Mensaje por Invitado el Dom Oct 07, 2012 6:03 pm

Por favor no escribas el Titulo en Mayuscula.Por ser la primera vez,
te lo modifique yo. Por favor lee las Barras de Advertencia Para no tener problemas.

Invitado
Invitado


Volver arriba Ir abajo

Re: Diseños CSS compatibles en PWG

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.