Wedmasterayuda - Foro

Inteligencia Multiple WMA


    [Diseño para - Css Desing]Mi Desing anterior

    Comparte
    avatar
    wedmasterayuda
    Administrador
    Administrador

    Cantidad de envíos : 47
    Puntos : 25
    Reputación : 0
    Fecha de inscripción : 31/08/2008

    [Diseño para - Css Desing]Mi Desing anterior

    Mensaje  wedmasterayuda el Vie Mar 20, 2009 5:55 am

    Hola aca les traigo un nuevo diseño mio ase ratos no sacaba por q no me encontraba libre aora aca les tengo un nuevo diseño Css



    su codigo es

    Pega esto 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="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 por debajo de la pagina
    Código:

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

    pega esto 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/wma5643.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://i37.tinypic.com/xpnh1z.png) 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: 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://www.fileden.com/files/2008/5/22/1925126/cabelza6wedmasterayuda.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;}

    Webdejuegosya

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

    Mi web www.webdejuegosya.es.tl

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

    Buen design enserio Surprised
    avatar
    scorpions

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

    Re: [Diseño para - Css Desing]Mi Desing anterior

    Mensaje  scorpions el Vie Mar 20, 2009 6:08 am

    Webdejuegosya escribió:Buen design enserio Surprised

    aora mismo la pruebo xD
    como me kede bien me la kedo Laughing Laughing Laughing Laughing

    es broma,no me la kedo,solo la cojo prestada xD

    Contenido patrocinado

    Re: [Diseño para - Css Desing]Mi Desing anterior

    Mensaje  Contenido patrocinado


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