Varios 1

Contenidos Galería PhotoSlide Menú Circular Otro Estilo a tus links Enumerar página Pestañas en tu web Texto con sombra Menú Horizontal Desplegable

Galería PhotoSlide:
<link rel="stylesheet" media="all" type="text/css" href="http://img44.xooimage.com/files/3/3/4/photoslide-ef1969.css" /> <script src="http://img4.xooimage.com/files/a/9/3/jquery-b17397.js" type="text/javascript"></script> <script src="http://img26.xooimage.com/files/7/9/a/photo-slide-ef1953.js" type="text/javascript"></script> <div id="broder"> <div id="slide"> <img id="loading" src="photo-slide/loading.gif" _fcksavedurl="photo-slide/loading.gif" alt="" /> <a id="p1" href="#url" _fcksavedurl="#url"><img src='URL IMAGEN 1' _fcksavedurl='URL IMAGEN 1' /></a> <a id="p2" href="#url" _fcksavedurl="#url"><img src='URL IMAGEN 1' _fcksavedurl='URL IMAGEN 1' /></a> <a id="p3" href="#url" _fcksavedurl="#url"><img src='URL IMAGEN 1' _fcksavedurl='URL IMAGEN 1' /></a> <a id="p4" href="#url" _fcksavedurl="#url"><img src='URL IMAGEN 1' _fcksavedurl='URL IMAGEN 1' /></a> <a id="p5" href="#url" _fcksavedurl="#url"><img src='URL IMAGEN 1' _fcksavedurl='URL IMAGEN 1' /></a> </div> <div id="previous"><b>Anterior</b></div> <div id="next"><b>Siguiente</b></div> <div id="buttons"> <div id="b1"><b>1</b></div> <div id="b2"><b>2</b></div> <div id="b3"><b>3</b></div> <div id="b4"><b>4</b></div> <div id="b5"><b>5</b></div> </div> </script> </div>

Menu Circular
Código CSS
#info {padding-bottom:100px;} /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/circular.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(http://img40.xooimage.com/files/6/c/3/background-de5f16.gif) no-repeat;} #circularMenu li {display:block; width:60px; height:60px; position:absolute;} #circularMenu li.home {left:120px; top:4px; background:url(http://img22.xooimage.com/files/b/1/5/home-de5f20.gif) no-repeat center center;} #circularMenu li.chat {left:200px; top:40px; background:url(http://img40.xooimage.com/files/5/d/0/chat-de5f30.gif) no-repeat center center;} #circularMenu li.upload {left:35px; top:40px; background:url(http://img28.xooimage.com/files/2/6/9/photo-de5f3c.gif) no-repeat center center;} #circularMenu li.email {left:230px; top:115px; background:url(http://img26.xooimage.com/files/b/6/c/email-de5f42.gif) no-repeat center center;} #circularMenu li.address {left:5px; top:115px; background:url(http://img22.xooimage.com/files/f/4/0/address-de5f4c.gif) no-repeat center center;} #circularMenu li.shop {left:200px; top:190px; background:url(http://img48.xooimage.com/files/d/7/d/shop-de5f59.gif) no-repeat center center;} #circularMenu li.search {left:35px; top:190px; background:url(http://img48.xooimage.com/files/3/7/2/search-de5f63.gif) no-repeat center center;} #circularMenu li.delivery {left:120px; top:225px; background:url(http://img24.xooimage.com/files/8/0/b/delivery-de5f79.gif) no-repeat center center;} #circularMenu li a b {display:none;} #circularMenu li a {display:block; width:60px; height:60px; text-align:center;} #circularMenu li a:hover {background:url(http://www.cssplay.co.uk/menus/circular/circle.gif); text-decoration:none; font-family:georgia, serif;} #circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;} #circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;} #circularMenu li.home a:hover b {left:-22px; top:100px;} #circularMenu li.chat a:hover b {left:-102px; top:64px;} #circularMenu li.upload a:hover b {left:63px; top:64px;} #circularMenu li.email a:hover b {left:-132px; top:-11px;} #circularMenu li.address a:hover b {left:93px; top:-11px;} #circularMenu li.shop a:hover b {left:-102px; top:-87px;} #circularMenu li.search a:hover b {left:63px; top:-87px;} #circularMenu li.delivery a:hover b {left:-22px; top:-121px;}
Código para poner Menú Circular
<div id="circularMenu"> <li class="home"><a href="inicio.htm" _fcksavedurl="inicio.htm"><b>Inicio<br><span>Ve Al Inicio</span></b></a></li> <li class="chat"><a href="gracias.htm" _fcksavedurl="gracias.htm"><b>Contactame<br><span>Enviame Tus Dudas o Comentarios</span></b></a></li> <li class="email"><a href="construccion.htm" _fcksavedurl="construccion.htm"><b>Mi Email<br><span>Enviame Correos</span></b></a></li> <li class="shop"><a href="construccion.htm" _fcksavedurl="construccion.htm"><b>Lo Nuevo<br><span>Encuentra Lo Nuevo De la Web</span></b></a></li> <li class="delivery"><a href="afiliados.htm" _fcksavedurl="afiliados.htm"><b>Afiliados<br><span>Web Amigas</span></b></a></li> <li class="search"><a href="gracias.htm" _fcksavedurl="gracias.htm"><b>Afiliate!!<br><span>Te Gustaria Estar En Mi Web?</span></b></a></li> <li class="address"><a href="http://www.paginawebgratis.es" _fcksavedurl="http://www.paginawebgratis.es"><b>Pagina Web Gratis<br><span>Te Gustaria Una Web Como Esta?</span></b></a></li> <li class="upload"><a href="http://www.piczuela.co.cc" _fcksavedurl="http://www.piczuela.co.cc"><b>UPLOAD<br><span>Sube Imagenes!!</span></b></a></li> </div>

Otro estilo a tus enlaces
Código CSS:
div.inlineLinkContainer {width:700px; font-family:arial, sans-serif; font-size:12px; margin:0 auto 100px auto;} div.inlineLinkContainer img.leaves {float:left; padding:0 10px 10px 0;} div.inlineLinkContainer p {line-height:27px;} div.inlineLinkContainer a.blockLink {display:inline-block; padding:0 0 0 5px; line-height:26px; height:27px; background:url(http://img46.xooimage.com/files/b/8/0/block3-dbfba5.gif); text-decoration:none; color:#fc0; text-align:center; margin:1px 0 0 0;} div.inlineLinkContainer a.blockLink b {display:inline-block; height:27px; background:url(http://img46.xooimage.com/files/b/8/0/block3-dbfba5.gif) right top; padding:0 10px 0 5px; font-weight:normal; cursor:pointer;} div.inlineLinkContainer a.blockLink:hover {color:#fff; background-position:left bottom;} div.inlineLinkContainer a.blockLink:hover b {color:#fff; background-position:right bottom;} .clearBoth {clear:both;}
Código para pocisionar:
<div class="inlineLinkContainer"> <a class="blockLink" href="Link" _fcksavedurl="Link" title="nombre del link (opcional)"><strong>Texto</strong></a> <a class="blockLink" href="Link2" _fcksavedurl="Link2" title="nombre del link2 (opcional)"><strong>Texto2</strong></a> </div>

Enumerar Páginas
Código CSS:
/*Credits: Dynamic Drive CSS Library */ .pagination{ padding: 2px; } .pagination ul{ margin: 0; padding: 0; text-align: left; /*Set to "right" to right align pagination interface*/ font-size: 16px; } .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; } .pagination a, .pagination a:visited{ padding: 0 5px; border: 1px solid #9aafe5; text-decoration: none; color: #2e6ab1; } .pagination a:hover, .pagination a:active{ border: 1px solid #2b66a5; color: #000; background-color: #FFFF80; } .pagination a.currentpage{ background-color: #2e6ab1; color: #FFF !important; border-color: #2b66a5; font-weight: bold; cursor: default; } .pagination a.disablelink, .pagination a.disablelink:hover{ background-color: white; cursor: default; color: #929292; border-color: #929292; font-weight: normal !important; } .pagination a.prevnext{ font-weight: bold; }
Código para pocisionar
<div class="pagination"> <ul> <li><a href="#" _fcksavedurl="#" class="prevnext disablelink">« previous</a></li> <li><a href="#" _fcksavedurl="#" class="currentpage">1</a></li> <li><a href="#" _fcksavedurl="#">2</a></li> <li><a href="#" _fcksavedurl="#">3</a></li> <li><a href="#" _fcksavedurl="#">4</a></li> <li><a href="#" _fcksavedurl="#">5</a></li> <li><a href="#" _fcksavedurl="#">6</a></li> <li><a href="#" _fcksavedurl="#">7</a></li> <li><a href="#" _fcksavedurl="#">8</a></li> <li><a href="#" _fcksavedurl="#">9</a>...</li> <li><a href="#" _fcksavedurl="#">15</a></li> <li><a href="#" _fcksavedurl="#">16</a></li> <li><a href="#" _fcksavedurl="#" class="prevnext">next »</a></li> </ul> </div>

Pestañas de navegación
Código CSS
<style type="text/css"> body{ color: #333; font-size: 11px; font-family: verdana; } a{ color: #fff; text-decoration: none; } a:hover{ color: #DFE44F; } p{ margin: 0; padding: 5px; line-height: 1.5em; text-align: justify; border: 1px solid #73A405; } #wrapper{ width: 500px; margin: 0 auto; } .box{ background: #fff; } .boxholder{ clear: both; padding: 5px; background-color: #9BCF24; } .tab{ float: left; height: 32px; width: 102px; margin: 0 1px 0 0; text-align: center; background: #8DC70A url(http://img28.xooimage.com/files/6/7/0/greentab-d5e84a.jpg) no-repeat; } .tabtxt{ margin: 0; color: #fff; font-size: 12px; font-weight: bold; padding: 9px 0 0 0; } </style> <script type="text/javascript" src="http://img46.xooimage.com/files/a/a/0/prototype.lite-d5e717.js"></script> <script type="text/javascript" src="http://img22.xooimage.com/files/a/6/5/moo.fx-d5e6fe.js"></script> <script type="text/javascript" src="http://img40.xooimage.com/files/e/d/c/moo.fx.pack-d5e70d.js"></script> <script type="text/javascript"> function init(){ var stretchers = document.getElementsByClassName('box'); var toggles = document.getElementsByClassName('tab'); var myAccordion = new fx.Accordion( toggles, stretchers, {opacity: false, height: true, duration: 600} ); //hash functions var found = false; toggles.each(function(h3, i){ var div = Element.find(h3, 'nextSibling'); if (window.location.href.indexOf(h3.title) > 0) { myAccordion.showThisHideOpen(div); found = true; } }); if (!found) myAccordion.showThisHideOpen(stretchers[0]); } </script>
Cóigo de pocisionamiento
<div id="wrapper"> <div id="content"> <h3 class="tab" title="first"> <div class="tabtxt">Primero</div> </h3> <div class="tab"> <h3 class="tabtxt" title="second">Segundo</h3> </div> <div class="tab"> <h3 class="tabtxt" title="third">Tercero</h3> </div> <div class="tab"> <h3 class="tabtxt" title="fourth">Cuarto</h3> </div> <div class="boxholder"> <div class="box"> <p><strong>Primer Box</strong><br /> Contenido Aqui</p> </div> <div class="box"> <p><strong>Segundo Box</strong><br /> Contenido Aqui</p> </div> <div class="box"> <p><strong>Tercer Box</strong><br /> Contenido Aqui</p> </div> <div class="box"> <p><strong>Cuarto Box</strong><br /> Contenido Aqui</p> </div> </div> </div> </div> <script type="text/javascript"> Element.cleanWhitespace('content'); init(); </script>

Texto con sombra
<style type="text/css"> .sombra{ color: #000000; font-style: italic; font-weight: bold; font-size: 22pt; position: relative; } .texto{ color: #336699; top: -1px; left: -1px; position: absolute; } </style> <div class="sombra">RADIOFLASH24<div class="texto">AQUI LO MISMO (RADIOFLASH24)</div>

Menú Horizontal Deplegable
Código CSS
body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; } #marco { width:455px; margin:10px 0; padding:0px; text-align:left; } /*Credits: CSSplay */ /*URL: http://www.cssplay.co.uk/menus/pro_drop2 */ .preload2 {background: url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);} .menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/fd_menu.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; } .menu2 li.top {display:block; float:left; position:relative;} .menu2 li a.top_link {display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#333; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;} .menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;} .menu2 li a.top_link span.down {float:left; display:block; padding:0 10px 0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/} .menu2 li a.top_link:hover {color:#fff; background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);} .menu2 li a.top_link:hover span { background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif)} .menu2 li a.top_link:hover span.down { background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif)} .menu2 li:hover > a.top_link {color:#fff; background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);} .menu2 li:hover > a.top_link span {background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);} .menu2 li:hover > a.top_link span.down {background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);} .menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */ .menu2 a:hover {visibility:visible;} .menu2 li:hover {position:relative; z-index:200;} /* keep the 'next' level invisible by placing it off screen. */ .menu2 ul, .menu2 :hover ul ul, .menu2 :hover ul :hover ul ul, .menu2 :hover ul :hover ul :hover ul ul, .menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menu2 :hover ul.sub {left:6px; top:25px; background: #fff; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;} .menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #005FB9; border-left:1px solid #005FB9; border-right:1px solid #005FB9; margin-bottom:0;} .menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#005FB9; text-decoration:none;} .menu2 :hover ul.sub li a.fly {background:#fff url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/vineta_menu.gif) no-repeat 150px 6px;} .menu2 :hover ul.sub li a:hover {background:#000000; color:#ffffff;} .menu2 :hover ul.sub li a.fly:hover {background:#000000 url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/vineta_menu.gif) no-repeat 150px 6px;} .menu2 :hover ul li:hover > a.fly {background:#E5FAFC} .menu2 :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul :hover ul {left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;} .menu2 :hover ul.sub li ul {border-top:1px solid #005FB9; background: #fff; z-index:300;}
Código para pocisionar
<div id="marco"> <span class="preload2"></span> <!--MENU--> <ul class="menu2"><img src="http://www.luisangelcamargo.com/wp-content/uploads/2007/12/menu_izq.gif" _fcksavedurl="http://www.luisangelcamargo.com/wp-content/uploads/2007/12/menu_izq.gif" align="left" /><img src="http://www.luisangelcamargo.com/wp-content/uploads/2007/12/menu_der.gif" _fcksavedurl="http://www.luisangelcamargo.com/wp-content/uploads/2007/12/menu_der.gif" align="right"/> <li class="top"><a href="#" _fcksavedurl="#" id="Menu1" class="top_link"><span class="down">Menu1</span> <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#" _fcksavedurl="#">Link 1.1</a></li> <li><a href="#" _fcksavedurl="#">Link 1.2</a></li> <li><a href="#" _fcksavedurl="#">Link 1.3</a></li> <li><a href="#" _fcksavedurl="#">Link 1.4</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="#" _fcksavedurl="#" id="Menu2" class="top_link"><span class="down">Menu2</span> <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#" _fcksavedurl="#">Link 2.1</a></li> <li><a href="#" _fcksavedurl="#">Link 2.2</a></li> <li><a href="#" _fcksavedurl="#">Link 2.3</a></li> <li><a href="#" _fcksavedurl="#">Link 2.4</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="#" _fcksavedurl="#" id="Menu3" class="top_link"><span class="down">Menu3</span> <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#" _fcksavedurl="#">Link 3.1</a></li> <li><a href="#" _fcksavedurl="#">Link 3.2</a></li> <li class="mid"><a href="#" _fcksavedurl="#" class="fly">Link 3.3 <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#" _fcksavedurl="#">Link 3.3.1</a></li> <li><a href="#" _fcksavedurl="#">Link 3.3.2</a></li> <li><a href="#" _fcksavedurl="#">Link 3.3.3</a></li> <li><a href="#" _fcksavedurl="#">Link 3.3.4</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="mid"><a href="#" _fcksavedurl="#" class="fly">Link 3.4 <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#" _fcksavedurl="#">Link 3.4.1</a></li> <li><a href="#" _fcksavedurl="#">Link 3.4.2</a></li> <li><a href="#" _fcksavedurl="#">Link 3.4.3</a></li> <li><a href="#" _fcksavedurl="#">Link 3.4.4</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!-- FIN MENU-->