18041 sujets

Questions générales et questions de débutants

Problème d'ancre, de CSS3, d'accordéon vertical et de position de pa

Bonjour, je suis nouveau ici (en tant qu'inscrit) Smiley biggrin

J'aime beaucoup ^^

Voilà mon souci. Smiley bawling

J'ai inséré des accordéons verticaux dans le site du bouleau, avec une activation par clic en pur html et css3. Smiley cligne

Le souci c'est que ça me descend tout le temps la page. Smiley fache

Je ne sais pas trop comment formuler mon problème, et comme des lignes de code valent mieux qu'une formulation vmaladroite, voici le code que j'utilise, simplifié. Smiley confused

HTML d'abord : Smiley murf 


<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
		<meta name="AUTHOR" content="Antoine HORY" />
		<meta name="LANGUAGE" content="fr" />
		<meta name="Publisher" content="PGC" />
		<title>test</title>
		<link rel="stylesheet" media="screen" type="text/css" href="index.css" />		
	</head>
  	<body>
		<article role="main">

<div id="avant">header
</div>
<h2>titre</h2>
<div class="verticalaccordion">
	<ul>
		<li class="block" id="block_1">
			<h3><a class="lienaccordion" href="#block_1">sous titre1</a></h3>
			<div class="accordioncontent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla enim, vitae varius nibh. Suspendisse a velit ut felis ullamcorper elementum. Sed vehicula ornare semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in viverra elit. Praesent at bibendum velit. Quisque eu urna nec arcu gravida mattis. Sed vitae arcu ac leo semper porttitor eu sed nisi. Etiam sagittis hendrerit lacus, viverra dignissim purus imperdiet ac. Mauris malesuada ultrices blandit. </p>
			</div>
			<div class="cboth"></div>
		</li>
		<li class="block" id="block_2">
			<h3><a class="lienaccordion" href="#block_2">sous titre2</a></h3>
			<div class="accordioncontent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla enim, vitae varius nibh. Suspendisse a velit ut felis ullamcorper elementum. Sed vehicula ornare semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in viverra elit. Praesent at bibendum velit. Quisque eu urna nec arcu gravida mattis. Sed vitae arcu ac leo semper porttitor eu sed nisi. Etiam sagittis hendrerit lacus, viverra dignissim purus imperdiet ac. Mauris malesuada ultrices blandit. </p>
			</div>
			<div class="cboth"></div>
		</li>
		<li class="block" id="block_3">
			<h3><a class="lienaccordion" href="#block_3">sous titre3</a></h3>
			<div class="accordioncontent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla enim, vitae varius nibh. Suspendisse a velit ut felis ullamcorper elementum. Sed vehicula ornare semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in viverra elit. Praesent at bibendum velit. Quisque eu urna nec arcu gravida mattis. Sed vitae arcu ac leo semper porttitor eu sed nisi. Etiam sagittis hendrerit lacus, viverra dignissim purus imperdiet ac. Mauris malesuada ultrices blandit. </p>
			</div>
			<div class="cboth"></div>
		</li>
		<li class="block" id="block_4">
			<h3><a class="lienaccordion" href="#block_4">sous titre4</a></h3>
			<div class="accordioncontent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla enim, vitae varius nibh. Suspendisse a velit ut felis ullamcorper elementum. Sed vehicula ornare semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in viverra elit. Praesent at bibendum velit. Quisque eu urna nec arcu gravida mattis. Sed vitae arcu ac leo semper porttitor eu sed nisi. Etiam sagittis hendrerit lacus, viverra dignissim purus imperdiet ac. Mauris malesuada ultrices blandit. </p>
			</div>
			<div class="cboth"></div>
		</li>
		<li class="block" id="block_5">
			<h3><a class="lienaccordion" href="#block_5">sous titre5</a></h3>
			<div class="metier accordioncontent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla enim, vitae varius nibh. Suspendisse a velit ut felis ullamcorper elementum. Sed vehicula ornare semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in viverra elit. Praesent at bibendum velit. Quisque eu urna nec arcu gravida mattis. Sed vitae arcu ac leo semper porttitor eu sed nisi. Etiam sagittis hendrerit lacus, viverra dignissim purus imperdiet ac. Mauris malesuada ultrices blandit. </p>
			</div>
			<div class="cboth"></div>
		</li>
		<li class="block" id="block_6">
			<h3><a class="lienaccordion" href="#block_6">sous titre6</a></h3>
			<div class="accordioncontent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla enim, vitae varius nibh. Suspendisse a velit ut felis ullamcorper elementum. Sed vehicula ornare semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in viverra elit. Praesent at bibendum velit. Quisque eu urna nec arcu gravida mattis. Sed vitae arcu ac leo semper porttitor eu sed nisi. Etiam sagittis hendrerit lacus, viverra dignissim purus imperdiet ac. Mauris malesuada ultrices blandit. </p>
			</div>
			<div class="cboth"></div>
		</li>
		<li class="block" id="block_7">
			<h3><a class="lienaccordion" href="#block_7">sous titre7</a></h3>
			<div class="accordioncontent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla enim, vitae varius nibh. Suspendisse a velit ut felis ullamcorper elementum. Sed vehicula ornare semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in viverra elit. Praesent at bibendum velit. Quisque eu urna nec arcu gravida mattis. Sed vitae arcu ac leo semper porttitor eu sed nisi. Etiam sagittis hendrerit lacus, viverra dignissim purus imperdiet ac. Mauris malesuada ultrices blandit. </p>
			</div>
			<div class="cboth"></div>
		</li>
		<li class="block" id="block_8">
			<h3><a class="lienaccordion" href="#block_8">sous titre8</a></h3>
			<div class="accordioncontent">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nulla enim, vitae varius nibh. Suspendisse a velit ut felis ullamcorper elementum. Sed vehicula ornare semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in viverra elit. Praesent at bibendum velit. Quisque eu urna nec arcu gravida mattis. Sed vitae arcu ac leo semper porttitor eu sed nisi. Etiam sagittis hendrerit lacus, viverra dignissim purus imperdiet ac. Mauris malesuada ultrices blandit. </p>
			</div>
			<div class="cboth"></div>
		</li>
	</ul>
</div>
<div id="apres">footer
</div>
</article>
	</body>
</html>


CSS3 ensuite : Smiley murf 

@charset "utf-8";

/*le tout*/

*{
	margin:0;
	padding:0;
	border:0;
}
body{
	color:#ccc;
	font-family:calibri, sans serif;
	background-color:#000;
}
.cboth{
	clear:both;
}
.contenutxt{
	margin:10px;
}

#avant{
	height:600px;
}
#apres{
	height:600px;
}

/*accordeon vertical*/

.verticalaccordion>ul>li>h3{
    display:block;
    height:29px;
	line-height:30px;
    border-top:#ccc 1px solid;
    text-decoration:none;
    text-transform:uppercase;
    color: #ccc;
    background: #000;
}
div.verticalaccordion{
	width: 850px;
	padding: 5px 0;
	margin-left: auto;
	margin-right: auto;
}	
div.verticalaccordion ul, div.verticalaccordion li{
	padding: 0px;
	margin: 0px;
	list-style: none;
}	
div.verticalaccordion li.block div{
	height: 0px;
	visibility: hidden;
	overflow: hidden;
}
div.verticalaccordion li:target .accordioncontent{
	max-width: 99%;
	height: 100%;
	visibility: visible;
	padding:15px 0;
}
.verticalaccordion>ul>li>h3:hover{
    cursor:pointer;
}
.lienaccordion{
	display:block;
    text-decoration:none;
	padding-left:5px;
    color: #ccc;
    background: #000;
}
.lienaccordion:hover{
	color:#000; 
	background: #ccc;
}


Voilà, je ne sais pas comment faire pour bloquer ce déplacement intempestif sans avoir recours à java.

Et sachant que j'ai déjà essayé avec un autre accordéon vertical en pur css3 qui se développe au passage de la souris ^^

Merc d'avance si quelqu'un arrive à m'aider sur ce problème de noob Smiley lol Smiley lol Smiley lol
Salut snake ^^ tu dois maintenant t'infiltrer.... Smiley biggol

Désolé, ça fonctionne pas. En fait tous les accordéons comme ça que j'ai trouvé ne fonctionne que si tout le contenu de la page est dans la page.

En y rajoutant une div exagérée de 600px en haut et en bas, le problème persiste ^^

Merci quand même
Sujet clos
Aller à