<!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>