tu-propia-plantilla

Diseño css 4

Texto por encima:

<body>
<div id="header">
   <div id="logo">
      <h1><a href="#">TITULO</a></h1>
      <p>DESCRIPCION</p>
   </div>
   <div id="menu">
      <ul>
         <li class="current_page_item"><a href="#">NOMBRE</a></li>
         <li><a href="#">NOMBRE</a></li>
         <li><a href="#">NOMBRE</a></li>
         <li><a href="#">NOMBRE</a></li>
         <li><a href="#">NOMBRE</a></li>
      </ul>
   </div>
</div>
<div id="page">
   <div id="leftbar" class="sidebar">
      <ul>
         <li>
            <h2>TITULO</h2>
            <ul>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
            </ul>
         </li>
         <li>
            <h2>TITULO</h2>
            <ul>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
            </ul>
         </li>
         <li>
            <h2>TITULO</h2>
            <ul>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
            </ul>
         </li>
         <li>
            <h2>TITULO</h2>
            <ul>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
               <li><a href="#">NOMBRE</a></li>
            </ul>
         </li>
      </ul>
   </div>
   <div id="content">
      <div class="post">

Texto por debajo:

Css-Code sin Style tags:

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

border: none;

}
a img {

border: none;

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

body {
   margin: 0;
   padding: 0;
   background: #0F5B96 url(http://img46.xooimage.com/files/0/9/9/img01-1d158f6.gif) repeat-x;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #A4E4F5;
}

input, textarea {
   background: #A4E4F5;
   border: 1px solid #FFFFFF;
   font: bold 13px Arial, Helvetica, sans-serif;
   color: #0F5B96;
}

h1, h2, h3, p, ol, ul {
   margin-top: 0;
}

h1, h2, h3 {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2 {
   text-transform: lowercase;
   font-weight: normal;
}

h1 {
   letter-spacing: -2px;
   font-size: 2.4em;
}

h2 {
   letter-spacing: -1px;
   font-size: 1.8em;
}

p, ol, ul {
   margin-bottom: 1.5em;
   line-height: 150%;
}

a {
   color: #A4E4F5;
}

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

img.left {
   float: left;
   margin: 4px 20px 0 0;
}

img.right {
   float: left;
   margin: 4px 0 0 20px;
}

hr {
   display: none;
}

#header {
   height: 150px;
   background: url(http://img26.xooimage.com/files/e/f/0/img02-1d15908.jpg) no-repeat center top;
   text-transform: lowercase;
}

#logo {
   float: left;
}

#logo h1, #logo p {
   float: left;
   margin: 0;
   line-height: normal;
}

#logo h1 {
   padding: 47px 0 0 20px;
   font-size: 3em;
   color: #62D6F5;
}

#logo p {
   padding: 69px 0 0 7px;
   letter-spacing: -1px;
   font-size: 1.4em;
   color: #199DD2;
}

#logo a {
   text-decoration: none;
   color: #62D6F5;
}

#menu {
   float: right;
}

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

#menu li {
   display: inline;
}

#menu a {
   float: left;
   width: 120px;
   height: 56px;
   margin: 0 0 0 2px;
   padding: 9px 0 0 0;
   background: #1B97CE url(http://img48.xooimage.com/files/c/b/e/img03-1d1591c.gif) no-repeat;
   text-decoration: none;
   text-align: center;
   letter-spacing: -1px;
   font-size: 1.1em;
   font-weight: bold;
   color: #000000;
}

#menu a:hover, #menu .current_page_item a {
   background: #26BADF url(http://img44.xooimage.com/files/a/0/8/img04-1d15931.gif) no-repeat;
}

#page {
   width: 980px;
   margin: 0 auto;
}

#content {
   float: left;
   width: 530px;
   padding: 0 0 0 25px;
}

.post {
   margin-bottom: 15px;
   background: #1EB5DD url(http://img28.xooimage.com/files/8/a/1/img05-1d1594a.gif) no-repeat;
   color: #0A416B;
}

.post a {
   color: #A4E4F5;
}

.post a:hover {
   color: #FFFFFF;
}

.post .title {
   margin: 0;
   padding: 30px 30px 0 30px;
}

.post .title a {
   text-decoration: none;
   color: #0A416B;
}

.post .byline {
   margin: 0;
   padding: 0 30px;
}

.post .entry {
   padding: 20px 30px 10px 30px;
}

.post .links {
   margin: 0;
   padding: 10px 30px 35px 30px;
   background: url(http://img40.xooimage.com/files/1/f/6/img06-1d15964.gif) repeat-x left bottom;
   border-top: 1px solid #2872A6;
}

.post .links a {
   padding-left: 10px;
   background: url(http://img24.xooimage.com/files/0/2/5/img08-1d159a9.gif) no-repeat left center;
   text-decoration: none;
   font-weight: bold;
   color: #0A416B;
}

.post .links a:hover {
   color: #FFFFFF;
}

.sidebar {
   float: left;
   width: 200px;
}

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

.sidebar li {
}

.sidebar li ul {
}

.sidebar li li {
   padding: 6px 0 6px 10px;
   background: url(http://img24.xooimage.com/files/0/2/5/img08-1d159a9.gif) no-repeat 0 12px;
   border-bottom: 1px solid #2872A6;
}

.sidebar li li a {
   text-decoration: none;
   color: #C9ECF5;
}

.sidebar li li a:hover {
   color: #FFFFFF;
}

.sidebar li h2 {
   padding-top: 20px;
   color: #FFFFFF;
}

#leftbar {
}

#rightbar {
   padding: 0 0 0 25px;
}

#searchform {
   padding-top: 20px;
   text-align: right;
}

#searchform br {
   display: none;
}

#searchform input {
   margin-bottom: 5px;
}

#searchform #s {
   width: 190px;
}

#calendar_wrap {
   padding-left: 10px;
}

#calendar_wrap table {
   width: 180px;
   text-align: center;
   border-collapse: collapse;
}

#calendar_wrap tfoot {
   font-weight: bold;
}

#calendar_wrap tfoot a {
   text-decoration: none;
}

#calendar_wrap #prev {
   text-align: left;
}

#calendar_wrap #next {
   text-align: right;
}

#calendar_wrap tbody {
   border-bottom: 1px solid #2872A6;
   border-right: 1px solid #2872A6;
}

#calendar_wrap tbody td {
   padding: 3px 0;
   border-top: 1px solid #2872A6;
   border-left: 1px solid #2872A6;
}

#calendar_wrap tbody td a {
   font-weight: bold;
}

#footer {
   clear: both;
   padding: 40px 0;
   background: #083253;
}

#footer p {
   text-align: center;
   font-size: smaller;
   color: #0F5B96;
}

#footer a {
   color: #0F5B96;
|

4083 visitantes

√ Inicio

Tu propia plantilla!

Queres una plantilla propia?, entonces estas en el lugar correcto!

Pwg Maker

Pwg Creator

Herramientas

Diseño css 4