Foros del Web » Diseño web » CSS »

[SOLUCIONADO] Por favor una mano con acordeon realizado en css!

Estas en el tema de Por favor una mano con acordeon realizado en css! en el foro de CSS en Foros del Web. Hola foro! Tengo hecho un acordeon con css3 que de contenido solo tiene texto, nada mas... El problema es que no puedo centrarlo o ubicarlo ...
  #1 (permalink)  
Antiguo 25/03/2013, 15:43
Avatar de willycarp  
Fecha de Ingreso: enero-2013
Mensajes: 83
Antigüedad: 1 año, 10 meses
Puntos: 0
Por favor una mano con acordeon realizado en css!

Hola foro!
Tengo hecho un acordeon con css3 que de contenido solo tiene texto, nada mas...
El problema es que no puedo centrarlo o ubicarlo dentro del div que lo contiene, sino que me queda siempre en la esquina superior izquierda!!
Y no se donde le estoy pifiando en el codigo! ojalá puedan ayudarme.

Codigo html (pagina principal que llama a la pagina acordeon a traves de un include)
Código:
<body>

	<div id="conte_gral">
        <div id="conte_encabezado"> <?php include 'encabezado.php' ?> </div>
   	  	<div id="conte_body">    
            <div id="conte_servicios"> <?php include 'servicios.php' ?> </div>
            <div id="conte_cuerpo_acordeon">
            	<div id="acordeon"> <?php include 'acordeon.php' ?> </div>
            </div>
        </div>
        <div id="conte_pie"> <?php include 'pie.php' ?> </div>   
    </div>

</body>
Dentro de acordeon.php tengo el siguiente codigo:

Código:
		<div class="accordion horizontal">
		  <section id="about">
		      <h2><a href="#about">about</a></h2>
		      <p>Texto ejemplo 1.</p>
		  </section>
		  <section id="services">
		      <h2><a href="#services">services</a></h2>
		      <p>Texto ejemplo 2</p>
		  </section>
		  <section id="blog">
		      <h2><a href="#blog">blog</a></h2>
		      <p>texto ejemplo 3</p>
		  </section>
		</div>
y x ultimo este es el css:

Código:
body { font-size: 13px; line-height: 1.5; }
.accordion.horizontal #about p span {
	color: #a01007;
	font-weight: bold;
	font-family: BigNoodleTitling;
	font-size: 24px;
}
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

#conte_gral #conte_body #conte_cuerpo_acordeon {
	height: 555px;
	width: 1100px;
	margin: auto;
}

#conte_gral #conte_body #conte_cuerpo_acordeon #acordeon {
	height: 350px;
	width: 800px;
	margin: auto;
}


/*Define Accordion box*/
.accordion {
	width: 800px;
	overflow: hidden;
	color: #CCC;
	padding: 15px;
	height: 350px;
	background-color: #AD0701;
}


/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target {
	background: #FFF;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}
.accordion section:target:hover { background:#FFF; }
.accordion section:target h2 {width:100%;}
.accordion section:target h2 a{
	color: #9c1005;
	padding: 0;
	font-family: Calibri;
	font-weight: bold;
	font-size: 32px;
}
.accordion section:target p {
	display: block;
	font-family: Calibri;
	font-size: 18px;
	color: #000;
}
.accordion section h2 a{padding:8px 10px;display:block; font-size:26px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide*/
.accordion section{ float:left;	overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
.accordion section:hover {background:#444;}
.accordion section p { display:none; }
.accordion section:after{
	position: relative;
	font-size: 24px;
	color: #CCC;
	font-weight: bold;
}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:340px; 
	-moz-transition:width 0.2s ease-out; 
	-webkit-transition:width 0.2s ease-out;
  	-o-transition:width 0.2s ease-out;
	-ms-transition:width 0.2s ease-out;
  	transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:240px;left:13px;}

/*Header of closed slide*/
.horizontal section h2 { 
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	width:240px; position:relative; left:-100px; top:100px;
} 

/*On mouse over open slide*/
.horizontal :target{ width:81%;height:320px; }
.horizontal :target h2{ top:0px;left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg); 
}

Muchas gracias x su tiempo gente!!! ojala pueda resolverlo
  #2 (permalink)  
Antiguo 26/03/2013, 18:06
Avatar de willycarp  
Fecha de Ingreso: enero-2013
Mensajes: 83
Antigüedad: 1 año, 10 meses
Puntos: 0
Respuesta: Por favor una mano con acordeon realizado en css!

Se que es largo el código gente pero si alguno tiene 5 minutos se lo voy a agradecer mucho!!!
Necesito encontrarle la vuelta y no se cómo!!!!

Gracias!!
  #3 (permalink)  
Antiguo 26/03/2013, 18:45
 
Fecha de Ingreso: marzo-2013
Ubicación: Neuquén Capital
Mensajes: 109
Antigüedad: 1 año, 8 meses
Puntos: 8
Respuesta: Por favor una mano con acordeon realizado en css!

No entiendo a que te referis con que NO PODES CENTRARLO. Lo probé y se centra perfecto.

Igual podés aplicarle un estilo al #conte_gral

Código:
#conte_gral{
    position: absolute;
    margin-left: -550px;
    left:50%;
}
Esto lo centraría perfectamente si no me equivoco!

Avisá como te resulta!
  #4 (permalink)  
Antiguo 26/03/2013, 19:09
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 1.974
Antigüedad: 5 años, 9 meses
Puntos: 299
Respuesta: Por favor una mano con acordeon realizado en css!

Código CSS:
Ver original
  1. .accordion {
  2.     width: 800px;
  3.     overflow: hidden;
  4.     color: #CCC;
  5.     padding: 15px;
  6.     height: 350px;
  7.     background-color: #AD0701;
  8.         margin: 0 auto; /* para centrar el div accordion*/
  9. }

Esto no entiendo para que está, ya que es lo mismo que arriba, excepto el margin: auto.
Estás repitiendo cosas, y luego los choques de estilos serán dificil de digerir.

Código CSS:
Ver original
  1. #conte_gral #conte_body #conte_cuerpo_acordeon #acordeon {
  2.     height: 350px;
  3.     width: 800px;
  4.     margin: auto;
  5. }
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 26/03/2013, 19:58
 
Fecha de Ingreso: marzo-2013
Ubicación: Neuquén Capital
Mensajes: 109
Antigüedad: 1 año, 8 meses
Puntos: 8
Respuesta: Por favor una mano con acordeon realizado en css!

Estuve revisando lo que puse y tiene un error! :S

Lo que tenes que hacer, es acomodar lo que dijo C2am y eliminar esto:

Código HTML:
#conte_gral #conte_body #conte_cuerpo_acordeon #acordeon {
    height: 350px;
    width: 800px;
    margin: auto;
}
Y a la parte del class de .accordion, dejarlo de la siguiente forma! :) Probado y testeado! :D
Código HTML:
.accordion {
	width: 800px;
	overflow: hidden;
	color: #CCC;
	padding: 15px;
	height: 350px;
	background-color: #AD0701;
        position: absolute;
        left: 50%;
        margin-left: -400px;
}
  #6 (permalink)  
Antiguo 26/03/2013, 20:13
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 1.974
Antigüedad: 5 años, 9 meses
Puntos: 299
Respuesta: Por favor una mano con acordeon realizado en css!

Sigo en mi cruzada "no abuses de position:absolute" si no es absolutamente necesario.

Sobre todo viendo que el contenedor #conte_cuerpo_acordeon no tiene declarada la position en forma explicita, o sea es static, con lo cual la position:absolute se ubicará con respecto al padre que tenga definida la position:relative/absolute/fixed o, y espero no equivocarme, declarado el float.
Así que, no comparto lo de position:absolute, cuando con un simple margin: 0 auto, puedes centrar horizontalmente.
Ahora si también quieres centrarlo verticalmente ya sería otra cosa, algo más compleja.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 26/03/2013, 21:25
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: Michoacán, México
Mensajes: 4.521
Antigüedad: 6 años, 8 meses
Puntos: 730
Respuesta: Por favor una mano con acordeon realizado en css!

hola @C2am... yo recuerdo que hace algún tiempo con aplicar float al padre el position:absolute funcionaba, no se que a pasado pero recientemente aquí mismo en el foro me hicieron ver que no funciona.

Haciendo la prueba en un documento en blanco, se puede ver claramente que solo responde cuando el padre tiene position en cualquiera de las 3 variantes que has mencionado.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados ni ningún otro medio....
  #8 (permalink)  
Antiguo 26/03/2013, 23:00
 
Fecha de Ingreso: marzo-2013
Ubicación: Neuquén Capital
Mensajes: 109
Antigüedad: 1 año, 8 meses
Puntos: 8
Respuesta: Por favor una mano con acordeon realizado en css!

Cita:
Iniciado por ArturoGallegos Ver Mensaje
hola @C2am... yo recuerdo que hace algún tiempo con aplicar float al padre el position:absolute funcionaba, no se que a pasado pero recientemente aquí mismo en el foro me hicieron ver que no funciona.

Haciendo la prueba en un documento en blanco, se puede ver claramente que solo responde cuando el padre tiene position en cualquiera de las 3 variantes que has mencionado.
Igual cabe decir que YO PROBÉ lo que decia y no aplique position en el div contenedor. :) Solo text-align: left. para probar..


Salu2! Prueben el codigo!
  #9 (permalink)  
Antiguo 26/03/2013, 23:27
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 1.974
Antigüedad: 5 años, 9 meses
Puntos: 299
Respuesta: Por favor una mano con acordeon realizado en css!

No dudo en que funcione, sólo digo que con una linea de código (margin), en vez de tres (pos,margin, left) logras el mismo efecto.

Ahora, sigo pensando que en realidad se refiere al centrado vertical, porque el margin:auto está, lo cual lo centra horizontalmente, pero no verticalmente.

Veremos dijo un ciego
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #10 (permalink)  
Antiguo 27/03/2013, 17:09
Avatar de willycarp  
Fecha de Ingreso: enero-2013
Mensajes: 83
Antigüedad: 1 año, 10 meses
Puntos: 0
Respuesta: Por favor una mano con acordeon realizado en css!

Hola a todos y muchas gracias!!
como dijo C2am lo que necesito es centrarlo horizontalmente y verticalmente!
Hice lo que me recomendaron de unificar el codigo repetido pero efectivamente solo lo centra horizontalmente!
Tmb probé el codigo que puso SathyaSanles pero no funciona, queda todo como al principio!

Se puede centrar verticalmente tambien??

Gracias!!!
  #11 (permalink)  
Antiguo 27/03/2013, 17:20
Avatar de willycarp  
Fecha de Ingreso: enero-2013
Mensajes: 83
Antigüedad: 1 año, 10 meses
Puntos: 0
Respuesta: Por favor una mano con acordeon realizado en css!

Gente logré solucionarlo!!!!
Hice lo siguiente:

Código CSS:
Ver original
  1. #conte_gral #conte_body #conte_cuerpo_acordeon {
  2.     height: 555px;
  3.     width: 1100px;
  4.     display: table;
  5.     position: relative;
  6. }

Código CSS:
Ver original
  1. #conte_gral #conte_body #conte_cuerpo_acordeon #acordeon {
  2.     vertical-align: middle;
  3.     display: table-cell;
  4. }



Gracias x todo! me iluminaron y logré resolverlo!!!
  #12 (permalink)  
Antiguo 27/03/2013, 17:31
Avatar de willycarp  
Fecha de Ingreso: enero-2013
Mensajes: 83
Antigüedad: 1 año, 10 meses
Puntos: 0
Respuesta: Por favor una mano con acordeon realizado en css!

Los voy a volver locos! la emoción me llevó a contestar pero acabo de probarlo en chrome y en IE y no funciona! me manda el acordeón abajo de todo, a cualquier lado! arriba del pie de la pagina!
Pero en firefox si me funcionó perfecto!!!!

y ahora?
  #13 (permalink)  
Antiguo 27/03/2013, 20:15
 
Fecha de Ingreso: marzo-2013
Ubicación: Neuquén Capital
Mensajes: 109
Antigüedad: 1 año, 8 meses
Puntos: 8
Respuesta: Por favor una mano con acordeon realizado en css!

Podrías hacer lo que dije pero al revés!

Código CSS:
Ver original
  1. position: absolute;
  2. top: 50%;
  3. margin-top: -150px;

Si encuentro otra solu te comento! :D


Salu2!
  #14 (permalink)  
Antiguo 27/03/2013, 22:08
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 1.974
Antigüedad: 5 años, 9 meses
Puntos: 299
Respuesta: Por favor una mano con acordeon realizado en css!

Seguramente la lectura del siguiente post en el blog de kseso? te ayudará a comprender y luego solucionar el problema.
http://ksesocss.blogspot.com/2012/05...6-maneras.html

Fijate SathyaSanles que incluye tu propuesta

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #15 (permalink)  
Antiguo 27/03/2013, 23:01
 
Fecha de Ingreso: marzo-2013
Ubicación: Neuquén Capital
Mensajes: 109
Antigüedad: 1 año, 8 meses
Puntos: 8
Respuesta: Por favor una mano con acordeon realizado en css!

Cita:
Iniciado por C2am Ver Mensaje
Seguramente la lectura del siguiente post en el blog de kseso? te ayudará a comprender y luego solucionar el problema.
[url]http://ksesocss.blogspot.com/2012/05/centrando-al-centro-con-css-16-maneras.html[/url]

Fijate SathyaSanles que incluye tu propuesta

Saludos
Muy buen material colega! :)
  #16 (permalink)  
Antiguo 31/03/2013, 10:17
Avatar de willycarp  
Fecha de Ingreso: enero-2013
Mensajes: 83
Antigüedad: 1 año, 10 meses
Puntos: 0
Respuesta: Por favor una mano con acordeon realizado en css!

C2am muy buen articulo! gracias lo voy a tener presente...

SathyaSanles probé de la forma que me dijiste cambiando el margin-top x -180px y agregué margin-left: 160px; y me funciona perfecto!!

Gracias a los dos!!!!!

Última edición por willycarp; 31/03/2013 a las 10:59

Etiquetas: acordeon, css3, ubicacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:56.
SEO by vBSEO 3.3.2