Bien, gracias por responder. Aquí va todo el código:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Este es un comentario y no sera tomado en cuenta por el navegador -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Multiservis</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
});
</script>
</head>
<body>
<div id="medio">
<a name='arriba'></a>
<div id="izquierda">
<div id="izquierdasolo">
<p class="tituloceleste1">Catálogo de Productos</p>
<div id="accordion" class="textogris1">
<h3 style="border: none 0px;"><a href="#">Características principales</a></h3>
<div id="acordeon">
<p class="textogris1">
F1uidez, seguridad y ahorro: las tres palabras clave que necesita toda solución de oficina. La Aficio™MP 171/MP 171F/MP 171SPF es la respuesta a estas necesidades. Compactos pero rápidos, estos productos multifuncionales de tamaño A4 son más potentes de lo que indican sus dimensiones. Disfrute de un amplio abanico de funciones con un coste total de la propiedad incomparable. Además, la MP 171SPF puede personalizarse con nuestro kit de
desarrollo de software, lo que aporta un valor añadido a sus equipos actuales.
<p class="textogris1"> </p>
<ul id="lista" class="textogris1">
<li>Copia rápida (17 ppm).</li>
<li>Copias dúplex estándar.</li>
<li>Prestaciones de fax avanzadas (MP 171F/MP 171SPF).</li>
<li>Multifuncionalidad estándar (MP 171SPF).</li>
<li>Funciones de escaneo múltiple "Push Scan" (MP 171SPF).</li>
</ul>
</p>
</div>
<h3 style="border: none 0px;"><a href="#">Especificaciones</a></h3>
<div id="acordeon">
<div id="Layer1" style="position: absolute; left: 10px; top: 5px; width: 414px; height: 20px ;z-index: 1"><h3><p class="tituloceleste1">COPIADORA</p></h3></div>
<div id="Layer2" style="position: absolute; left: 10px; top: 35px; width: 500px; height: 19px ;z-index: 2"><hr noshade="noshade" size="1"></div>
<div id="Layer3" style="position: absolute; left: 10px; top: 54px; width: 242px; height: 19px ;z-index: 3"><strong>Proceso de copia</strong></div>
<div id="Layer4" style="position: absolute; left: 252px; top: 54px; width: 300px; height: 19px ;z-index: 4">Escaneo láser e impresión electrofotográfica</div>
<div id="Layer5" style="position: absolute; left: 10px; top: 73px; width: 500px; height: 19px ;z-index: 5"><hr noshade="noshade" size="1"></div>
<div id="Layer6" style="position: absolute; left: 10px; top: 92px; width: 242px; height: 19px ;z-index: 6"><strong>Velocidad de copia</strong></div>
<div id="Layer7" style="position: absolute; left: 252px; top: 92px; width: 300px; height: 19px ;z-index: 7">17 copias por minuto</div>
<div id="Layer8" style="position: absolute; left: 10px; top: 111px; width: 500px; height: 19px ;z-index: 8"><hr noshade="noshade" size="1"></div>
<div id="Layer9" style="position: absolute; left: 10px; top: 130px; width: 242px; height: 19px ;z-index: 9"><strong>Resolución</strong></div>
<div id="Layer10" style="position: absolute; left: 252px; top: 130px; width: 300px; height: 19px ;z-index: 10">600 dpi</div>
<div id="Layer11" style="position: absolute; left: 10px; top: 149px; width: 500px; height: 19px ;z-index: 11"><hr noshade="noshade" size="1"></div>
<div id="Layer12" style="position: absolute; left: 10px; top: 168px; width: 242px; height: 19px ;z-index: 12"><strong>Copia múltiple</strong></div>
<div id="Layer13" style="position: absolute; left: 252px; top: 168px; width: 300px; height: 19px ;z-index: 13">Hasta 99</div>
<div id="Layer14" style="position: absolute; left: 10px; top: 187px; width: 500px; height: 19px ;z-index: 14"><hr noshade="noshade" size="1"></div>
<h3 style="border: none 0px;"><a href="#">Opciones</a></h3>
<div id="acordeon">
<ul id="lista" class="textogris1">
<li> Precalentamiento muy rápido y elevada velocidad de la primera copia</li>
<li> Gran versatibilidad de soportes</li>
<li> Funcionamiento intuitivo que confiere una facilidad de uso óptima</li>
<li> Diseñada para ser rentable.</li>
<li> Copia rápida (17 ppm).</li>
<li> Tapa de exposición</li>
<li> Tarjeta VM</li>
<li> Unidad de seguridad de sobrescritura de datos</li>
<li> Ethernet Gigabit</li>
<li> Interface de contador</li>
<li> Equipo de codificación del disco duro</li>
<li> LAN inalámbrica (IEEE 802.11 a/b/g)</li>
<li> Remote Communication Gate</li>
<li> Remote Communication Gate BN1</li>
<li> Disco duro de 80 GB</li>
<li> Tirador de accesibilidad (solo en bandeja estándar)</li>
<li> LAN inalámbrica</li>
<li> PostScript® 3™</li>
<li> IEEE 1284</li>
<li> Escaneo a SD/USB</li>
<li> Soluciones de software profesionales</li>
</ul>
</div>
</div>
</div>
</div>
<div id="derecha">
<img src="empresas.png" alt=""/></div><div class="corte">
</div>
</div>
<div id="pie"><p class="textoblanco">Diseñado por Javier Payret | Mapa del Sitio | Intranet | (PÁGINA EN CONSTRUCCIÓN)</p></div>
</body>
</html>
y el css:
Código:
* {
list-style:none;
margin:0px;
padding:0px;
border:0;
}
#medio {
background-color:#F0F0F0;
width: 100%;
}
#izquierda {
background-color:#FFFFFF;
float:left;
min-height:460px;
height: 100%;
width: 664px;
background-image: url(izquierda.png);
background-repeat: repeat-x;
background-position: top;
padding-top: 38px;
}
#izquierdasolo {
float:left;
min-height:300px;
height: 100%;
width: 624px;
margin-left:20px;
}
#derecha {
background-color:#F0F0F0;
float: left;
min-height:466px;
height: 100%;
width: 313px;
border-left-width: 0px;
border-left-style: solid;
border-left-color:#CECECE;
padding-top: 32px;
padding-left: 25px;
}
#pie {
background-color:#333333;
float:left;
height: 40px;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#acordeon {
border: none 0px;
color: #7E7A7A;
font-size: 12px;
font-family: "Trebuchet MS";
height:auto;
}
.tituloceleste1 {
float:left;
color: #428CDB;
font-size: 18px;
font-family: "Tahoma";
font-weight: bold;
width:624px;
margin-top: 20px;
margin-bottom:15px;
}
.textogris1 {
color: #7E7A7A;
font-size: 12px;
font-family: "Trebuchet MS";
float:left;
width:100%;
}
.textogris1 ul{
list-style:inherit;
list-style-type:circle;
}
#lista ul {
padding-left: 0; /*Limpieza de márgenes*/
margin-left: 0px; /*Indentado de la lista*/
list-style-type: none; /*Quitar estilo de viñeta*/
}
#lista li {
background: url(vineta.jpg) left center no-repeat;
margin-bottom: 10px;
padding-left: 15px;
}
.corte { clear: both;}
#menu {
width: 241px;
}
#menu li a {
height: 26px;
text-decoration: none;
font-family:"Trebuchet MS";
font-size:14px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#FF0033;
margin-left:0px;
}
#menu li a:link, #menu li a:visited {
color: #fff;
display: block;
padding: 8px 0 0 5px;
}
#menu li a:hover {
background-color:#990000;
padding: 8px 0 0 5px;
}
#menu li a:active {
background-color:#990000;
padding: 8px 0 0 5px;
}
y el link:
http://www.multiservis.com.uy/catalogo.php#medio
Como verán al elegir "Características principales", "Especificaciones" y "Opciones" se van muy abajo, (creo que se ajusta a la altura del contenido de "Opciones".
Al elegir "Especificaciones" se ven barras de scroll. Quiero que se despliege toda la información sin las barras de scroll.
Saludos y gracias