Voici un exemple plus complet :
N.B. Pourquoi "sans float:left;" ??
Ca va très bien avec !
Voici un exemple plus complet :
N.B. Pourquoi "sans float:left;" ??
Ca va très bien avec !
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
J'ai résolu ça en jQuery.
Sinon, il faut imposer la hauteur.
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 dinscription" 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 dadapter le contenu dun site web par rapport à la*taille de lécran de lutilisateur. <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 dinscription" 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 sexé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 denvoyer 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 à lutilisateur 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>
En tout cas, j'ai bien appris au niveau du javascript !
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; }
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager