[Question]signature avec effet accordéon

Toutes les questions concernant [ce tuto] se poseront ici.

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

L'édit de Miettes renvoie sur la même page :198967:

Je ne vois pas l'image dans le but

excellent cet effet accordéon

Coucou

C'est modifié ^^

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

bon me revoilà (déjà, si ! si !)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature accordéon</title>

<style type="text/css">

div#signature {
height: 100px;
width: 750px;
border: solid 3px #BC8F8F;
margin: auto; padding: auto;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

.onglet {
display: block;
width: 50px;
height : 90px;
color: #0000;
background: #fffF;
border: 2px solid green;
position: absolute;
}

ul{
list-style: none;
margin: 0;
padding: 0;

}

ul li{
float: left;
display: block;
margin-right: 5px;
}

ul li div{
display: block;
overflow: hidden;
height: 90px;
width: 50px;
border: solid 3px blue;
margin: auto;
padding: auto;

}

#a1{
width: 580px;
border: solid 3px red;

}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
vertical-align: middle;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 580;
minWidth = 50;

$("ul li div").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
</head>
<body>

<div id="signature">

<ul>
<li>
<div id="a1">
<span class="onglet">onglet 1</span>
<p>
<strong>Onglet1</strong><br/>
contenu Onglet1
</p>
</div>
</li>
<li>
<div>
<span class="onglet">onglet 2</span>
<p>
<strong>Onglet2</strong><br/>
contenu Onglet2
</p>
</div>
</li>
<li>
<div>
<span class="onglet">onglet 3</span>
<p>
<strong>Onglet3</strong><br/>
contenu Onglet3
</p>
</div>
</li>
</ul>
</div>

</body>

</html>

j'ai bien centrer mes cases rouges et bleus qui se déplient verticalement
mais je n'arrive pas à les centrer horizontalement dans mon cadre parme
j'ai mis des margin auto , padding auto
mais même en rajoutant un "text-align : center" dans le div.signature, ça ne le fait pas

merci de m'expliquer ce que je n'ai pas fait correctement :=):

deuxième problème : j'ai commencé à travailler la signature et j'ai un problème de positionnement des bannières et des textes dans l'onglet
j'ai fait un tableau pour y mettre les bannières , mais elles collent au cadre au lieu de coller à l'onglet malgré le margin:left
et pour les textes de l'onglet 1, c'est pareil, donc j'ai centré pour tricher en attendant vos lumières

je vous mets le code :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature accordéon</title>

<style type="text/css">

div#signature {
height: 145px;
width: 750px;
text-align: center;
}

.onglet {
display: block;
width: 50px;
height : 140px;
color: #0000;
background: #fffF;
position: absolute;
}

ul{
list-style: none;
margin: 0;
padding: 0;

}

ul li{
float: left;
display: block;
margin-right: 5px;
}

ul li div{
display: block;
overflow: hidden;
height: 140px;
width: 50px;
border-color: #97BB8A;
border-right: #FFFFFF;
border-top: #FFFFFF;
border-style: double;
border-width: 5px ;
      -moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
margin: auto;
padding: auto;
background-image:url("http://img28.imageshack.us/img28/2548/fondecrit.png")
}

#a1{
width: 580px;
border-color: #97BB8A;
border-right: #FFFFFF;
border-top: #FFFFFF;
border-style: double;
border-width: 5px ;
      -moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
vertical-align: middle;
}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 580;
minWidth = 50;

$("ul li div").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
</head>
<body>

<div id="signature">

<ul>
<li>

<div id="a1">
<span class="onglet"><img src="http://img11.imageshack.us/img11/1268/onglet1.png" alt="Site et Blog" title="Mon site chat et mon blog d'éleveur" border="0"/>
   </span>
   <p><h5>Début septembre, le forum va évoluer vers plus de technicité.
   <br/> Affuter vos crayons, éveillez vos cerveaux, tout le monde sera mis à contribution.
   <br/> Non ! je vous rassure, rien de bien méchant !
   <br/> Le forum va devenir un référant
   <br/> Vous en saurez plus fin août
<br/>Bonnes vacances pour les aoûtiens, travaillez bien pour les autres </h5>
</p>

</div>
</li>
<li>

<div>
<span class="onglet"><img src="http://img3.imageshack.us/img3/9628/onglet2.png" alt="Site et Blog" title="Mon site chat et mon blog d'éleveur" border="0"/></span>
<p>
<table width="479" height="125" border="1" cellspacing="3">
<tr>
<td width="471">
         <a href="http://www.nbcat.fr" target="_blank"><img src="http://img24.imageshack.us/img24/3189/minibann1.png" alt="Nbcat persans anciens types " title=" Mon site de chats persans"width="468" height="60" border="0" /></a>
         </td>
</tr>
<tr>
<td>
         <a href="http://nbcat.blog4ever.com/blog/index-41874.html" target="_blank"><img src="http://img83.imageshack.us/img83/692/blognbcattc8.gif" alt="Blog vie d'élevage" title="Mon Blog: Tout dire ou bien se taire" width="468" height="60" border="0" /></a>
         </td>
</tr>
</table>
</p>
</div>
</li>
<li>

<div>
<span class="onglet"><img src="http://img199.imageshack.us/img199/6955/onglet3.png" alt="concours" title="Les concours avatars et photos" border="0"/></span>
<p><h2>Concours photos et avatars</h2>
   Résultats des couettes à gogo : <a href="http://***"><span style="font-size: medium;" >ICI</span></a>
   <br/>
   Vote des ventres en l'air : <a href="http://***"><span style="font-size: medium;" >ICI</span></a>

</p>
</div>
</li>
</ul>
</div>

</body>

</html>

si je passe 3 heures sur une malheureuse signature, j'y arriverais jamais à faire le site lol!

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

Coucou

Ton premier problème est-il réglé ou pas ?

Pour ton second problème :

1/ On ne met pas de tableau dans une balise de paragraphe

2/ Pour centrer le tableau dans l'onglet => margin:auto;

Ensuite, dans l'onglet 1, tu as ça :

Code:

<p><h5>Début septembre, le forum va évoluer vers plus de technicité.

une balise "titre" dans une balise de paragraphe... Soit c'est un titre, soit c'est un paragraphe, mais ça ne peut pas être les 2 en même temps.

Ensuite, tes balises paragraphes ne font pas la bonne largeur :

Code:

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
vertical-align: middle;
}

120px alors que l'onglet fait 580px de large... (ton paragraphe doit faire environ 530px du coup)

Et du coup, on change le margin left => il doit faire la taille des images "titre" (ceux qui déclanchent l'onglet)

Je te laisse déjà voir tout ça ? ^^

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

fatalement, ça fonctionne mieux

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature accordéon</title>

<style type="text/css">

div#signature {
height: 145px;
width: 750px;
text-align: center;
}

.onglet {
display: block;
width: 50px;
height : 140px;
color: #0000;
background: #fffF;
position: absolute;
}

ul{
list-style: none;
margin: 0;
padding: 0;

}

ul li{
float: left;
display: block;
}

ul li div{
display: block;
overflow: hidden;
height: 140px;
width: 50px;
border-color: #97BB8A;
border-right: #FFFFFF;
border-top: #FFFFFF;
border-style: double;
border-width: 5px ;
      -moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
margin: auto;
padding: auto;
background-image:url("http://img28.imageshack.us/img28/2548/fondecrit.png")
}

#a1{
width: 580px;
border-color: #97BB8A;
border-right: #FFFFFF;
border-top: #FFFFFF;
border-style: double;
border-width: 5px ;
      -moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

ul li div p, ul li div table{
width: 530px;
display: block;
margin-left: 60px;
padding: auto;
}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 580;
minWidth = 50;

$("ul li div").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
</head>
<body>

<div id="signature">

<ul>
<li>

<div id="a1">
<span class="onglet"><img src="http://img11.imageshack.us/img11/1268/onglet1.png" alt="Site et Blog" title="Les nouveautés du forum" border="0"/>
   </span>
   <p>Début septembre, le forum va évoluer vers plus de technicité.
   <br/> Affuter vos crayons, éveillez vos cerveaux, tout le monde sera mis à contribution.
   <br/> Non ! je vous rassure, rien de bien méchant !
   <br/> Le forum va devenir un référant
   <br/> Vous en saurez plus fin août
<br/>Bonnes vacances pour les aoûtiens, travaillez bien pour les autres
</p>

</div>
</li>
<li>

<div>
<span class="onglet"><img src="http://img3.imageshack.us/img3/9628/onglet2.png" alt="Site et Blog" title="Mon site chat et mon blog d'éleveur" border="0"/></span>
<table>
<tr>
<td>
         <a href="http://www.nbcat.fr" target="_blank"><img src="http://img24.imageshack.us/img24/3189/minibann1.png" alt="Nbcat persans anciens types " title=" Mon site de chats persans"width="468" height="60" border="0" /></a>
         </td>
</tr>
<tr>
<td>
         <a href="http://nbcat.blog4ever.com/blog/index-41874.html" target="_blank"><img src="http://img83.imageshack.us/img83/692/blognbcattc8.gif" alt="Blog vie d'élevage" title="Mon Blog: Tout dire ou bien se taire" width="468" height="60" border="0" /></a>
         </td>
</tr>
</table>
</div>
</li>
<li>

<div>
<span class="onglet"><img src="http://img199.imageshack.us/img199/6955/onglet3.png" alt="concours" title="Les concours avatars et photos" border="0"/></span>
<p><strong>Concours photos et avatars</strong><br/><br/>
   Résultats des couettes à gogo : <a href="http://nbcat.bb-fr.com/t16954-concours-n70-couettes-a-gogo-les-resultats"><span style="font-size: medium;" >ICI</span></a>
   <br/>
   Vote des ventres en l'air : <a href="http://nbcat.bb-fr.com/t16910-vote-concours-avatar-on-montre-son-ventre"><span style="font-size: medium;" >ICI</span></a>

</p>
</div>
</li>
</ul>
</div>

</body>

</html>

le cas 1 , non, j'ai toujours de gros soucis pour centrer :triste:

Comme la sign' a changé depuis le premier message, tu pourrais me ré-expliquer le souci ? Embarassed

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

si ! si ! c'est deux choses différentes

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature accordéon</title>

<style type="text/css">

div#signature {
height: 100px;
width: 750px;
border: solid 3px #BC8F8F;
margin: auto; padding: auto;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

.onglet {
display: block;
width: 50px;
height : 90px;
color: #0000;
background: #fffF;
border: 2px solid green;
position: absolute;
}

ul{
list-style: none;
margin: 0;
padding: 0;

}

ul li{
float: left;
display: block;
margin-right: 5px;
}

ul li div{
display: block;
overflow: hidden;
height: 90px;
width: 50px;
border: solid 3px blue;
margin: auto;
padding: auto;

}

#a1{
width: 580px;
border: solid 3px red;

}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
vertical-align: middle;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 580;
minWidth = 50;

$("ul li div").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
</head>
<body>

<div id="signature">

<ul>
<li>
<div id="a1">
<span class="onglet">onglet 1</span>
<p>
<strong>Onglet1</strong><br/>
contenu Onglet1
</p>
</div>
</li>
<li>
<div>
<span class="onglet">onglet 2</span>
<p>
<strong>Onglet2</strong><br/>
contenu Onglet2
</p>
</div>
</li>
<li>
<div>
<span class="onglet">onglet 3</span>
<p>
<strong>Onglet3</strong><br/>
contenu Onglet3
</p>
</div>
</li>
</ul>
</div>

</body>

</html>

comment fait-on en général pour centrer ? ici malgré les auto en margin et paddin dans la division signature (donc ce qui entoure la signature accordéon), la signature accordéon n'est pas centrée
c'est régulier que je n'arrive pas à centrer un bloc dans un autre

Coucou

Là le souci de "centrage" vient du fait que les listes (li) soient "floattées" à gauche. C'est à dire que tu les obliges à s'aligner à gauche, peu importe ce qu'il se passe autour d'elle (d'ailleurs, si tu enlèves le "float:left;" tu verras que c'est centré ^^)

Du coup, la seule solution possible :

-> mettre la div "mauve" exactment de la bonne taille, et ajouter du padding

Code:

div#signature {
height: 100px;
width: 713px;
padding:5px;
border: solid 3px #BC8F8F;
margin: auto; padding: auto;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 19/11/2010

Bonjour !
J'essaie depuis quelques temps de règler la largeur et hauteur de la signature pour pouvoir y mettre ma signature 400*150px...
Comment est-ce que je fais ?

C'est ici :

Code:

div#signature {
height: Hpx;
width: Lpx;
}

Remplace L par la largeur de la sign' et H par la hauteur (en cas de souci, poste nous ton code ^^ qu'on visualise mieux le problème)

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 19/11/2010

Je ne vois pas où est le

Code:

div#signature {

^^'

Voici mon code :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Le titre de la page</title>

<style>

ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
background-color: #ffbad7
width: 400px
height: 175px

}

ul li div{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
border: white 2px solid

}

#a1{
width: 400px;
}

ul li img{
position: absolute;
}

ul li p{
margin: 0;
padding: 0;
width: 400px;
display: block;
margin-left: 85px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;

$("ul li div").click(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
</head>
<body>

<ul>
<li>
<div id="a1">
<img src="http://i215.photobucket.com/albums/cc219/KaylaAnime/Kawaii%20Stuff/th_ARibbon.gif?t=1247345109" />
<p>
<font style="text-weight; bold; font-family: georgia; font-size: 18px; text-spacing: 5; color: #f868a5; text-shadow: 1px 1px #000000">Signature ~</font><br/>
<img src="http://nsa27.casimages.com/img/2011/08/30/11083004453176249.png" alt="Signature..."/>
</p>
</div>
</li>

<li>
<div>
<img src="http://i215.photobucket.com/albums/cc219/KaylaAnime/Kawaii%20Stuff/th_ARibbon.gif?t=1247345109" />
<p>
<font style="text-weight; bold; font-family: georgia; font-size: 18px; text-spacing: 5; color: #f868a5; text-shadow: 1px 1px #000000">Who am I ?</font><br/>
contenu Onglet3
</p>
</div>
</li>

</ul>

</body>

</html>

Merci d'avance =) <3

Coucou

Alors, on va donner un nom d'id à l'image de ta sign' pour régler les permissions comme il faut.

Code:

Et dans le css, on va ajouter :

Code:

img#img_sign{
position:relative !important;
}

Pour faire en sorte qu'elle se ferme avec l'onglet

(j'avais mal compris ton problème)

Pour finir, il ne reste qu'à donner la bonne hauteur à ton bloc. Pour cela, il te suffit de remplacer le height:75px; ici

Code:

ul li div{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
border: white 2px solid

}

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 19/11/2010

Bonjour !
J'ai fait ce que tu as dis, mais...
Quand je prévisualise, les deux onglets sont ouverts, avec la signature affichée sur l'onglet 1. Puis si je clique sur l'onglet 2, le 1 se ferme avec la signature (<< bon point ^^) et tout s'affiche normalement. Mais quand je reclique sur l'onglet 1, la signature est coupée à 2/3.
En plus que cela, le fond rose de la signature disparaît quand je touche au "height"...

Peux-tu m'aider ? Désolée de te déranger...
Voici mon code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Le titre de la page</title>

<style>

ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
background-color: #ffbad7
width: 400px
height: 175px

}

ul li div{
display: block;
overflow: hidden;
height: 200px;
width: 75px;
border: white 2px solid

}

img#img_sign{
position:relative !important;
}

#a1{
width: 400px;
}

ul li img{
position: absolute;
}

ul li p{
margin: 0;
padding: 0;
width: 400px;
display: block;
margin-left: 85px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;

$("ul li div").click(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
</head>
<body>

<ul>
<li>
<div id="a1">
<img src="http://i215.photobucket.com/albums/cc219/KaylaAnime/Kawaii%20Stuff/th_ARibbon.gif?t=1247345109" />
<p>
<font style="text-weight; bold; font-family: georgia; font-size: 18px; text-spacing: 5; color: #f868a5; text-shadow: 1px 1px #000000">Signature ~</font><br/>
<img src="http://nsa27.casimages.com/img/2011/08/30/11083004453176249.png" alt="Signature..." id="img_sign"/> </p>
</div>
</li>

<li>
<div>
<img src="http://i215.photobucket.com/albums/cc219/KaylaAnime/Kawaii%20Stuff/th_ARibbon.gif?t=1247345109" />
<p>
<font style="text-weight; bold; font-family: georgia; font-size: 18px; text-spacing: 5; color: #f868a5; text-shadow: 1px 1px #000000">Who am I ?</font><br/>
contenu Onglet3
</p>
</div>
</li>

</ul>

</body>

</html>