[Question]signature avec effet accordéon

Ton body text ? C'est à dire Embarassed

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Code:

<body>
<BODY TEXT="#9890a5">
<BODY LINK="#9a4f34">
<BODY VLINK="#9a4f34">
<BODY ALINK="#9a4f34">

<ul>
<li>
<div id="a1">
<img src="http://img4.hostingpics.net/pics/582002barrsignAnn.png" />
<h1 style="width:385px; height:20px; text-align:center; font-size:14px; margin:auto;"><strong>~L'Actualité~</strong></h1></br>
<table cellpadding="0" cellspacing="0" border="0">

Dans ce passage ^^

_________________

Mon diplôme:

Hannnn !!! Pourquoi tu passes pas par le CSS ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Euh je sais pas xD
J'ai trouvé ça dans un des tutos ic mdr
Je sais pas du tout comment faire pour que le titre prenne cette couleur.
Je veux bien supprimer le Body text pour que le texte devienne noir mais le titre j'aimerai qu'il reste de cette couleur. (J'ai essayé de le mettre dans justement le h1 font size mais ça fonctionnait pas et je sais pas pourquoi :/)

_________________

Mon diplôme:

Alors alors, on va virer le "style" des h1 dans le html pour le mettre dans le css

-> html

Code:

<h1>ton titre</h1>

-> css

Code:

ul li h1{
width:385px;
height:20px;
text-align:center;
font-size:14px;
margin:auto;
color:#9890a5;
font-weight:bold;
margin-bottom:2px;
}

Ensuite, on met la couleur du texte dans les "p"

Code:

ul li p{
margin: 0;
padding: 0;
max-width: 340px;
display: block;
margin-left: 30px;
font-size:12px;
color:#fff;
}

Et on met le style des liens dans le CSS aussi et on vire les "body text" Smile

Code:

ul li a{
color:#9a4f34;
text-decoration:none;
}

ce qui donne

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</title>

<style>

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

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

ul li div{
display: block;
overflow: hidden;
height: 152px;
width: 20px;
background-image: url('http://img15.hostingpics.net/pics/431247sign1.png')

}

#a1{
width: 385px;
}

ul li img{
position: absolute;
border: solid 1px #163947;
}

ul li p{
margin: 0;
padding: 0;
max-width: 340px;
display: block;
margin-left: 30px;
font-size:12px;
color:#fff;
}

ul li h1{
width:385px;
height:20px;
text-align:center;
font-size:14px;
margin:auto;
color:#9890a5;
font-weight:bold;
margin-bottom:2px;
}

ul li a{
color:#9a4f34;
text-decoration:none;
}

</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 = 385;
minWidth = 20;

$("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://img4.hostingpics.net/pics/582002barrsignAnn.png" />
<h1>~L'Actualité~</h1>
   <table cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td width="50%">
            <p>* Du nouveau du côté du règlement ! Passez <a href="http://bullesdencre.forumgratuit.org/t1-regles-de-bienseance">y</a> jeter un oeil !</P>
         </td>
         <td width="50%">
            <p> * Inscrivez-vous dans le groupe des Abonnés pour recevoir l'Asyndète Diary !</p>
         </td>
      </tr>
   </table>
</div>
</li>
<li>
<div>
<img src="http://img4.hostingpics.net/pics/514297barrsigncons.png" />
<h1 style="width:385px; height:20px; text-align:center; font-size:14px; margin:auto;"><strong>~Les Conseils~</strong></h1></br>
<p>
* Nous mettons à votre disposition des <a href="http://bullesdencre.forumgratuit.org/f68-cours-particuliers">aides de Français</a>.
</p>
<p>
* Un souci ? Une question ? Venez chercher une <a href="http://bullesdencre.forumgratuit.org/f31-bureau-des-reclamations">réponse</a> !
</div>
</li>
<li>
<div>
<img src="http://img4.hostingpics.net/pics/895295barrsignrecrut.png" />
<h1>~Les Recrutements~</h1>
<p>
* Nous recrutons :</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t437-recrutement#8236">Illustrateurs</a> ,</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t228-recrutement-les-animateurs">Animateurs</a> ,</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t166-recrutement-la-biblio-a-besoin-d-aide">Bibliothécaires</a>.</p>
</p>
<p>
* Mais également :</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t438-recrutement-nous-recherchons-des-moderateurs#8239">Modérateurs</a> ,</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t284-recrutementcorrecteurs">Correcteurs</a> ,</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t165-recrutement-le-journal-recrute">Journalistes</a>.</p>
</div>
</li>
<li>
<div>
<img src="http://img4.hostingpics.net/pics/456893barrsigncont.png" />
<h1>~Les Contacts~</h1>

<p>
* Les Directrices :</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=1">Miki</a> (moi-même),</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=2">Elayne</a>.
</p>
<p>
* La Sécurité :
<p>- <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=8">Connem'</a>,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=5">Zaïtto</a>.
</p>
</div>
</li>
</ul>

</body>

</html>

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Merci

Miki a écrit:

Et j'ai trois petits soucis avec la liste...
Quand je ferme l'onglet il se passe un truc bizarre : Les colonnes de texte se remettent en gros et en une pile...
J'aimerai réguler l'espace entre les colonnes selon les "onglets" Plus collées, moins collés ce truc là ^^ C'est possible ? Smile

Dans l'onglet conseil la deuxième colonne est plus basse et je vois pas pourquoi Oo

Et pour ce dernier point tu peux m'aider ?
Après j'arrête Very Happy

_________________

Mon diplôme:

Tu peux me redonner ton code corrigé ? Smile

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Ouaip ^^

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</title>

<style>

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

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

ul li div{
display: block;
overflow: hidden;
height: 152px;
width: 20px;
background-image: url('http://img15.hostingpics.net/pics/431247sign1.png')

}

#a1{
width: 385px;
}

ul li img{
position: absolute;
border: solid 1px #163947;
}

ul li p{
margin: 0;
padding: 0;
max-width: 340px;
display: block;
margin-left: 40px;
font-size:12px;
color:#fff;
}

ul li h1{
width:385px;
height:20px;
text-align:center;
font-size:14px;
margin:auto;
color:#9890a5;
font-weight:bold;
margin-bottom:2px;
}

ul li a{
color:#9a4f34;
text-decoration:none;
}
</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 = 385;
minWidth = 20;

$("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://img4.hostingpics.net/pics/582002barrsignAnn.png" />
<h1>~L'Actualité~</h1></br>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%">
<p>* Du nouveau du côté du règlement ! Passez <a href="http://bullesdencre.forumgratuit.org/t1-regles-de-bienseance">y</a> jeter un oeil !</P>
</td>
<td width="50%">
<p> * Inscrivez-vous dans le groupe des Abonnés pour recevoir l'Asyndète Diary !</p>
</td>
</tr>
</table>
</div>
</li>
<li>
<div>
<img src="http://img4.hostingpics.net/pics/514297barrsigncons.png" />
<h1>~Les Conseils~</h1></br>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%">
<p>* Nous mettons à votre disposition des <a href="http://bullesdencre.forumgratuit.org/f68-cours-particuliers">aides de Français</a>.
</p>
</td>
<td width="50%">
<p>* Un souci ? Une question ? Venez chercher une <a href="http://bullesdencre.forumgratuit.org/f31-bureau-des-reclamations">réponse</a> !</p>
</td>
</tr>
</table>
</div>
</li>
<li>
<div>
<img src="http://img4.hostingpics.net/pics/895295barrsignrecrut.png" />
<h1>~Les Recrutements~</h1></br>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%">
<p>
* Nous recrutons :</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t437-recrutement#8236">Illustrateurs</a> ,</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t228-recrutement-les-animateurs">Animateurs</a> ,</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t166-recrutement-la-biblio-a-besoin-d-aide">Bibliothécaires</a>.</p>
</p>
</td>
<td width="50%">
<p>
* Mais également :</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t438-recrutement-nous-recherchons-des-moderateurs#8239">Modérateurs</a> ,</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t284-recrutementcorrecteurs">Correcteurs</a> ,</p>
<p>
- <a href="http://bullesdencre.forumgratuit.org/t165-recrutement-le-journal-recrute">Journalistes</a>.</p>
</td>
</tr>
</table>
</div>
</li>
<li>
<div>
<img src="http://img4.hostingpics.net/pics/456893barrsigncont.png" />
<h1>~Les Contacts~</h1></br>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%">
<p>
* Les Directrices :</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=1">Miki</a> (moi-même),</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=2">Elayne</a>.
</p>
</td>
<td width="50%">
<p>
* La Sécurité :
<p>- <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=8">Connem'</a>,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=5">Zaïtto</a>.
</p>
</td>
</tr>
</table>
</div>
</li>
</ul>

</body>

</html>

_________________

Mon diplôme:

Date d'inscription: 06/03/2011

Je me permets de relancer au cas où tu n'aurais pas vu ma réponse ^^

_________________

Mon diplôme:

Effectivement, je n'avais pas vu Embarassed

Citation:

Dans l'onglet conseil la deuxième colonne est plus basse et je vois pas pourquoi Oo

On a mis le contenu dans un tableau à 2 colonnes. Par défaut, en html, le contenu des cases d'un tableau se centre verticalement dans la case. Ici, si tu veux que le contenu soit au même niveau, il faut ajouter dans ton css

Code:

ul li table tr{
vertical-align:top;
}

Citation:

Quand je ferme l'onglet il se passe un truc bizarre : Les colonnes de texte se remettent en gros et en une pile...

ça c'est normal Smile

En effet, ton texte est dans un bloc avant une certaine largeur et il s'adapte à cette taille. Quand tu "joues" l'animation, la largeur diminue/augmente et du coup, le texte doit de nouveau s'adapter à la taille. Mais logiquement, une fois l'onglet fermé, on ne voit plus le souci Smile

Citation:

J'aimerai réguler l'espace entre les colonnes selon les "onglets" Plus collées, moins collés ce truc là ^^ C'est possible ?

Hum... Les colonnes du tableau ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

oui ^^
Les listes.
Par exemple dans un de mes onglets elles sont plus à gauche et il y a beaucoup d'espace à droite. Alors je me suis demandée si c'était possible de les éloigner l'une de l'autre ^^

Je rentre le code pour rectifier la différence de hauteur et si c'est normal pour l'effet bizarre ça me rassure Very Happy

Merci

_________________

Mon diplôme:

ah oui je vois ^^

Ajoute ça dans ton css

Code:

ul li table{
width:100%;
}

Il faut donner une largeur à ton tableau ^^

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Ben super merci Very Happy

Je crois que ma signa est farpaite Very Happy

Merci Miettes et désolée du dérangement ^^

_________________

Mon diplôme:

De rien

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 05/02/2012

Coucou, je ne trouve pas où mettre toute les images (liens) et je ne sais pas si mon code est juste alors voilà 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>La signature de Crystaline</title>

<style>

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

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

ul li div{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}

ul li img{
position: absolute;
border: 3px solid #881212;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
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://i43.servimg.com/u/f43/15/43/48/11/w9vsls10.jpg" />
<p>
<strong>Onglet1</strong><br/>
contenu Onglet1
</p>
</div>
</li>
<a>
<img src="http://i43.servimg.com/u/f43/15/43/48/11/w9vsls11.jpg" />
<p>
<strong>Onglet2</strong><br/>
contenu Onglet2
</p>
</a>
</li>
<li>
<div>
<img src="/images/onglet3.jpg" />
<p>
<strong>Onglet3</strong><br/>
contenu Onglet3
</p>
</div>
</li>
</body>

</html>

et voilà mes images :

Spoiler:

je ne pense pas qu'il en manque ...

Bonne journée