Los codigos y tutoriales para tu web

css-design

Plantillas Css-Design

Encima de la pagina

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 110px;
left: 52%;
margin-left:-185px;
width: 647px;
}

.menu li
{
width: 70px;
float: left;
}

.menu a
{
border: 0px solid #xxxxxx;
background-color: #xxxxxx;
background-image:  none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height:21px;
color: #000000;
}

.menu a:hover
{
background-color: #transparent;
background-image:  none;
color: #FFFFFF;}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 15px;
display: none;
width: 70px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->  </style>  <script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script> <div class="menu">   <li><a href="LINK" _fcksavedurl="LINK">LINK</a> </li>    <li><a href="LINK" _fcksavedurl="LINK">LINK</a> </li> <li><a href="LINK" _fcksavedurl="LINK">LINK</a> </li>    <li><a href="LINK" _fcksavedurl="LINK">LINK</a> </li> <li><a href="LINK" _fcksavedurl="LINK">LINK</a> </li>  </div>    <div id="Designmystic">  <div id="text"><h1>ghgh</h1> </div>   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

CSS-Code sin Style Tags:

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: FFFFFF; position: absolute; top: 100px; margin-left:-300px; left: 60%; }  body { background-image: none;background-color:#fff;}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 625px; height: 497px; background-image:url(http://pixelea.com/s/2909480f26.png);}   #content { position: absolute; left: 54%; top: 130px; margin-left:-369px; width: 717px; height: 387px; padding:10px; color: #transparent; font-size:13px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#FFFFFF;}     a{ color:#FFFFFF; text-decoration: none; font-size:13px;}  a:hover { color: #FFFFFF; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #000000; font-size: 13px; text-decoration: none;}  a:visited { color: #000000; font-size: 13px; text-decoration: none;}   div.lux { position: absolute; z-index: 3; top: 40px; left: 30%; margin-left: -440px; width: 100px; }  .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #fff; font-size: 24px; } </textarea

Encima de la pagina:

debajo de la pagina

</div>     <div class="clearfix"></div>     <div id="footer">       <div id="ftinner">         <div class="ftlink fl"> <a href="Link aqui" _fcksavedurl="Link aqui">Home</a> | <a href="Link aqui" _fcksavedurl="Link aqui">texto</a> | <a href="Link aqui" _fcksavedurl="Link aqui">texto </a> | <a href="Link aqui" _fcksavedurl="Link aqui">texto</a> | <a href="Link aqui" _fcksavedurl="Link aqui">textp</a>            <p id="copyright">© 2009. todos los derechos reservados <br>             Designed adaptado por  <a href="http://www.ladiskoteka.com/" _fcksavedurl="http://www.ladiskoteka.com/">Ladiskoteka</a></p>         </div>         <div class="valid fr"><img src="http://g.starcool25.googlepages.com/xhtml.gif" _fcksavedurl="http://g.starcool25.googlepages.com/xhtml.gif" alt="xhtml valid"> <img src="http://g.starcool25.googlepages.com/css.gif" _fcksavedurl="http://g.starcool25.googlepages.com/css.gif" alt="css valid"></div>       </div>      </div>        </div>

Encima de la pagina

esto en texto por debajo de la pagina

</div> <div class="post_metadata"> <div class="content"> RADIOFLASH24.ES.TL </div> </div> </div> </div> <div id="bottom"> <div class="left col3"> <h2>TITULO</h2> <ul> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> </ul> </div> <div class="left col3"> <h2>TITULO</h2> <ul> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> </ul> </div> <div class="right col3last"> <h2>TITULO</h2> <ul> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> <li><a href="URL" _fcksavedurl="URL">LINK</a></li> </ul> </div> <div class="clearer"> </div> </div> <div id="footer"> <div class="left">© 2008 NOMBRE DE LA WEB</div> <div class="right">Design by <a href="http://radioflash24.es.tl" _fcksavedurl="http://radioflash24.es.tl">Radioflash24</a></div> <div class="clearer"> </div> </div> </div>

css sin tags de style

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;} html { font-size: 62.5%; /* reset 1em to 10px */ height: 100%; } body { background: #444 url('http://pixelea.com/s/e30603d273.jpg'); color: #444; font: normal 1.2em Verdana,Arial,sans-serif; height: 100%; padding-bottom: 1px; /* force scrollbars */ } small,.small {font-size: 0.9em;} a { color: #EEC; text-decoration: none; } a:hover { color: #FFA; text-decoration: underline; } p {padding: 0.2em 0 1.2em;} blockquote, code { background: #4A4A4A; border: 1px solid #333; color: #BBB; display: block; margin-bottom: 12px; } code { font: normal 0.9em Verdana,sans-serif; line-height: 1.5em; padding: 8px 14px; }  blockquote p {padding: 0.5em 0;} h1 {font: normal 2em Georgia,sans-serif;} h2 {font: normal 1.6em Georgia,sans-serif;} h3 {font: normal 1.4em Georgia,sans-serif;} h4 {font: bold 1em Georgia,sans-serif;} h1, h2, h3, h4 {margin-bottom: 5px;} #paper_left { background: url('http://pixelea.com/s/ddebd20ae3.gif') no-repeat left top; margin: 0 auto; padding-bottom: 34px; width: 778px; } #paper_right { background: url('http://pixelea.com/s/11063641fc.gif') no-repeat right bottom; } #layout_wrapper { background: #50504A url('http://pixelea.com/s/09e57e34e3.gif'); margin: 0 auto; width: 736px; } #layout_container {padding: 8px;} #layout_content {border: 1px solid #333;} #header_image { height: 160px; background: #222 url('http://pixelea.com/s/6e911f67ac.jpg') no-repeat; border-bottom: 1px solid #222; border-top: 1px solid #111; } #site_title { background: #222; padding: 12px 20px; } #site_title h1    { color: #EED; font: normal 2em Georgia,sans-serif; margin: 0 0 5px; } #site_title h2 { color: #BFBFB6; font: normal 1.1em sans-serif; margin: 0; } .navigation { background: #353535 url('http://www.freelayouts.com/preview/6458/img/navigation.jpg') repeat-x; border-bottom: 1px solid #222; border-top: 1px solid #555; } .navigation ul {display: inline; margin: 0;} .navigation ul li { border-right: 1px solid #303030; float: left; list-style: none; } .navigation a { color: #AAA; display: block; font: bold 1em Verdana,sans-serif; padding: 12px 14px; text-decoration: none; } .navigation a:hover { background: #444; color: #E5E5D5; text-decoration: none; } .navigation li.current_page_item a { background: none; color: #EEE; } /* Sub navigation */ #subnav a { padding: 10px; font-size: 0.9em; } #main { background: #4A4A4A; color: #CCC; } #bottom { background: #222; border-bottom: 1px solid #1A1A1A; border-top: 1px solid #2A2A2A; color: #AAA; padding: 16px; } #bottom ul li { border-bottom: 1px solid #303030; } #bottom ul li a { color: #777; display: block; padding: 4px 6px; } #bottom ul li a:hover { background: #2A2A2A; color: #FFC; text-decoration: none; } /* Tag cloud */ #tag_cloud a {color: #777;} #tag_cloud a:hover {color: #FFC;} #footer { background: #2A2A2A; border-bottom: 1px solid #1A1A1A; border-top: 1px solid #333; color: #888; font-size: 0.9em; padding: 10px 12px; } #footer a {color: #AAA;} #footer .right,#footer .right a {color: #555;} #footer a:hover {color: #BBB;} .left {float: left;} .right {float: right;} .clear,.clearer {clear: both;} .clearer,.block { display: block; line-height: 0; font-size: 0; }