Sujet Précédent Sujet Suivant

Problème d'ancre, de CSS3, d'accordéon...

Fermé
crockstylie Messages postés 4 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 4 août 2011 - 4 août 2011 à 15:10
magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 - 4 août 2011 à 17:28
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 : 

<!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:

8 réponses

Réponse 1 / 8
magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
4 août 2011 à 15:40
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;
}
0
Réponse 2 / 8
crockstylie Messages postés 4 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 4 août 2011
4 août 2011 à 16:03
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
0
Réponse 3 / 8
magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
4 août 2011 à 16:09
height:200px;
margin-bottom:10px;
background-color:red;

essaye ça a la place de ce que j'ai ecrit comme un ane
0
Réponse 4 / 8
magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
4 août 2011 à 16:10
ça serrait pas un effet d'optique des fois car quand on tape la dernière ancre ça passe nikel je trouve
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
crockstylie Messages postés 4 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 4 août 2011
4 août 2011 à 16:19
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
0
Réponse 6 / 8
magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
4 août 2011 à 16:26
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?
0
Réponse 7 / 8
crockstylie Messages postés 4 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 4 août 2011
Modifié par crockstylie le 4/08/2011 à 16:38
Tu veux dire avec un :hover ?

Je continue à regarder sur le web, mais si ça continue je vais être obligé d'utiliser un truc avec jquey UI

Je trouvais ça cool que ça n'utilise que du css ^^
0
Réponse 8 / 8
magicshark Messages postés 402 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 6 mai 2014 13
4 août 2011 à 17:28
lol moi aussi mais y'a pas que le :hover qui existe ;)
0

Discussions similaires

Comment enlever la petite ancre ?
nenette -
m@rina -

24 réponses
Musique techno/Dance floor avec accordeon
Sidi-Officiel -
chaton27 -

4 réponses
Urgent Me débarrasser à jamais de l'ancre qui m'empèche d etrava
René -
m@rina -

4 réponses
recherche medley play back musette
piala -
marie51100 -

14 réponses
Recherche chanson techno avec fond accordéon
marielovehorses -
Suzger -

9 réponses