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