<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">   
<html>

<head>
<title>HTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
  p, h1, h2 {color: red;}
  h3 {text-align: center;}

.horizontalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
  margin: 0;
  padding: 0;
  list-style:none;
  height: 300px;
}
.horizontalaccordion>ul>li { /* definimos cada item de la lista */
  display: block;
  float: left;
  height: 300px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 40px;
  /* la parte personalizable */
  background:#303941;
  transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -webkit-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 { /* el titulo de cada pestaña */
  display: block;
  float: left;
  margin: 0;
  padding: 10px;
  height: 19px;
  width: 280px;
  /* la parte personalizable */
  border-left: 1px solid #303941;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  background:#CCC;
  white-space: nowrap;
  /* los efectos  para los diferentes navegadores */
  -moz-transform: rotate(90.0deg) translate(-40px,0px);
  -moz-transform-origin: 0 100%;
  -o-transform: rotate(90.0deg) translate(-40px,0px);
  -o-transform-origin: 0 100%;
  -webkit-transform: rotate(90.0deg) translate(-40px,0px);
  -webkit-transform-origin: 0 100%;
  transform: rotate(90.0deg) translate(-40px,0px);
  transform-origin: 0 100%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
  background: -moz-linear-gradient( top, #999999, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
.horizontalaccordion>ul>li>div {  /* el contenido oculto */
  display: none;
  float: left;
  height: 280px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  position: relative;
  width: 320px;
  left: 40px;
  top: -40px;
  *left:0px; *top:0px; /* esto es necesario para evitar problemas en IE7 */
}
.horizontalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
  overflow: hidden;
  width: 380px;
}
.horizontalaccordion:hover>ul>li:hover>div {
  display: block;
}
.horizontalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
  background: #000;
  color: #FFF;
  background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.horizontalaccordion>ul>li>h3:hover {
  cursor: pointer;
}


#topbar{
  background-color: #F35D5D;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  height: 70px;
  padding: 10px;
  position:absolute;
  width: 500px;
  visibility: visibile;
  z-index: 640;
font-family: arial;
font-size: 2em;
text-align: center;

}
//.cartelFijo {
  background-color: #0080FF;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-family: Tahoma;
  font-weight: bold;
  left: 20px; /* la coordenada horizontal donde se muestra */
  padding: 10px;
  position: fixed;  /* esto es lo que lo fija */
  text-align: justify;
  top: 160px; /* la coordenada vertical donde se muestra */
  width: 200px;  /* el ancho del cartel */
  z-index: 10000;
}
</style>
</head>

<body>
  <br><br>

<div class= "acordeon">


 <div class="horizontalaccordion">
    <ul>
        <li>
            <h3>Heading 1</h3>
            <div>Content For Panel 1.</div>
        </li>
        <li>
            <h3>Heading 2</h3>
            <div>Content For Panel 2.</div>
        </li>
        <li>
            <h3>Heading 3</h3>
            <div>Content For Panel 3.</div>
        </li>
        <li>
            <h3>Heading 4</h3>
            <div>Content For Panel 4</div>
        </li>
    </ul>
    </div>
</div>

<div id="topbar">Esta es una div con un fondo especial y un color: blanco</div>
<div class="cartelFijo">Esta es la clase para un cartel fijo</div>

<p style="background-color : silver; padding: 12px; position: absolute; left: 550px; float: rigth; top: 10px; width:140px">El cartel fijo en azul tiene la particularidad de ser una div con posicion absolute, modificada por las coordenadas horizontal y vertical <a href="http://wiii.me/wallpapersafull/categoria/paisajes">paisajes</a></p>
<div class="imagen">
<img src="..octas1/paisaje-caballo.jpg" width=400 height=230 />
</div>
</body>

</html>