DwDesigner

Bienvenido, Te recive el Equipo de Webdejuegosya y Team-Drakox, Elige una de estas opciones!

Registrar;Conectar;No Preguntar

Que te diviertas
DwDesigner

Diseño Webmaster Todo lo que tu web necesita


    [Diseño para - Css Desing] Expancion Rasta

    Comparte

    MasterWMA

    Cantidad de envíos : 4
    Fecha de inscripción : 20/03/2009

    Hoja De Personaje
    Juego1:
    Juego1

    [Diseño para - Css Desing] Expancion Rasta

    Mensaje  MasterWMA el Vie Mar 20, 2009 11:48 am

    Hola aca les traigo un diseño de mi web lo tenia de hace ratos no lo habia publicado



    Pega esto codigo por enciam de la pagina

    Código:
    <!-- wrap starts here -->
    <div id="wrap">
          <!--header -->
          <div id="header">       
             
            <h1 id="logo-text"><a href="index.html"></a></h1>   
            <p id="slogan"></p>   
           
            <div id="header-links">
            <p>
                <a href="Modificar Url"></a>
                   
            </p>   
          </div>   
                   
          </div>

        <!-- menu --> 
          <div  id="menu">
         
    <ul id="nav">
      <li class="top"><a href="URL" class="top_link"><span>Link</span></a></li>

     
      <li class="top"><a id="services" class="top_link"><span class="down">Link  <font color="#aad5fd">+</font></span><!--[if gte IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">

    <li><b>INTERMEDIARIO</b></li>
           
            <li><a href="URL">SUB LINK</a></li>

          <li><a href="URL">SUB LINK</a></li>


          </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

     
      <li class="top"><a href="URL" id="privacy" class="top_link"><span>LINK</span></a></li>



      <li class="top"><a id="services" class="top_link"><span class="down">Link  <font color="#aad5fd">+</font></span><!--[if gte IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">

    <li><b>INTERMEDIARIO</b></li>
           
            <li><a href="URL">SUB LINK</a></li>

          <li><a href="URL">SUB LINK</a></li>


          </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>



    </div>
           
           
          <!-- content-wrap starts here -->
          <div id="content-wrap">
             
            <div id="sidebar">
       
           


                <div class="left-box">
                  <p class="align-right"></p>
                </div>                           
            </div>

    Pega esto codigo por debajo de la pagina

    Código:
    <!-- content-wrap ends here --> 
    </div> 
    <!--footer starts here-->
    <div id="footer">
    </div> 
    <!-- wrap ends here -->
    </div>

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


    /* Top Elements */
    * { margin: 0; padding: 0; outline: 0 }

    body {
      background-image:url(http://www.fileden.com/files/2008/5/22/1925126/Fondowedmasterayuda.gif);background-color:#ffffff;
      font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
      color: #555;
      text-align: center;
    }

    /* links */
    a, a:visited {
      text-decoration: none;
      color: #2180BC;
      background: inherit;
    }
    a:hover {
      color: #88ac0b;
      background: inherit;
      text-decoration: underline;
    }

    /* headers */
    h1, h2, h3 {
      font-family: 'Trebuchet MS', Tahoma, Sans-serif;       
    }
    h1 {
      font-size: 150%; 
      font-weight: normal;
      color: #cccccc;
    }
    h2 {
      font-size: 140%;
      text-transform: uppercase;
      color: #cccccc;
    }
    h3 {
      font-size: 120%;
      color: #cccccc;
    }

    h1, h2, h3, p {
      padding: 10px;   
      margin: 0;
    }
    ul, ol {
      margin: 5px 20px;
      padding: 0 20px;
    }


    /********************************************
      Design
    ********************************************/
    #wrap {
      width: 838px;
      background:  url(http://i35.tinypic.com/zlq93m.png) repeat-y center top;
      margin: 0 auto;
      text-align: left;
    }
    #content-wrap {
      clear: both;
      width: 760px;
      padding: 0;
      margin: 10px auto;
    }
    #header {
      width: 838px;
      position: relative;
      height: 190px;
      background: #fff url(http://www.fileden.com/files/2008/5/22/1925126/wedmasterayudacabezal65415642.jpg) no-repeat center top;
      padding: 0; 
     
    }
    #header h1#logo-text a {
      position: absolute;
      margin: 0; padding: 0;
      font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;
      letter-spacing: -2px;
      color: #FFF;
      text-transform: none;
      text-decoration: none;
      background: transparent;
     
      /* change the values of top and left to adjust the position of the logo*/
      top: 25px; left: 47px; 
    }
    #header p#slogan {
      position: absolute;
      margin: 0; padding: 0;
      font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
      text-transform: none;
      color: #FFF;
     
      /* change the values of top and left to adjust the position of the slogan*/
      top: 70px; left: 55px;   
    }

    /* header links */
    #header #header-links {
      position: absolute;
      top: 20px; right: 30px; 
      color: #ffffff;
      font-size: 10px; 
    }
    #header #header-links a { 
      color: #FFF;
      text-decoration: none; 
    }
    #header #header-links a:hover {
      color: #cccccc; 
    }

    /* Menu */
    #menu {
      clear: both; 
      margin: 0 auto; padding: 0;
      background: url(http://www.fileden.com/files/2008/5/22/1925126/wedmasterayudabarra34213.jpg) repeat-x 0 0; 
      font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;
      height: 28px;
      width: 838px;
    }
    #menu ul {
      float: right;
      list-style: none;
      margin:0; padding: 0;
    }
    #menu ul li {
      display: inline;
    }
    #menu ul li a {
      display: block;
      float: left;
      padding: 0 12px;
      color: #FFF; 
      text-decoration: none;
    }
    #menu ul li.last a {
      padding-right: 20px; 
    }
    #menu ul li a:hover {
      color: #cccccc; 
    }
    #menu ul li#current a { 
      color: #bc0303;
    }

    /* Main Column */
    #main {
      float: center;
      width: 70%;
      padding: 0; margin: 5px 0 0 5px;
      display: inline;
    }
    #main h2 {
      margin-top: 10px;
      font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;
      color: #88ac0b;
      padding: 5px 0 5px 25px; 
      border-bottom: 1px solid #EFF0F1;
      background: #FFF url() no-repeat 3px 50%; 
      text-transform: none;
    }
    #main h2 a {
      background: none;
      color: #88ac0b;
      text-decoration: none;
    }

    #main ul li {
      list-style-image: url();
    }

    .post-footer {
      background-color: #FAFAFA;
      padding: 5px; margin: 20px 10px 10px 10px;
      border: 1px solid #f2f2f2;
      font-size: 95%; 
    }
    .post-footer .date {
      background: url() no-repeat left center;
      padding-left: 20px; margin: 0 10px 0 5px;
    }
    .post-footer .comments {
      background: url() no-repeat left center;
      padding-left: 20px; margin: 0 10px 0 5px;
    }
    .post-footer .readmore {
      background: url() no-repeat left center;
      padding-left: 20px; margin: 0 10px 0 5px;
    }

    /* Sidebar */ 
    #sidebar {
      float: right;
      width: 26.5%;
      padding: 0; margin: 0; 
      color: #000; 
         

    #sidebar h3 {
      margin-top: 10px;
      padding: 20px 20px;
      font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
      color: #bc0303; 
    }
    #sidebar ul.sidemenu {
      list-style: none;
      text-align: left;
      margin: 7px 4px 8px 0; padding: 0;
      text-decoration: none;   
      background: url() repeat-x left top;
    }
    #sidebar ul.sidemenu li {
      list-style: none;
      background: url() repeat-x left bottom;
      padding: 4px 0 4px 5px;
      margin: 0 20px; 
      color: #bc0303; 
    }
    * html body #sidebar ul.sidemenu li {
      height: 1%;
    }
    #sidebar ul.sidemenu li a {
      text-decoration: none; 
      background-image: none; 
      color: #666666;       
    }
    #sidebar ul.sidemenu li a:hover { 
      color: #1773BC; 
    }
    #sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
    #sidebar ul.sidemenu ul li { background: none; }


    /* Footer */ 
    #footer {
      color: #C6DDEE;
      background:  url(http://www.fileden.com/files/2008/5/22/1925126/wedmasterayudabarra13.PNG) no-repeat center top;
      clear: both;
      width: 838px;
      height: 76px;
      text-align: center; 
      font-size: 92%; 
    }
    #footer a {
      color: #FFF;
      text-decoration: none;
    }

    /* alignment classes */
    .float-left  { float: left; }
    .float-right { float: right; }
    .align-left  { text-align: left; }
    .align-right { text-align: right; }

    /* display and additional classes */
    .clear { clear: both; }

    .preload1
    .preload2

    #nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
    #nav li.top {display:block; float:left;}
    #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFF; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
    #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
    #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}

    #nav li:hover a.top_link,
    #nav a.top_link:hover
    {color:#CCC; background: url(six_1.gif) no-repeat;}
    #nav li:hover a.top_link span,
    #nav a.top_link:hover span
    {background:url(six_1.gif) no-repeat right top;}
    #nav li:hover a.top_link span.down,
    #nav a.top_link:hover span.down
    {background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

    #nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}

    #nav li:hover {position:relative; z-index:200;}
    #nav a:hover {position:relative; white-space:normal; z-index:200;}

    #nav :hover ul.sub
    {left:1px; top:38px; background: #FFF; padding:3px; border:1px solid #cccccc; white-space:nowrap; width:130px; height:auto; z-index:300;}
    #nav :hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
    #nav :hover ul.sub li a
    {display:block; font-size:11px; height:18px; width:100px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #FFF;}
    #nav li ul.sub li a.fly
    {background:#FFF url(arrow.gif) 80px 6px no-repeat;}
    #nav :hover ul.sub li a:hover
    {background:#FFF; color:#CCC; border-color:#fff;}
    #nav :hover ul.sub li a.fly:hover
    {background:#FFF url(arrow_over.gif) 80px 6px no-repeat; color:#CCC;}

    #nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#65a7e5; border-bottom:1px solid #000000; cursor:default;}

    #nav a:hover a:hover ul,
    #nav a:hover a:hover a:hover ul,
    #nav a:hover a:hover a:hover a:hover ul,
    #nav a:hover a:hover a:hover a:hover a:hover ul
    {left:89px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #cccccc; white-space:nowrap; width:90px; z-index:400; height:auto;}

    #nav ul,

    #nav a:hover ul ul,
    #nav a:hover a:hover ul ul,
    #nav a:hover a:hover a:hover ul ul,
    #nav a:hover a:hover a:hover a:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

    #nav li:hover li:hover > ul
    {left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
    #nav li:hover > ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    #nav li:hover li:hover > a.fly
    {background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
    #nav li:hover li:hover > li a.fly
    {background:#50b5d0 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}
    avatar
    Admin
    Support
    Support

    Masculino Cantidad de envíos : 101
    Fecha de inscripción : 08/03/2009
    Localización : Nuevo Leon, Mexico

    Hoja De Personaje
    Juego1:
    Juego1

    Mi web www.webdejuegosya.es.tl

    Mensaje  Admin el Vie Mar 20, 2009 12:07 pm

    Buen design :) sigue asi
    avatar
    TeamDrakox
    Support
    Support

    Masculino Cantidad de envíos : 137
    Fecha de inscripción : 08/03/2009
    Edad : 22

    Hoja De Personaje
    Juego1:
    Juego1

    Re: [Diseño para - Css Desing] Expancion Rasta

    Mensaje  TeamDrakox el Sáb Mar 21, 2009 11:02 am

    Gracias por aportarlo, pero en mi pc no se ve la vista previa, intenta subir el pantallazo a pixelea u otro hosting.

    Salu2 ;)

    Contenido patrocinado

    Re: [Diseño para - Css Desing] Expancion Rasta

    Mensaje  Contenido patrocinado


      Fecha y hora actual: Miér Dic 19, 2018 1:06 am