Mostrar datos con accordion.

ci2000 · #1 (**permalink**) 16/01/2010, 07:19

Hola, utilicé un accordion para mostrar datos.

La información a mostrar es bastante, por lo que quiero que al elegir la opción "Especificaciones" se abra toda la información. En Firefox me muestra una barra de scroll vertical y en IE no muestra nada.

Lo ideal sería que muestre todo al elegir la opción y no que muestra la barra de scroll.

Código:

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

Código:

#acordeon {
	border: none 0px;
	color: #7E7A7A;
	font-size: 12px;
	font-family: "Trebuchet MS";
	height:auto;
	overflow-x:hidden;
}

Gracias desde ya por las respuestas.
Saludos

masterojitos · #2 (**permalink**) 16/01/2010, 07:51

y crees q somos adivinos para solucionarte el por que no se bien tu acordion sin mostrarnos el codigo correcto.

solo nos muestras el html y css.... pero en si la solucion la harias tu mismo si revisas los ejemplos que deberia tener ese acordion y acoplarlo a tu web....

sino ps cambia de acordion que hay muchos.....

alexk · #3 (**permalink**) 16/01/2010, 08:24

si solo quieres quitar la barra

Código:

#acordeon {
	border: none 0px;
	color: #7E7A7A;
	font-size: 12px;
	font-family: "Trebuchet MS";
	height:auto;/*Dale un alto especifico*/
	overflow:hidden;/*quitale el -x*/
}

pero como te dicen no somos adivinos asi que no sabemos que pasa con tu acordeon... si no nos pones todo el codigo que hace que funcione este... si tienes la URL del problema mucho mejor chao!.

ci2000 · #4 (**permalink**) 16/01/2010, 13:19

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">&nbsp;</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

masterojitos · #5 (**permalink**) 18/01/2010, 09:49

en alguna parte de tu web.... le estad dando a los acordiones un alto y scroll predefinido... por que analizando tu web con firebug... vi este resultado en tu primer acordion:

<div id="acordeon" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 562px;" role="tabpanel">

si vez.... le da un alto de 562px.

y el segundo con el scroll en auto....

<div id="acordeon" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="overflow: auto; height: 562px; display: block; padding-top: 12px; padding-bottom: 12px;" role="tabpanel">

entonces..... fijate en que parte ocurre eso o simplemente como te comente descargate otro acordion por que hay mejores

suerte.