Tutorial crear css
ante todo tienen que colocar esto en texto por encima de la web
Código: |
<style type="text/css" media="screen"> <!-- body { font-family: Times New Roman, 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: 52%; margin-left: 149px; width: 100px; } .menu li { width: 95px; float: left; } .menu a { border: 0px solid #ffffff; background-color: #xxxxxx; background-image: none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:67px; color: #808080; } .menu a:hover { background-color: #transparent; background-image: none; } #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="Link1"></a> </li> <li><a href="Link2"></a> </li> <li><a href="Link3"></a> </li> <li><a href="Link4"></a> </li> <li><a href="Link5"></a> </li> </div> <div id="Designmystic"> <div id="text"><h1></h1> </div> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> |
Primero les eneñare a modificar el cuadro de texto (donde aparese todo el contenido de la web)
Codigo para modificar el cuadro de texto
#content {
position: absolute;
left: 50%;
top: 229px; con esto podras modificar la posicion de la caja de texto
margin-left:-283px;
width: 380px; con esto podra modificar el ancho que tendra la caja de texto
height: 360px; con esto podra modificar la altura de la caja de texto
padding:10px;
color: #transparent; color de la caja de texto
font-size:13px; con esto cambias el tamaño de las letras
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}
#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}
------------------------------------------------------------------
Esto es para modificar los link
a{
color:#ffffff; con esto cambias el color de los link
text-decoration: none;
font-size:13px;} con esto cambias el tamaño de las letras
a:hover {
color: #4A9AF6; con esto cambias el color de los link
font-size: 13px; con esto cambias el tamaño de las letras
text-decoration: none;}
a:link {
color: #000000; con esto cambias el color de los link
font-size: 13px; con esto cambias el tamaño de las letras
text-decoration: none;}
a:active {
color: #000000; con esto cambias el color de los link
font-size: 13px; con esto cambias el tamaño de las letras
text-decoration: none;}
a:visited {
color: #cccccc; con esto cambias el color de los link
font-size: 13px; con esto cambias el tamaño de las letras
text-decoration: none;}
------------------------------------------------
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: 50%;
}
----------------------------------------------------
ESTO ES EL COLOR DE FONDO DE LA WEB
body {
background-color:#262626;}
----------------------------------------------------
ESTO ES LA IMAGEN DEL DISEÑO
*{ padding: 0; margin: 0; }
#Designmystic {
margin: 0 auto;
width: 610px;
height:600px;
background-image:url(http://www.fileden.com/files/2008/3/24/1833523/msntw.png);}
----------------------------------------------------
Codigo completo
Código: |
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: 50%; } body { background-color:#262626;} *{ padding: 0; margin: 0; } #Designmystic { margin: 0 auto; width: 610px; height:600px; background-image:url(http://www.fileden.com/files/2008/3/24/1833523/designblackicon.png);} #content { position: absolute; left: 50%; top: 229px; margin-left:-283px; width: 380px; height: 360px; 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:#cccccc;} a{ color:#ffffff; text-decoration: none; font-size:13px;} a:hover { color: #4A9AF6; 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: #cccccc; font-size: 13px; text-decoration: none;} |