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 : 310
Taille : 119,9 Ko

Nom : screenshot-1.jpg
Affichages : 310
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.