Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje24-09-2008, 17:42 (UTC)    
Título del mensaje: [TUTORIAL] CREAR PLANTILLAS CSS-DESIGN
Responder citando
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: url();
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: url();
}

#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:url();
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:url();
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;}


Pronto pondre imagenes
______________


Ultima edición por team-webmaster el Mie Oct 08, 2008 5:57 pm; editado 11 veces
↑
Mensaje24-09-2008, 22:04 (UTC)    
Título del mensaje:
Responder citando
excelentisimo tutorial..mas cuando pongas las imagenes sera mejor! ...de 10

voy a intentar aver que logro hacer..

saludos

gracias
↑
Mensaje24-09-2008, 22:17 (UTC)    
Título del mensaje:
Responder citando
Le Doy un 20 mas otro 20 mas un millon tremendo Tutorial Guardare la URL para que cuando este lista mi web de ayuda lo ponga como recursos externos
↑
Mensaje24-09-2008, 22:58 (UTC)    
Título del mensaje:
Responder citando
Grasias muchas grasias XD
______________
↑
Mensaje24-09-2008, 23:19 (UTC)    
Título del mensaje:
Responder citando
Buen tuto, te felicito
______________
↑
Mensaje25-09-2008, 00:24 (UTC)    
Título del mensaje:
Responder citando
Cunado recien pusistes el tuto no quise postear ya que pense que lo segurias por posts. :-) pero veo que no. as preferido editarlo Muy bueno el tuto ya guarde la url
______________
Quieres mi web? Yo también :P
↑
Mensaje25-09-2008, 16:15 (UTC)    
Título del mensaje:
Responder citando
muy buen tuto, me sirvio de mucho, pero algunas cosas se me escaparon, cuando pongas las imagenes, estare mas qeu agradecida....
______________
↑
Mensaje25-09-2008, 19:33 (UTC)    
Título del mensaje:
Responder citando
si nesesitan algo i si lo quiren yo tbn puedo ayudar
______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com

↑
Mensaje25-09-2008, 20:38 (UTC)    
Título del mensaje:
Responder citando
-.- No lo entendi
Explicamelo porfavor.
______________
↑
Mensaje26-09-2008, 02:06 (UTC)    
Título del mensaje:
Responder citando
estoy acabando con las imagenes
______________
↑
Mensaje26-09-2008, 02:13 (UTC)    
Título del mensaje:
Responder citando
haha yo estoy aprendiendo a hacer plantillas CSS pero no consigo como hacer que el contenido aparesca donde debe ser al igual que el menu >< xDDD soy novatillo aun T.T
↑
Mensaje27-09-2008, 14:23 (UTC)    
Título del mensaje:
Responder citando
bueno, cuando pongas las imagenes lo entendre, pero...¿como cambio el menu?
______________
↑
Mensaje27-09-2008, 14:26 (UTC)    
Título del mensaje:
Responder citando
Sierto no entendi muy Bien al tener imagenes sera mas facil
______________
↑
Mensaje27-09-2008, 14:34 (UTC)    
Título del mensaje:
Responder citando
yo si entendi a la perefeccion! ise una web de death note con ese codigo: www.kiraworld.es.tl (no es public, es para que vean el diseño xD)

grax tw
↑
Mensaje27-09-2008, 15:15 (UTC)    
Título del mensaje:
Responder citando
pues si adizone la plantilla te queo muy bn
______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com

↑
Mostrar mensajes anteriores:   
  • Página 1 de 4

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.