Navegación
  plantillas CSS
 

hola aca les traigo mi nuevo diseño de mi web css desing



pega esto por encima de la pagina

Código:

<head>
   <title>Website Traffic</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
   <meta name="Robots" content="index,follow" />
   <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
   <script type="text/javascript">
   // toggle dynamic divs
    function toggle(div) {
       var elem = document.getElementById(div);
       if (elem.style.display=='') {elem.style.display='none'; return;}
       elem.style.display='';
    }
   </script>
</head>
<body>
   <div id="content">   
      <div id="header">
         <div id="logo">
            <h1>Logo<sup> texto</sup></h1>
            <p>Tu texto texto texto</p>
         </div>
   
         <div id="search">
            <a onclick="toggle('searchform');">+ URL</a>
            <div id="searchform" style="display: none;">
               <form method="post" action="">
                  <p></p>
               </form>
            </div>
         </div>
      </div>
      <ul id="menu">
         <li><a class="current" href="#">Lick</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>
         <li><a href="#">Link</a></li>
         <li><a id="last" href="#">Link</a></li>   
      </ul>



pega esto por debajo de la pagina

Código:
<div style="clear: both;"></div>
         
   
      <div style="clear: both;"></div>
   </div>
   

<div id="prefooter">
      <p>Diseño por <a href="http://www.wedmasterayua.es.tl" title="http://www.wedmasterayua.es.tl">compañia wma</a>tu texto</p>
   </div>
   <div id="footer">
      <p class="right"><a href="#">Link</a><a href="#">Link</a></p>
      <p>tu corporacion <a href="#">texto</a>, Design: <a href="URL">texto</a></p>
   </div>
</body>
</html>


pega esto en css code sin style tags
Código:

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li

*{ margin: 0; padding: 0; }*
body { font: .74em Verdana, Arial, "Trebuchet MS", Tahoma, sans-serif; line-height: 1.6em; background: #D0D4D4; color: #444; }

a {   color: #B60D0A;   background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 15px 0; }
h1 { font: normal 3.7em "Trebuchet MS", Arial, Sans-Serif; color: #fff; }
h1 a { color: #fff; background: inherit; }
h1 a:hover { color: #E4FFD3; background: inherit; }
sup { font-size: .3em; color: #DFCDA2; }
h2 { color: #B60D0A; font: bold 1.6em "Trebuchet MS", Arial, Sans-Serif; margin: 0 0 12px; border-bottom: 1px solid #ccc; }
h3 { color: #808080; background: #D0D4D4; padding: 3px 10px; margin: 0 0 15px; }

#content { width: 960px; margin: 10px auto; background: #fff; padding: 10px; }

#header { background: #fff url('http://www.fileden.com/files/2008/5/22/1925126/cabezalwma646.jpg') no-repeat; height: 252px }
   #header p { margin: 30px 0 0; color: #D6E5EA; }
   #logo { padding: 40px 0 0 20px;  float: left; width: 400px; }


   #search { float: right; width: 240px; text-align: right; margin: 10px 15px 0 0; }
   #search a, #watch a { color: #fff; font-size: .8em; cursor: pointer; }

   #searchform { padding: 10px; background: #A1BDD2;  }
       #searchform p { margin: 0; }
   #menu { margin: 0 0 50px; }
      #menu li { list-style: none; float: left; }
      #menu li a { cursor: pointer; padding: 5px 39px; line-height: 25px; background: #000000; margin: 0 1px 0 0; color: #808080; }
      #menu li a:hover { background: #B2B6B6; color: #000; }
      #menu li a.current { background: #66A3CF; color: #fff; }
      #menu li a#last  { margin: 0; padding: 5px 41px 5px 40px; }

.third { font-size: .9em;  float: left; width: 280px; margin: 0 30px 10px 10px; }
.last { float: right; margin: 0 10px 10px 0; }

.more { border-top: 1px solid #eee; padding: 5px 0 0 0; }

#prefooter { width: 944px; margin: 0 auto; background: #fff; padding: 15px 18px 1px; font-size: .9em;  }

#footer { width: 960px; margin: 15px auto; color: #808080; font-size: .9em; }
   #footer a { color: #444; }
   .right { float: right; text-align: right; font-size: 1em; }
      #footer .right a { margin: 0 0 0 2px; padding: 3px 10px; }
      #footer .right a:hover { background: #fff; color: #444; text-decoration: underline; }




Hola compañeros,no he tenido mucho tiempo pero me puse a hacer un diseño CSS,no es la gran cosa pero bueno,ahí se los dejo para que den opiniones y para su uso público espero que les guste





Texto por encima de la página:

Código:
<style type="text/css" media="screen">
<!--
body
{
font-family: Arial;
font-size: 00px;
overflow: auto;
padding: 10px;
margin: 0px;
}

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: 163px;
left: 18%;
margin-right: -149px;
width: 100px;
}

.menu li
ul, li
{
list-style-type: none;
padding: 20px;
margin: -20px;
}

li a
{
padding-right: 50px;padding-top: 30px;
}

.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: 9px;
height:31px;
color: #01080f;
}

.menu a:hover
{
background-color: #transparent;
background-image: none;}

#smenu1,
#smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 13px;
display: block;
width: 100px;
float: left 100px;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 15px;
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><ul><a href="LINK">LINK</a></ul> </li>
<li><a href="LINK">LINK</a> </li>
<li><a href="LINK">LINK</a> </li>
<li><a href="LINK">LINK</a> </li>
<li><a href="LINK">LINK</a> </li>
<li><a href="LINK">LINK</a> </li>
<li><a href="LINK">LINK</a> </li>
<li><a href="LINK">LINK</a> </li>
<li><a href="LINK">LINK</a> </li>
<li><a href="LINK">LINK</a> </li>
</div>



<div id="Designmystic">

<div id="text"><h1></h1>
</div>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>




Css code sin style tags:

Código:
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}



#text{
color: 021222;
position: absolute;
top: 500px;
margin-left:-300px;
left: 50%;
}

body {background-image:url(http://www.braspin.com.ar/jpg/fondo%20blanco.gif);background-color:;height:ANCHOpx;
margin:30px 0;
}


*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 707px;
height: 690px;
background-image:url(http://img222.imageshack.us/img222/1642/skybluexc2.png);}

#content {
position: absolute;
left: 54%;
top: 150px;
margin-left:-275px;
width: 438px;
height: 348px;
padding:10px;
color: #021222;
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: #FFFFFF;
font-size: 13px;
text-decoration: none;}

a:active {
color: #FFFFFF;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #FFFFFF;
font-size: 13px;
text-decoration: none;}




Aca les traigo una nueva plantilla de la version 2.0 de mi web

Diseño para Css Desing



El codigo es

Pega por encima de la pagina

Código:
<div id="Design">
<div id="Header_oben"></div>


Pega este en Css code sin Style Tags

Código:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
div{z-index: 2px;}
#Header_oben {
height: 115px;
width: 635px;
background:;
background-image:url(http://www.fileden.com/files/2008/5/22/1925126/cabezalwedmasterayuda.jpg);
color: #ffffff ;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
z-index: 2;
position:absolute;left:125px;top:80px;}

#top_1 {
height: 25px;
width: 980px;
background:;
background-image: none;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
z-index: 2;
position:absolute;left:13px;top:200px;}

body {
background-image: none;
background-attachment: fixed;
background:#000000;
background-repeat: repeat-y;
align:center;
z-index: -2;
font-size: 12px;
font-family: Arial;text-align:center;
font-color:red;
font-size: 12px;}


a{color:#ffffff; font-size: 13px; text-decoration: none;}
a:hover {color: #ffffff; font-size: 13px; text-decoration: none;}
a:link {color: #ffffff; font-size: 13px; text-decoration: none;}
a:active {color: #ffffff; font-size: 13px; text-decoration: none;}
a:visited {color: #ffffff; font-size: 13px; text-decoration: none;}
li.nav_element a{
color:#ffffff ;
display: block;
line-height: 25px;
margin: 5px;
padding-left: 10px
text-decoration: none;
text-align: center;
width: 167px;
height: 30px;
background-image:url(http://www.fileden.com/files/2008/5/22/1925126/boton15wedmasterayuda.jpg);
background-color:}
li.nav_element a:hover{
color:#ffffff;
display: block;
line-height: 25px;
margin: 5px;
padding-left: 10px
text-decoration: none;
text-align: center;
width: 167px;
height: 30px;
position: relative;
align:center;
background-image:url(http://www.fileden.com/files/2008/5/22/1925126/boton15wedmasterayuda.jpg);
background-color:}
* { padding: 0; margin: 0; }
* { padding: 0; margin: 0; }

#Design {
width: 900px;
height: 1520px;}

#nav_container {
height: 2000px;
width: 190px;
background:;
background-image: none;
color:#FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
border: 1px solid #6E6E6E;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:890px;top:250px;}

#content {
height: 726px;
width: 850px;
background:;
background-image:url(http://www.fileden.com/files/2008/5/22/1925126/contenedorwedmasterayuda.jpg);
color: #ffffff ;
margin: 0px 0px 0px 0px;
padding: 0px;
display: inline;
float: left;
overflow:auto;
border: 1px solid #6E6E6E;
z-index: 4;
position:absolute;left:25px;top:250px;}

#content_2 {
height: 1520px;
width: 900px;
background:;
background-image: none;
color: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
display: inline;
float: left;
overflow:auto;
z-index: 0;
position:absolute;left:13px;top:27px;}

#sidebar_container {
height: 1000px;
width: 160px;
background:;
background-image: none;
color:#ffffff ;
margin: 0px 0px 0px 0px;
padding: 0px;
border: 1px solid #6E6E6E;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:1100px;top:250px;}

#Feld_oben {
width: 0px;
height: 0px;
background-image: none;
color: ffffff;
margin: 0px 0px 10px 0px;
padding: 0px;
clear: both;
z-index: 4;
position:absolute;left:780px;top:220px;}
#Feld_rechts_5 {
height: 0px;
width: 0px;
background:;
background-image: none;
color:#ffffff ;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
overflow:auto;
z-index: 2;
position:absolute;left:25px;top:220px;}

#counter{
position:absolute;
left: 900px;
top: 8px;
font-size: 14px;
z-index: 6;
color: #ffffff; }
 
  Hoy habia 4122 visitantes (8934 clics a subpáginas) ¡Aqui en esta página!  
 
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis