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 Design] Cielo Oscuro

    Comparte
    avatar
    super-ayuda-webmaster
    Moderador
    Moderador

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

    Hoja De Personaje
    Juego1:
    Juego1

    [Diseño para CSS Design] Cielo Oscuro

    Mensaje  super-ayuda-webmaster el Lun Mar 30, 2009 6:03 am



    Un diseño con menu horizontal tipo flash.

    Saludos!! ;)

    Encima de la pagina:

    Código:
    <style type="text/css">
    <!--
    table{margin-left:auto;margin-right:auto} 
    --></style>
    <body>

    <div id="wrapper">

      </div>

      <!-- end #header -->
      <div id="logo">
          </em></p>
      </div>
      <hr />
      <!-- end #logo -->

          <div id="header">
          <br/>
            <style type="text/css">

    /*Credits: CSSpplay */
    /*URL: http://www.cssplay.co.uk/menus/pro_six */

    #pro6 ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; list-style:none; height:35px; position:relative; background:#fff; font-size:11px;}
    #pro6 li {display:table-cell; margin:0; padding:0;}
    #pro6 li a {display:block; float:left; height:35px; line-height:30px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(http://pixelea.com/s/c44b7a9414.gif) no-repeat;}
    #pro6 li a b {float:left; display:block; padding:0 25px 5px 15px; background:url(http://pixelea.com/s/9f9a690eeb.gif) no-repeat right top;}
    #pro6 li.current a {color:#fff; background:url(http://pixelea.com/s/4373cbde63.gif) no-repeat;}
    #pro6 li.current a b {background:url(http://pixelea.com/s/947c8b0266.gif) no-repeat right top;}
    #pro6 li a:hover {color:#fff; background: url(http://pixelea.com/s/b75a2addba.gif) no-repeat;}
    #pro6 li a:hover b {background:url(http://pixelea.com/s/752cddbd7a.gif) no-repeat right top;}
    #pro6 li.current a:hover {color:#fff; background: url(pro_six_2a.gif) no-repeat; cursor:default;}
    #pro6 li.current a:hover b {background:url(pro_six_2b.gif) no-repeat right top;}

    </style>

    <!--[if IE]>
    <style type="text/css">
    #pro6 ul {display:inline-block;}
    #pro6 ul {display:inline;}
    #pro6 ul li {float:left;}
    #pro6 {text-align:center;}
    </style>
    <![endif]-->

    </head>

    <body>
    <div id="pro6">
    <ul>
    <li><a href="#"><b>Home</b></a></li>
    <li><a href="#"><b>Privacy Policy</b></a></li>
    <li><a href="#"><b>Products</b></a></li>
    <li><a href="#"><b>Where to find us</b></a></li>
    <li><a href="#"><b>Contact us</b></a></li>
    <li><a href="http://tknologyk2.es.tl"><b>Tknologyk</b></a></li>
    </ul>
    </div>
    </body>
    </div>
    <!-- end #header-wrapper -->


    <div id="page">
      <div id="content">
          <div class="post">


    Debajo de la Pagina:


    Código:
    </div>
      </div>
      <!-- end #content -->
      <div id="sidebar">
          <ul>
            <li>
                <h2>Titulo</h2>
                <p>Texto<br/>
                Texto<br/>
                Texto<br/>
                Texto<br/>
                Texto<br/>
                </p>
            </li>
    <div id="sidebar">
          <ul>
            <li>
                <h2>Titulo</h2>
                <p>Texto<br/>
                Texto<br/>
                Texto<br/>
                Texto<br/>
                Texto<br/>
                </p>
            </li></div>
            <li>
            <div id="sidebar">
                <h2>Titulo</h2>
                <ul>
                  <li><a href="#">Link</a>
                  <li><a href="#">Link</a>
                  <li><a href="#">Link</a>
                  <li><a href="#">Link</a>
                  <li><a href="#">Link</a>
                  </ul>
                  <br/>
                </li>
          </ul>
      </div>
      <!-- end #sidebar -->
      <div style="clear: both;"> </div>
    </div>
    <!-- end #page -->

    <div id="footer">
      <p>Copyright 2009©️ | Design by <a href="http://www.tknologyk2.es.tl/">Tknologyk 2.0</a>.</p>
    </div>
    <!-- end #footer -->
    </div>
    </body>

    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;}



    #text{
    color: ffffff;
    position: absolute;
    top: 100px;
    margin-left:-300px;
    left: 50%;
    }

    body {
      margin-top: 50px;
      padding: 0;
      background: #FFFFFF url(http://pixelea.com/s/c8a414b507.jpg) repeat-x left top;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #837669;
    }

    h1, h2, h3 {
      margin: 0;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: normal;
      color: #649632;
    }

    h1 { font-size: 44px; }

    h2 { font-size: 20px; }

    h3 { }

    p, ul, ol {
      margin-top: 0;
      line-height: 240%;
      text-align: justify;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 11px;
    }

    ul, ol { }

    blockquote { }

    a { color: #000000; }

    a:hover { text-decoration: none; }

    a img {
      border: none;
    }

    img.left {
      float: left;
      margin: 7px 30px 0 0;
    }

    img.right {
      float: right;
      margin: 7px 0 0 30px;
    }

    hr { display: none; }

    .list1 {
    }

    .list1 li {
      float: left;
      line-height: normal;
    }

    .list1 li img {
      margin: 0 30px 30px 0;
    }

    .list1 li.alt img {
      margin-right: 0;
    }

    #wrapper {
    }

    /* Header */

    #header-wrapper {
      width: 880px;
      margin: 0 auto;
    }

    #header {
      width: 900px;
      height: 60px;
      margin: 0 auto;
      background: url() no-repeat left top;
    }

    /* Menu */

    #menu {
      float: left;
      width: 540px;
      height: 51px;
    }

    #menu ul {
      margin: 0;
      padding: 20px 0 0 20px;
      list-style: none;
      line-height: normal;
    }

    #menu li {
      display: block;
      float: left;
    }

    #menu a {
      display: block;
      float: left;
      margin-right: 5px;
      padding: 5px 12px 5px 28px;
      background: url(http://pixelea.com/s/8da439e8e3.gif) no-repeat left 50%;
      text-decoration: none;
      font: 14px Georgia, "Times New Roman", Times, serif;
      color: #FFFFFF;
    }

    #menu a:hover { text-decoration: underline; }

    #menu .current_page_item a {
      color: #FFFFFF;
    }

    /* Search */

    #search {
      float: right;
      width: 305px;
      height: 76px;
    }

    #search form {
      float: right;
      margin: 0;
      padding: 25px 20px 0 0;
    }

    #search fieldset {
      margin: 0;
      padding: 0;
      border: none;
    }

    #search input {
      float: left;
      font: 12px Georgia, "Times New Roman", Times, serif;
      border: none;
    }

    #search-text {
      width: 135px;
      height: 18px;
      padding: 3px 0 0 5px;
      background: #ECF9E4;
      color: #658453;
    }

    #search-submit {
      height: 21px;
      margin-left: 12px;
      color: #39561D;
    }

    /* Page */

    #page {
      width: 900px;
      margin: 0 auto;
      padding: 30px 0px 0px 0px;
    }

    /** LOGO */

    #logo {
      width: 900px;
      height: 230px;
      margin: 0 auto;
      background: url(http://pixelea.com/s/a095b7108b.jpg) no-repeat left top;
    }

    #logo h1, #logo p {
      margin: 0;
      padding: 0 0 0 170px;
      line-height: normal;
    }

    #logo h1 {    float: left;
    padding-top: 70px; }

    #logo h1 a {
      text-decoration: none;
      text-transform: lowercase;
      color: #FFFFFF;
    }

    #logo h1 a:hover { text-decoration: underline; }

    #logo p {
      padding: 130px 0 0 170px;
      font: italic 13px Georgia, "Times New Roman", Times, serif;
      color: #FFFFFF;
    }

    #logo p a {
      text-decoration: none;
      color: #FFFFFF;
    }

    #logo p a:hover { text-decoration: underline; }

    /* Content */

    #content {
      float: right;
      width: 600px;
    }

    /* Post */

    .post {
      margin-bottom: 25px;
    }

    .post .title {
      height: 30px;
      margin-bottom: 3px;
      padding: 8px 0px 2px 40px;
      background: url(tknologyk 2.0) no-repeat left top;
      color: #FFFFFF;
    }

    .post .date {
      float: right;
      margin-top: -45px;
      padding-right: 20px;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight: normal;
      font-size: 18px;
      color: #F1B566;
    }

    .post .meta {
      margin: -30px  0 3px 25px;
      padding: 2px 30px 2px 0px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 10px;
      color: #B6ACA2;
    }

    .post .meta a { color: #B6ACA2; }

    .post .entry {
      padding: 25px 20px 0px 20px;
    }

    .post .links {
      margin: 0 250px 0 0;
      padding: 0 0 0 0px;
    }

    .post .links .comments {
    }

    .post .links .permalink {
      padding-left: 17px;
    }

    /* Sidebar */

    #sidebar {
      float: left;
      width: 280px;
    }

    #sidebar ul {
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: normal;
    }

    #sidebar li {
      margin-bottom: 30px;
      padding: 0 0 20px 0px;
    }

    #sidebar li ul {
      line-height: 200%;
    }

    #sidebar li li {
      margin: 0;
      padding: 0 20px;
    }

    #sidebar p {
      margin: 0;
      padding: 0 20px;
    }

    #sidebar h2 {
      height: 33px;
      margin: 0 0 20px 0px;
      padding: 8px 0 2px 40px;
      background: url(http://pixelea.com/s/882a7f3f2f.jpg) no-repeat left top;
      font-size: 20px;
      color: #FFFFFF;
    }


    #sidebar p {
      line-height: 200%;
    }

    /* Calendar */

    #calendar {
    }

    #calendar caption {
      padding-bottom: 5px;
      font-weight: bold;
    }

    #calendar table {
      width: 100%;
      border-collapse: collapse;
      border-right: 1px solid #F5F2EF;
    }

    #calendar thead th {
      padding: 5px 0;
      text-align: center;
      border-top: 1px solid #F5F2EF;
      border-left: 1px solid #F5F2EF;
      background: #F5F2EF;
    }

    #calendar tbody td {
      padding: 5px 0;
      text-align: center;
      border-top: 1px solid #F5F2EF;
      border-left: 1px solid #F5F2EF;
    }

    #calendar tfoot td {
      padding: 5px;
    }

    #calendar tfoot #next {
      text-align: right;
    }

    #calendar #today {
      background: #E7F1E1;
    }

    /* Footer */

    #footer {
      width: 900px;
      margin: 0 auto;
      padding: 0;
      background: url(http://pixelea.com/s/159c6edd60.jpg) no-repeat left top;
      height: 61px;
    }

    #footer p {
      margin: 0;
      padding: 20px 0;
      text-align: center;
      line-height: normal;
      color: #FFFFFF;
    }

    #footer a {
      color: #F1B566;
    }


    }
     div.header, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6, #pre_header, #post_header, #header_container, #pre_content, #nav_heading{ display: none;} div#nav_container{display: none;} div#sidebar_container{display: none;} div.header{display: none;} div#counter{display: none;} h1#title{display: none;} h2#title span {display: none;} li.nav_element{display: none;} li.nav_element a{display: none;}

      Fecha y hora actual: Mar Oct 23, 2018 3:29 pm