Wordpress : problème alignement & autre

**Maitre2B** · 12/05/2015, 10h38

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.

Nom : screenshot-1.jpg
Affichages : 297
Taille : 119,9 Ko

Nom : screenshot-1.jpg
Affichages : 297
Taille : 119,9 Ko

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

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
 
<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 :

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
 
.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:

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 :

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

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>

**mathieu** · 13/05/2015, 08h10

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

**Maitre2B** · 13/05/2015, 13h28

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. ^^

Invité · 13/05/2015, 14h02

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.

**Maitre2B** · 13/05/2015, 14h04

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/

Invité · 13/05/2015, 14h06

Alors, on fait comment ?
On devine ?

[Edit] elles sont où les <div class="tutoriel"> ??

**Maitre2B** · 13/05/2015, 14h22

C'est bon, c'est en ligne.

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

Invité · 13/05/2015, 15h19

Voilà ce qu'on trouve dans ton code :

Code html :

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

**Maitre2B** · 13/05/2015, 15h47

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 :

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

Invité · 13/05/2015, 15h54

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

Essaie en structurant autrement :

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

**Maitre2B** · 13/05/2015, 16h02

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

**Maitre2B** · 13/05/2015, 16h07

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.

Invité · 13/05/2015, 16h13

Code css :

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
.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 css :

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

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>.

Invité · 13/05/2015, 16h27

Il faut aussi SUPPRIMER dans ton CSS :
ligne 97

Code css :

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

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

ligne 109 :

Code css :

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

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

ligne 114

Code css :

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

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

OUPS ! mea culpa :

Code css :

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

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;
}

**Maitre2B** · 13/05/2015, 18h40

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.

**Maitre2B** · 13/05/2015, 19h13

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) ?

**Maitre2B** · 15/05/2015, 10h59

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 :

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
 
<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 :

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

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

Invité · 16/05/2015, 09h23

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

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

Code :

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

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

par

Code :

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

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

et le script jQuery qui va bien :

Code :

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

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>

**Maitre2B** · 16/05/2015, 11h04

Je vais essayer ça tout de suite, mais je sens que ça fait faire un toggle partout xD

**Maitre2B** · 16/05/2015, 11h50

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

Wordpress : problème alignement & autre

WordPress PHP

Discussions similaires

Partager

Partager