Discussion :

[Invité]

Voici un exemple plus complet :

• http://codepen.io/jreaux62/pen/gpMavx

N.B. Pourquoi "sans float:left;" ??
Ca va très bien avec !

[mathieu]

N.B. Pourquoi "sans float:left;" ??
Ca va très bien avec !

non seulement ça va bien avec des "float" mais en plus, ils sont de plus en plus utilisé pour faire des designs responsifs.

[Maitre2B]

Le problème d'utiliser un float left c'est que l'affichage peut foirer suivant la taille de l'élément à sa gauche, surtout s'il grandit !

je te laisse regarder ce que donne un float:left pour l'instant : http://neo-web.fr/tutoriels/

Je n'ai pas encore fait les modifications de jreaux62 <3

[Invité]

J'ai résolu ça en jQuery.

Sinon, il faut imposer la hauteur.

[Maitre2B]

Merci à tous les deux.

J'ai adapté le code et voici le résultat : http://neo-web.fr/tutoriels/
Je suppose qu'il faut que j'utilise des images de la même taille pour que ce soit plus jolie.

Il y a 2 petits problèmes :
- le texte qui est toggle ne s'affiche pas par dessus (même si j'ai mis un z-index : 2)
- Il n'y a pas l'ombre sur les bordures lorsqu'il y a le toggle.


Serait-ce possible que lorsque l'utilisateur active le toggle, que ce qui se trouve en dessus soit décalé, plutôt que ce soit recouvert ?
Je suppose que non, j'ai déjà essayé de mettre une taille à ma classe .tutoriel et le toggle ne faisait plus décaler ce qui a en dessous vers le bas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
<article class="tutoriel"><figure class="tutoriel-img"><img src="http://neo-web.fr/wp-content/uploads/2014/08/seo-300x150.jpg" alt="Seo tutoriel néophyte web developpement neoweb" width="300" height="150" /></figure>
<header class="tutoriel-head">
<h2><a title="SEO – Référencement naturel" href="http://neo-web.fr/tutoriels/seo-referencement-naturel/" target="_blank">SEO - Référencement naturel</a></h2>
<div class="tutoriel-more more-desc"><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png" alt="" /></div>
</header>
<hr />
<div class="toggle-desc">
<div class="tutoriel-desc">Le*<strong>SEO</strong>*(search engine optimization), représente l'ensemble des techniques utilisées afin d'<strong>améliorer le référencement de son site web</strong>. Grâce au*<strong>référencement</strong>*de son site web, celui-ci sera mis en avant par les moteurs de recherches tel que Google. Avoir un site web bien référencé permet d'avoir un*<strong>maximum de visiteurs</strong>, ce qui est important !
<hr />
<div class="tutoriel-read"><a href="http://neo-web.fr/tutoriels/seo-referencement-naturel/" target="_blank">Lire l'article</a></div>
</div>
</div>
</article>
 
 
<article class="tutoriel"><figure class="tutoriel-img"><img src="http://neo-web.fr/wp-content/uploads/2014/08/13728036023-e1431769253290.jpg" alt="DeepWeb Tor tutoriel informatique web" /></figure>
<header class="tutoriel-head">
<h2>*<a title="Deep Web et Tor" href="http://neo-web.fr/tutoriels/deep-web-tor/" target="_blank">Deep Web et Tor</a></h2>
<div class="tutoriel-more more-desc"><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png" alt="" /></div>
</header>
<hr />
<div class="toggle-desc">
<div class="tutoriel-desc">Le <strong>Deep Web</strong>**<em>(en français web*profond)</em> est la partie du*web*accessible en ligne, mais <strong>non indexée</strong> par des*moteurs de recherche*classiques généralistes. Concrètement, environ <strong>75% du web est invisible</strong> (soit <span style="color: #252525;">environ un*</span>trilliard<span style="color: #252525;">*de pages non indexées)</span>*pour un utilisateur lambda. Avoir accès à ce web est un*moyen d'avoir accès aux contenus qui ne sont pas forcément légaux, car jugés<strong> dangereux</strong> par les gouvernements par exemple.
<hr />
<div class="tutoriel-read"><a title="Deep Web et Tor" href="http://neo-web.fr/tutoriels/deep-web-tor/" target="_blank">Lire l'article</a></div>
</div>
</div>
</article>
 
 
<article class="tutoriel"><figure class="tutoriel-img"><img src="http://neo-web.fr/wp-content/uploads/2014/08/follow-300x200.jpg" alt="Suivi des publicités siteweb tutoriel comment" width="300" height="200" /></figure>
<header class="tutoriel-head">
<h2><a title="Interdire le suivi des publicités" href="http://neo-web.fr/tutoriels/interdire-suivi-publicites/" target="_blank">Interdire le suivi des publicités</a></h2>
<div class="tutoriel-more more-desc"><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png" alt="" /></div>
</header>
<hr />
<div class="toggle-desc">
<div class="tutoriel-desc">Les <strong>navigateurs web</strong> proposent une <strong>fonctionnalité</strong> permettant d'<strong>annoncer aux sites web</strong> que vous consultez que vous ne souhaitez <strong>pas avoir un suivi de navigation</strong>. Concrètement, cela permet d'éviter de <strong> recevoir de la publicité intempestive</strong> sur un produit consulté après avoir visité un site marchand.
<hr />
<div class="tutoriel-read"><a title="Interdire suivi des publicités" href="http://neo-web.fr/tutoriels/interdire-suivi-publicites/" target="_blank">Lire l'article</a></div>
</div>
</div>
</article>
 
 
<article class="tutoriel"><figure class="tutoriel-img"><img src="http://neo-web.fr/wp-content/uploads/2014/08/bootstrap-300x138.png" alt="Bootsrap tutoriel css neo-web" width="300" height="138" /></figure>
<header class="tutoriel-head">
<h2><a title="Créer une page d’inscription" href="http://neo-web.fr/tutoriels/creer-une-page-inscription/">Créer une Page d'inscription*professionnelle</a></h2>
<div class="tutoriel-more more-desc"><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png" alt="" /></div>
</header>
<hr />
<div class="toggle-desc">
<div class="tutoriel-desc">
Le*<strong style="font-style: inherit;">framework Bootstrap</strong>*a été développé par*<strong style="font-style: inherit;">Twitter</strong>*afin*produire des*<strong style="font-style: inherit;">sites web en responsive design</strong>. Le*<strong style="font-style: inherit;">responsiv design</strong>*permettant d’adapter le contenu d’un site web par rapport à la*taille de l’écran de l’utilisateur.
<hr />
<div class="tutoriel-read"><a title="Interdire suivi des publicités" href="http://neo-web.fr/tutoriels/creer-une-page-inscription/" target="_blank">Lire l'article</a></div>
</div>
</div>
</article>
 
 
<article class="tutoriel"><figure class="tutoriel-img"><img src="http://neo-web.fr/wp-content/uploads/2014/08/jQuery-300x200.png" alt="jQurery tutoriel formulaire html input" width="300" height="200" /></figure>
<header class="tutoriel-head">
<h2><a title="jQuery – Page d’inscription" href="http://neo-web.fr/tutoriels/jquery-page-inscription/">Créer une page d'inscription professionnelle</a></h2>
<div class="tutoriel-more more-desc"><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png" alt="" /></div>
</header>
<hr />
<div class="toggle-desc">
<div class="tutoriel-desc">
La*<b>librairie*jQuery*</b><span style="font-weight: inherit; font-style: inherit;">e</span><span style="font-weight: inherit; font-style: inherit;">st un langage qui s’exécute*<strong style="font-style: inherit;">côté client</strong>*dès que la page HTML est chargée.</span> Utilisez*<strong style="font-style: inherit;">jQuery</strong>*afin de*<span style="font-weight: inherit; font-style: inherit; color: #303030;"><strong>tester que les champs obligatoires sont bien remplis</strong> sans avoir besoin d’envoyer le formulaire au serveur. </span><span style="font-weight: inherit; font-style: inherit; color: #303030;"><strong style="font-style: inherit;">Limitez les requêtes envoyées au serveur</strong>*quand des informations sont manquantes et éviter que le formulaire soit*re-soumis à l’utilisateur pour le compléter.</span> *
<hr />
<div class="tutoriel-read"><a title="tutoriel jquery page d'inscription" href="http://neo-web.fr/tutoriels/jquery-page-inscription/" target="_blank">Lire l'article</a></div>
</div>
</div>
</article>
 
 
 
<script>
$(function(){
 $( '.more-desc' ).on( 'click', function() {
	var parent_this = $(this).parent().parent();
	var toggle_this = parent_this.find('.toggle-desc');
	$('.toggle-desc').not(toggle_this).slideUp( 300 );
	toggle_this.slideToggle( 250 );
	$('.tutoriel').not(parent_this).removeClass('open');
	parent_this.toggleClass('open');
 });
});
function equalheight_newsbox() {
	var id = '.tutoriel';
	var H = 0;
	$(id).each( function() {
		H = Math.max( ($(this).find('figure').height() + $(this).find('header').height()), H );
	});
	$(id).height( H+'px' );
	$(id).find('.tutoriel-desc').css({'top':H+'px'});
};
$(window).on( 'load resize', function(){
	equalheight_newsbox();
});
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
/* TUTORIEL */
 
.toggle-desc {
	display: none;
	z-index:2;
}
 
 
.tutoriel hr {
	width: 96%;
	margin-top: 3px;
	margin-bottom: 3px;
}
 
.tutoriel {
	position:relative;
	float: left;
	width: 30%;
	background-color: menu;
	margin: 5px;
	-webkit-box-shadow: 0px 0px 2px 1px rgba(224,220,237,1);
	-moz-box-shadow: 0px 0px 2px 1px rgba(224,220,237,1);
	box-shadow: 0px 0px 2px 1px rgba(224,220,237,1);
 
}
 
.tutoriel img {
	margin-left: 2px;
	margin-bottom: 0em;
}
 
 
.tutoriel-more {
	width: 25px;
	height: 25px;
}
 
.tutoriel .tutoriel-desc{
	background-color: menu;
	z-index:2;
	padding-right: 3px;
	padding-left: 6px;
	margin-top: -10px;
	color: #585858;
   	-webkit-margin-before: 0em;
	  -webkit-margin-after: 0em;
	  -webkit-margin-start: 0px;
	  -webkit-margin-end: 0px;
	font-size: 13px;
}
 
.tutoriel .tutoriel-read {
	margin: 0px -10px 5px 5px;
	color: #ffffff;
}
 
.tutoriel .tutoriel-read  a, .tutoriel .tutoriel-read a:visited {
	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24537;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:2px;
	border:1px solid #d02718;
	padding: 3px 4px 3px 4px;
	color:white;
	font-family:Arial;
	font-size: 12px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
 
 
.tutoriel .tutoriel-read  a:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
	background-color:#c62d1f;
	color: #ffffff;
}
 
.tutoriel header {
    margin: 0 0 5px;
    position: relative;
}
.tutoriel header h2 {
    color: #0b4c5f;
    font-size: 1.4rem;
    padding: 0 30px 0 5px;
}
 
.tutoriel header .tutoriel-more {
    position: absolute;
    right: 4px;
    top: 2px;
}

En tout cas, j'ai bien appris au niveau du javascript !