[Résolu] Menu accordéon vertical

Bonjour à tous,

Voila j'ai un petit problème car je voudrai faire un design basé sur l'effet accordéon mais j'ai quelques soucis pour aligner le tout dans la page et le texte dans les blocs.

Voici deja mon code :

<div class="accordion">
				<div id="one" class="section">
					<h3>
						<a href="#one">Titre 1</a>
					</h3>
					<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>
				</div>
				<div id="two" class="section">
					<h3>
						<a href="#two">Titre 2</a>
					</h3>
					<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
				</div>
				<div id="three" class="section">
					<h3>
						<a href="#three">Titre 3</a>
					</h3>
					<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
					</div>
				</div>
				<div id="four" class="section large">
					<h3>
						<a href="#four">Titre 4</a>
					</h3>
					<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>

						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>
				</div>
				<div id="five" class="section">
					<h3>
						<a href="#five">Titre 5</a>
					</h3>
					<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
				</div>
				<div id="six" class="section">
					<h3>
						<a href="#six">Titre 6</a>
					</h3>
					<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
				</div>
			</div>

.accordion {
	font-family:arial;
	font-size:1.2em;
 	background: #ccc;
	padding: 1em;
	width: 500px;
	margin: 2em auto;
	border-radius:15px;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-o-transition:all 1s ease;
  -moz-transform:rotate(270deg);
  -webkit-transform:rotate(270deg);
  -o-transform:rotate(270deg);
}

.accordion:hover h2{
	color:#fff;
}
.accordion h2 {
	margin-top: 0;
	font-size:16px;
	font-weight: bold;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-o-transition:all 1s ease;
}

.accordion h3 {
	margin: 0;
	font-size:15px;
	font-weight: bold;
}

.accordion .section {
 	border-bottom: 1px solid #ccc;
	padding: 0 1em;
	padding-top:0;
	background: #333;
	color:#fff;
	font-size:13px;
}

.accordion h3 a {
	display: block;
	color:#999;
	text-shadow:1px 1px 3px #000;
	font-weight: normal;
	padding: 0.5em 0;
	text-decoration: none;
	-webkit-transition:color 1s ease;
	-moz-transition:all 1s ease;
	-o-transition:all 1s ease;
}

.accordion h3 a:hover {
	color:#fff;
}

.accordion h3 + div {
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.3s ease-in;
}

.accordion :target h3 a {
	text-decoration: none;
}

.accordion :target h3 + div {
	height: 820px;
}

.accordion .section.large:target h3 + div {
	overflow: auto;
}

.section div
{
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(0deg);

  color: black;
}

Et voici l’aperçu :ICI

Comme on peut le voir avant le clic sur un lien "accordion" n'est pas aligné et déborde en haut de la page. Aprés le clic la page s'agrandi créant un scroll... Et ensuite le texte sort du cadre et est au final la ou il devrait être si "accordion" n'avait pas bougé...
Comment aligner tous sa?

Merci de m'aider
Modifié par Mer2022 (26 May 2012 - 08:48)

:) , tiens déjà vu !

rotate(), c'est comme le positionement relatif. l'element visuellement peut-etre deplacé de sa position, mais dans la page il garde la place qu'il occupe normalement.

En passant d'ancre en ancre, ta page scroll de façon normal.

Solution:
positionement absolu en lui reservant la place dans un conteneur en relatif, taillé au dimension finale.
Indiqué son point de rotation avec transform-origin.

++

Probléme Résolu merci