Wordpress : problème alignement & autre

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Je possède un Wordpress, et j'ai regardé des plugins pour avoir un certain design dans la présentation de mes postes.
http://neo-web.fr/tutoriels/
Je suis tombé sur ce screenshot et j'ai décidé de le reproduire.

Pièce jointe 177499

Voici mon code HTML (où se trouve le titre, la touche pour toggle, la description).

Code:

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
 
<div class="tutoriel">
 <a href="http://neo-web.fr/tutoriels/seo-referencement-naturel/">
  <img class="alignleft wp-image-36 size-medium" 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" />
 </a>
 <div class="tutoriel-head">
  <a title="SEO - Référencement naturel" href="http://neo-web.fr/tutoriels/seo-referencement-naturel/">
   <h2>SEO - Référencement naturel</h2>
  </a>
  <span class="tutoriel-more" id="more-desc" ><img src="arrow.png"></span> 
 </div>
 <hr>
 <div id="toggle-desc">
  <div class="tutoriel-desc"> 
   <p>
    Le <strong>SEO</strong> (search engine optimization), représente l'ensembles 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 !
   </p>
  </div>
 
  <div class="tutoriel-read">
   <hr>
   <a href="#">READ MORE</a>
  </div>
 
 </div>
</div>

Et voici mon CSS pour essayer d'approcher au mieux le design de l'image que j'ai posté au dessus.

Code:

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
 
.tutoriel {
 width: 250px;
 background-color: menu;
 border: solid 1px black;
 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);
   -webkit-margin-before: 0em;
   -webkit-margin-after: 0em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
}
 
.tutoriel img {
 width: 250px;
 -webkit-margin-before: 0em;
   -webkit-margin-after: 0em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
}
 
.tutoriel .tutoriel-head {
 float: left;
 width: 250px;
 padding: 4px 0px 5px 0px;
 background-color: menu;
}
 
.tutoriel .tutoriel-head img{
 width:20px;
 height: 20px;
}
 
.tutoriel .tutoriel-head .tutoriel-more {
 float: right;
 padding-right: 4px;
}
 
.tutoriel h2{
 padding-left: 2px;
 float: left;
 font-size: 15px;
 color: #0B4C5F;
 -webkit-margin-before: 0em;
   -webkit-margin-after: 0em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
}
 
.tutoriel .tutoriel-desc{
 background-color: menu;
 padding: 0px 2px 0px 4px;
 margin-top: -10px;
 color: #585858;
    -webkit-margin-before: 0em;
   -webkit-margin-after: 0em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
}
 
.tutoriel .tutoriel-read {
 margin: 0px 8px 9px; 
}
 
.tutoriel .tutoriel-read  a {
 -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:#ffffff;
 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;
}

Avec ces codes HTML/CSS, j'arrive à ça normalement:
http://zupimages.net/up/15/20/nz8w.png

Mais lorsque je rajoute tout ce CSS dans mon Wordpress, puis j'ajoute mes classes au HTML déjà présent... c'est tout moche et même le <h2> n'est pas aligné avec la touche :s
Auriez-vous des idées pour régler ce problème ?

Il y a aussi beaucoup d'espace autour de <hr>, savez-vous comment les modifier ? (j'ai déjà essayé margin/padding)

Merci à tous pour votre aide.

Voilà le code pour faire le toggle, pas spécialement utile dans le cas présent, mais bon.

Code:

1
2
3
4
5
6
7
 
<script>
 $( "#more-desc" ).click(function() {
           $( "#toggle-desc" ).slideToggle( "slow", function() {
    });
  });
</script>

<config>Windows 7 / Chrome 42.0.2311.135</config>

13/05/2015, 08h10
mathieu

est ce que tu peux nous montrer le résultat comme ça on pourra étudier le code HTML et CSS de façon globale

c'est peut-être le code CSS du thème qui est prioritaire sur certains éléments et qui modifie ce que tu as fait
13/05/2015, 13h28
Maitre2B

Bonjour Mathieu,

Je pense que c'est effectivement le CSS du wordpress qui doit avoir la priorité sur mes class CSS.

Voici le résultat:

On peut voir que : - l'image est décalée en haut & en bas.
- l'image pour faire le toggle n'est pas aligné avec le titre <h2>
- un <hr> a disparu (surement sous une autre <div>
- il y a énormément d'espace entre les <hr>
- ...

Je doute que placer ici TOUT le code CSS du wordpress soit une bonne idée. ^^
13/05/2015, 14h02
Invité

Bonjour,
par contre, tu peux fournir le lien vers la page en ligne !

D'autre part, il xiste un explorateur avec Chrome, ou Firebug avec Firefox.
Ca permet de voir quelles lignes de code CSS prennent le dessus.
13/05/2015, 14h04
Maitre2B

Pour l'instant je ne mets pas les modifications car ce n'est pas fini et assez moche, je laisse le design de base.

http://neo-web.fr/tutoriels/
13/05/2015, 14h06
Invité

Alors, on fait comment ?
On devine ? :roll:

[Edit] elles sont où les <div class="tutoriel"> ??
13/05/2015, 14h22
Maitre2B

C'est bon, c'est en ligne.

http://neo-web.fr/tutoriels/#

Voilà ce qu'on trouve dans ton code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="tutoriel">
<p>		<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" /></p>
<div class="tutoriel-head">
		<a title="SEO – Référencement naturel" href="http://neo-web.fr/tutoriels/seo-referencement-naturel/"></p>
<h2>SEO – Référencement naturel</h2>
<p>		</a><br />
		<span class="tutoriel-more" id="more-desc" ><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png"/></span>
	</div>
<hr />
<div id="toggle-desc">
<div class="tutoriel-desc">
<p>
				Le <strong>SEO</strong> (search engine optimization), représente l&rsquo;ensembles des techniques utilisées afin d&rsquo;<strong><br />
				améliorer le référencement de son site web</strong>.<br />
				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.<br />
				Avoir un site web bien référencé permet d&rsquo;avoir un <strong>maximum de visiteurs</strong>, ce qui est important !
			</p>
</p></div>
<div class="tutoriel-read">
<hr />
			<a href="#">READ MORE</a>
		</div>
</p></div>
</div>

Tu ne penses pas qu'il y a des balises en trop ou mal placées ?

Commence par nettoyer le code...

N.B. Bizarrement, ce n'est pas le même code que tu montres dans ton 1er message :koi:

On dirait bien que de <p> se sont ajoutés.
je vais regarder du côté de mon wordpress...

Je viens de faire un copier/coller depuis mon editeur de texte sur wordpress.
je ne comprends pas d'où sortent ces <p>

Code:

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
 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="tutoriel">
 
		<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" />
 
	<div class="tutoriel-head">
		<a title="SEO – Référencement naturel" href="http://neo-web.fr/tutoriels/seo-referencement-naturel/">
			<h2>SEO - Référencement naturel</h2>
		</a>
		<span class="tutoriel-more" id="more-desc" ><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png"/></span>	
	</div>
	<hr />
	<div id="toggle-desc">
		<div class="tutoriel-desc">	
			<p>
				Le*<strong>SEO</strong>*(search engine optimization), représente l'ensembles 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 !
			</p>
		</div>
 
		<div class="tutoriel-read">
			<hr />
			<a href="#">READ MORE</a>
		</div>
 
	</div>
</div>

Je te dirais bien que ces <p> sortent de la lettre suivante... mais ce serait fumeux...

Essaie en structurant autrement :

Code:

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
<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/">SEO - Référencement naturel</a>
		</h2>
		<div class="tutoriel-more" id="more-desc" ><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png"/></div>	
		<hr />
	</header>
 
	<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>.<br />
			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.<br />
			Avoir un site web bien référencé permet d'avoir un*<strong>maximum de visiteurs</strong>, ce qui est important !
		</div>
 
		<div class="tutoriel-read">
			<hr />
			<a href="#">READ MORE</a>
		</div>
 
	</div>
</article>

13/05/2015, 16h02
Maitre2B

Visiblement, après être passé de l'éditeur Visuel à l'éditeur de texte, des éléments sont apparus, du genre &amp
Je les ai supprimé et c'est un peu plus joli maintenant.

Comment faire pour que l'image de la flèche soit complètement à droite & toujours sur la même ligne que le <h2> ? (float: right sur l'image ne chance rien)
Comment faire pour enlever cet espace gigantesque au dessus du <h2> ?
Pourquoi le <hr> en dessous du mon <h2> n'apparaît pas ?

o_O
13/05/2015, 16h07
Maitre2B

Je viens d'essayer ton code, il est actuellement en ligne.
Ca semble bien plus propre que mon code mais aussi plus "HTML5".

Le dernier <hr/> n'apparaît plus.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.tutoriel header {
    margin: 0 0 5px;
    position: relative;
}
.tutoriel header h2 {
    color: #0b4c5f;
    font-size: 1.6rem;
    padding: 0 30px 0 2px;
}
.tutoriel header .tutoriel-more {
    float: right;
    padding-right: 4px;
    position: absolute;
    right: 0;
    top: 5px;
}

N.B. on peut enlever class="tutoriel-img" et class="tutoriel-head" du code, puisqu'on peut les cibler avec .tutoriel figure et .tutoriel header.

Pour la dimension de la box : au lieu de 300px (fixe), met plutôt en % !
ex. :

Code:

1
2
3
4
5
6
7
8
.tutoriel {
    width: 31.3%; /* 3 box par ligne : (1+31.3+1) = 33.3% == 100/3 */
    margin: 1%;
    float:left;
    box-sizing: border-box;/*pour que le border ne soit pas pris en compte dans le calcul de la largeur!*/
    border: 1px solid black;
    box-shadow: 0 0 2px 1px rgba(224, 220, 237, 1);
}

Quant au <hr/>, il faut le mettre DANS le <h2>.

Il faut aussi SUPPRIMER dans ton CSS :
ligne 97

Code:

1
2
3
.tutoriel h2 { /* A SUPPRIMER */
...
}

ligne 109 :

Code:

1
2
3
.tutoriel .tutoriel-head .tutoriel-more { /* A SUPPRIMER */
...
}

ligne 114

Code:

1
2
3
.tutoriel .tutoriel-head { /* A SUPPRIMER */
...
}

OUPS ! mea culpa :

Code:

1
2
3
4
5
6
7
.tutoriel header .tutoriel-more {
    /*float: right;*/ /* A SUPPRIMER */
    /*padding-right: 4px;*/ /* A SUPPRIMER */
    position: absolute;
    right: 2px; /* à modifier */
    top: 5px;
}

13/05/2015, 18h40
Maitre2B

Merci beaucoup jreaux62, vous avez été d'une très grande aide.
En plus de ça, je viens de découvrir de nouvelles balises ce qui est top.
13/05/2015, 19h13
Maitre2B

Une idée pour pas que <div class="tutoriel"> ne soit pas collé sur la gauche (afin de voir l'ombre comme sur la droite) ?

J'ai maintenant 2 petits problèmes :s
le slideToggle ne fonctionne que sur le premier article.
Si je mets un float left sur les articles, ils sont complètement collés, même avec un margin-left !

Code:

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
 
<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/">SEO - Référencement naturel</a></h2>
<div id="more-desc" class="tutoriel-more"><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png" alt="" /></div>
</header>
<hr />
<div id="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/">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-300x232.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 id="more-desc" class="tutoriel-more"><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png" alt="" /></div>
</header>
<hr />
<div id="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/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/">Interdire le suivi des publicités</a></h2>
<div id="more-desc" class="tutoriel-more"><img src="http://neo-web.fr/wp-content/uploads/2015/05/arrow.png" alt="" /></div>
</header>
<hr />
<div id="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.
 <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>*

Code:

1
2
3
4
5
6
7
 
<script>
 $( "#more-desc" ).click(function() {
           $( "#toggle-desc" ).slideToggle( "slow", function() {
    });
  });
</script>

Bonjour,
c'est normal : un identifiant (id) DOIT être UNIQUE !

Ici, tu peux sans problème le remplacer par une class :
Remplace :

Code:

1
2
3
<div id="more-desc" class="tutoriel-more">
...
<div id="toggle-desc">

par

Code:

1
2
3
<div class="tutoriel-more more-desc">
...
<div class="toggle-desc">

et le script jQuery qui va bien :

Code:

1
2
3
4
5
6
7
8
9
10
 
<script>
$(function(){
 $( '.more-desc' ).on( 'click', function() {
	var toggle_this = $(this).parent().parent().find('.toggle-desc');
	$('.toggle-desc').not(toggle_this).slideUp( 300 ); // on ferme les autres (facultatif)
	toggle_this.slideToggle( 300 );
  });
});
</script>

16/05/2015, 11h04
Maitre2B

Je vais essayer ça tout de suite, mais je sens que ça fait faire un toggle partout xD
16/05/2015, 11h50
Maitre2B

Ah bah non, tu avais déjà tout prévu ... !
merci beaucoup !

Il ne me reste plus qu'à trouvé un moyen d'en aligner 3 par ligne sans utiliser un float:left ^^

Je suppose qu'il faut faire 3 <div>'s verticales
16/05/2015, 12h07
Invité
Voici un exemple plus complet :
- http://codepen.io/jreaux62/pen/gpMavx
N.B. Pourquoi "sans float:left;" ??
Ca va très bien avec !
16/05/2015, 22h32
mathieu

Citation:

Envoyé par jreaux62

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.
17/05/2015, 15h12
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
17/05/2015, 15h37
Invité

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:

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:

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 !