Wedmasterayuda - Foro

Inteligencia Multiple WMA


    [Design CSS] Simpsons By WBJ and Team-Drakox

    Comparte

    Webdejuegosya

    Cantidad de envíos : 14
    Puntos : 14
    Reputación : 0
    Fecha de inscripción : 20/03/2009

    [Design CSS] Simpsons By WBJ and Team-Drakox

    Mensaje  Webdejuegosya el Vie Mar 20, 2009 6:10 am

    Otro de nuestros diseños:

    Visualizacion:


    Texto por encima 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="Url">Pinchame</a> |
                <a href="Url">Pinchame</a> |
                <a href="Url">Pinchame</a>         
            </p>       
          </div>       
                       
          </div>

           
          <!-- menu -->   
          <div  id="menu">
            <ul>
                <li id="current"><a href="Url">Pinchame</a></li>
                <li><a href="Url">Pinchame</a></li>
                <li><a href="Url">Pinchame</a></li>
                <li><a href="Url">Pinchame</a></li>

                <li><a href="Url">Pinchame</a></li>
                <li class="last"><a href="Url">Pinchame</a></li>
            </ul>
          </div>               
             
          <!-- content-wrap starts here -->
          <div id="content-wrap">
                 
            <div id="sidebar">
           
                <h3>Menu</h3>
                <ul class="sidemenu">             
                  <li><a href="Url">Pinchame</a></li>
                  <li><a href="Url">Pinchame</a></li>

                  <li><a href="Url">Pinchame</a></li>
                  <li><a href="Url">Pinchame</a></li>
                  <li><a href="Url">Pinchame</a></li>             
                </ul>   
                 
             
                <h3>Links</h3>
                <ul class="sidemenu">
                  <li><a href="Url">Pinchame</a></li>
                  <li><a href="Url">Pinchame</a></li>

                  <li><a href="Url">Pinchame</a></li>         
                  <li><a href="Url">Pinchame</a></li>
                  <li><a href="Url">Pinchame</a></li>
                </ul>
    </div>
             

    Texto por debajo de la pagina:
    Código:
    <!-- content-wrap ends here -->   
    </div>   
    <!--footer starts here-->
    <div id="footer">
    </div>   
    <!-- wrap ends here -->
    </div>

    CSS 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();background-color:#fff;
      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://pixelea.com/s/436c36d48b.gif) 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: 150px;
      background: #fff url(http://pixelea.com/s/6763328f94.gif) 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://pixelea.com/s/9132cc551c.jpg) repeat-x 0 0;   
      font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;
      height: 50px;
      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: left;
      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://pixelea.com/s/80a31b4abb.gif) 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; }

    Anteriormente en la Visualizacion no se ve el Footer asi que aqui esta:

      Fecha y hora actual: Mar Abr 24, 2018 9:50 am