Problème d'ancre, de CSS3, d'accordéon...
crockstylie
Messages postés
4
Statut
Membre
-
magicshark Messages postés 445 Statut Membre -
magicshark Messages postés 445 Statut Membre -
Bonjour, Je suis nouveau en tant qu'inscrit.
J'aime beaucoup ^^
Voilà mon souci.
J'ai inséré des accordéons verticaux dans le site du bouleau, avec une activation par clic en pur html et css3. cligne
Le souci c'est que ça me descend tout le temps la page.
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é.
HTML d'abord :
CSS3 ensuite :
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
J'aime beaucoup ^^
Voilà mon souci.
J'ai inséré des accordéons verticaux dans le site du bouleau, avec une activation par clic en pur html et css3. cligne
Le souci c'est que ça me descend tout le temps la page.
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é.
HTML d'abord :
<!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 :
@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
A voir également:
- Problème d'ancre, de CSS3, d'accordéon...
- Ancre elementor - Forum Wordpress
- Musique techno accordéon 2009 ✓ - Forum Musique / Radio / Clip
- Accordeon garageband - Forum Création et production musicale
- Playback accordéon mp3 gratuit - Forum Musique / Radio / Clip
- Recherche chanson techno avec fond accordéon - Forum Musique / Radio / Clip
8 réponses
j'ai un peu modifier le css si j'ai bien compris le problème n'est plus comme ça ?
#apres{
height:200px;
position:absolut;
bottom:10px;
background-color:red;
}
J'ai fait ça mais ça change rien (position:absolute*)
avec une height de 200px le problème est toujours là mais la div est juste plus petite ^^
en gros dans le site existant ça donne ça : http://appli-phone.com/?to=client
et j'arrive pas à changer ça ^^
Merci quand même
avec une height de 200px le problème est toujours là mais la div est juste plus petite ^^
en gros dans le site existant ça donne ça : http://appli-phone.com/?to=client
et j'arrive pas à changer ça ^^
Merci quand même
height:200px;
margin-bottom:10px;
background-color:red;
essaye ça a la place de ce que j'ai ecrit comme un ane
margin-bottom:10px;
background-color:red;
essaye ça a la place de ce que j'ai ecrit comme un ane
ça serrait pas un effet d'optique des fois car quand on tape la dernière ancre ça passe nikel je trouve
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
J'ai essayé sans le position:absolute; déjà. Et pas d'illusion d'optique, sous aucun navigateur du monde connu :D
En fait le souci c'est que ça remonte au lieu de se mettre au milieu de l'écran.
Vois sur le vrai site, tu verras que c'est pas beau, il faudrait qu'on voit encore le header quand on clik sur la première ancre.
http://appli-phone.com/?to=client
En fait le souci c'est que ça remonte au lieu de se mettre au milieu de l'écran.
Vois sur le vrai site, tu verras que c'est pas beau, il faudrait qu'on voit encore le header quand on clik sur la première ancre.
http://appli-phone.com/?to=client
ahhh mais les ancres sont censée faire ça nous mettre directement là ou on est en haut de la page mais par contre pkoi des ancres en faite car dans un menu ok pour aller plus vite mais là tu peux pas faire comme pour un menu déroulant sauf que ça serait au click?
