Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje25-02-2013, 18:23 (UTC)    
Título del mensaje: [CSS] Desing Nexo [Propia]

Bueno, hola pwg, les quiere dejar una plantilla que hice, espero que les guste.


Caracteristicas:
+Dos columnas
+Se pueden agregar boxes
+Un solo menu
+Contenido que se puede expandir
+Noticias y avisos
+Diseño elegante y original
+Google Fonts

Tutoriales:
Agregar un box:

1.Solo agrega el siguiente codigo dentro de las etiquetas <div id="sidebar"></div>

<div class="box">Titulo BOX</div>
<div class="contenidobox">Contenido en el</div>

Codigos:

Por encima de la pagina:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Desing Nexo - HD Plantillas</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Text+Me+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Text+Me+One::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
  <script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Economica::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
</head>

<body>

<div id="contenido">

<div id="logo"><a href="tuweb.com.ar"><img src="images/logo.png" /></a></div>
<div id="menu"><div id="links">
<ul id="button"> 
<li><a href="/otros.htm"><span style="color:#F00">Home</span></a></li> 
<li><a href="/contacto.htm">| Menu |</a></li> 
<li><a href="/juegos.htm">Menu |</a></li> 
<li><a href="/home.htm">Menu |</a></li>
<li><a href="/home.htm">Menu |</a></li> 
<li><a href="/home.htm">Menu |</a></li> 
<li><a href="/home.htm">Menu</a></li> 
 
</ul></div></div>
<div id="anuncio1">Noticias:</div>
<div id="anuncio2">Atencion: !</div>
<div id="contenedor">


Por debajo de la pagina:

Código:
</div>
<div id="sidebar">
<div class="box">Titulo BOX</div>
<div class="contenidobox">hola soy contenido</div>
<div class="box">Titulo BOX</div>
<div class="contenidobox">hola soy contenido</div>
<div class="box">Titulo BOX</div>
<div class="contenidobox">hola soy contenido</div>
</div>
<div id="footer">Copyright 2013 Tuweb.es.tl | Diseño "Desing Nexo" por <a href="http://www.hdplantillas.com.ar">HD Plantillas</a></div>
</div>

</div>
</body>
</html>


CSS:

Código:
table[height ="102"] {margin-left:auto;margin-right:auto;}

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.nav_element{list-style-type: none;}
li.nav_element{display: none;}

a:link {
   color:#FF6600;
   text-decoration:none;
}

a:visited {
   color:#FF3300;
   text-decoration:none;
}

a:active {
   color:#FF6600;
   text-decoration:none;
}

a:hover {
   color:#F90;
   text-decoration:none;
}

body {
   background-image:url(http://img.webme.com/pic/n/nextoweb/fondo1.png);
   background-position:50%, 50%;
   background-color:#000;
   background-repeat:no-repeat;
   text-align:center;
}

#contenido {
   margin: 10px auto 15px auto;
   width:1080px;
   text-align:center;
}

#logo {
   background-position: center;
   background-repeat:no-repeat;
   height:auto;
   display:block;
}

/* Menu */
#menu {
   background-position:center;
   background-image:url(http://img.webme.com/pic/n/nextoweb/menubg.png);
   background-repeat:repeat-x;
   height:48px;
   width:auto;
   border-radius:10px 10px 0px 0px;
}

@font-face {
 font-family: 'League Gothic';
 font-style: normal;
 font-weight: normal;
 src: url('LeagueGothic.ttf');
}

#button {
   padding-top:5px;
   padding-bottom:10px;
   padding-right:22px;
}

#button li { 
display: inline; 
}

#button li a { 
font-family: "Economica", Haettenschweiler; 
font-size:21pt;
text-shadow: 0 0 0.1em #fff, 0 0 0.3em #fff,
        0 0 0.3em #fff;
text-decoration: none; 
padding: 5px;
color:#000;
}

#button li a:hover {
   text-shadow: 0 0 0.1em #ff5400, 0 0 0.1em #ff5400, 0 0 0.3em #ff5400;
}

/* Anuncios */

#anuncio1 {
   background-image:url(http://img.webme.com/pic/n/nextoweb/bganun.png);
   background-repeat:repeat-x;
   text-align:left;
   font-family:"Text Me One", Haettenschweiler;
   font-size:12pt;
   color:#FFF;
   padding:5px;
   height:27px;
}

#anuncio2 {
   background-image:url(http://img.webme.com/pic/n/nextoweb/bganun1.png);
   background-repeat:repeat-x;
   text-align:left;
   font-family:"Text Me One", Haettenschweiler;
   font-size:12pt;
   color:#fff;
   padding:5px;
   height:26px;
   margin-top:-10px;
}

#contenedor {
   background-color:#fff;
   display:block;
   float:left;
   text-align:left;
   font-family:Arial, Helvetica, sans-serif;
   font-size:10pt;
   width:700px;
   min-height:610px;
   margin-top:-10px;
   padding-left:15px;
   padding-top:12px;
   padding-right:5px;
   padding-bottom:5px;
   word-wrap: break-word;
   margin-bottom:25px;
   border-radius:10px;
   margin-top:10px;
}

#sidebar {
   background-image:url(http://img.webme.com/pic/n/nextoweb/bgsidebare.png);
   background-repeat: repeat-x;
   background-color:#b10821;
   width:345px;
   min-height:440px;
   float:right;
   margin-top:-10px;
   margin-bottom:20px;
   padding-bottom:25px;
   border-radius:10px;
   margin-top:10px;
}

.box {
   background-image: url(http://img.webme.com/pic/n/nextoweb/bgbox.png);
   background-color:#000;
   background-repeat:repeat-x;
   font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
   font-size:11pt;
   color:#fff;
   text-align:left;
   width:280px;
   height:28px;
   float:right;
   margin-top:25px;
   border-radius:10px 0px 0px 10px;
   padding:11px 0px 2px 6px;
}

.contenidobox {
   background-color:#fff;
   font-family: "Economica", sans-serif;
   min-height:120px;
   word-wrap:break-word;
   border-radius:10px 0px 0px 10px;
   padding:5px;
   display:block;
   width:289px;
   margin-top:5px;
   float:right;
   text-align:left;
}

#footer {
   background-image:url(http://img.webme.com/pic/n/nextoweb/footerbg.png);
   background-repeat:repeat-x;
   background-color:#000;
   height:20px;
   clear:both;
   padding:10px;
   text-align:left;
   margin-top:5px;
   border-radius:10px;
   font-family: "Text Me One", Arial;
   font-size:12pt;
   color:#fff;
}


Gracias.

Por favor: Conservar el footer.
Mensaje26-03-2013, 17:12 (UTC)    
Título del mensaje:

Me gusta

te recomendaria limpiarle los codigos innecesarios http://www.paginawebgratis.es/forum/viewtopic.php?t=50115
______________
Mensaje01-04-2013, 00:32 (UTC)    
Título del mensaje:

bien!!!buena plantilla..y si habria que sacarle los codigos innecesarios..para que quede bien..de todos modos buen aporte! saludos
______________
Mensaje05-04-2013, 02:10 (UTC)    
Título del mensaje:

Hola!

Creo que ahi alguns codigos de más...
Sirve todo este codigo?

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Desing Nexo - HD Plantillas</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Text+Me+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Text+Me+One::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
  <script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Economica::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
</head>

<body>


Si lo puede editar seria genial!

Saludos!
______________
CssPlantillas - Moderador Paginawebgratis.es

SIGUENOS EN REDES SOCIALES:
Mensaje19-04-2013, 23:12 (UTC)    
Título del mensaje:

En el código que cito CP, lo único que sirve es
<link href='http://fonts.googleapis.com/css?family=Text+Me+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
Mensaje20-04-2013, 00:12 (UTC)    
Título del mensaje:

Si le echas ganas a tu web haciendo plantillas veras que vas a crecer pronto, ya que todos los que tenemos una pagina en PWG buscamos una plantilla, y todos se Irán contigo, te lo digo por experiencia.
______________

Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group