Discussion :

[philippef]

Bonjour,

Bien sûr ceci a été traité des centaines de fois et avant de poster je viens de passer plus de 2 heures à trouver la solution ... en vain
l'image est bien centré sur un écran de 1440px mais pour les écrans inférieurs à 1024px l'image n'est plus centrée.
le div est caché au chargement de la page et devient visible lorsqu'on clique sur un lien.

mon code html :

Code html :

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

1
2
3
4
5
6
7
8
<div id="article_union" style="display:none;width:100%;">
<p align="center"  >
<span style="cursor:pointer;color:blue;font-size:1.2em;" onmouseover="this.className='survol';" onmouseout="this.className='survolnon';" onclick="javascript:montrer('patrimoine_2016');cacher('article_union');">Fermer</span><br />
<br />
Article publié le 21 septembre dans le journal <b>L'Union</b><br />
<img src="journees_patrimoine/journees_2016/images/Union 2016 09 21.jpg" class="articleunion" alt="" />
</p>
</div>

le code css :

Code :

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

1
2
3
4
.articleunion {
	width : 90%;
	text-align : center;
}

merci d'avance

[Invité]

Bonjour,

Peux-tu fournir du code cohérent ?
C'est-à-dire : le HTML d'un coté, le CSS de l'autre ?

Pas étonnant que tu aies du mal à t'en sortir...

Quant à l'attribut align="...", il est déprécié, et doit être remplacé par une propriété CSS.



[EDIT] Je suppose que tu avais déjà consulté la FAQ CSS...

[philippef]

je ne vois pas trop ce que je peux donner d'autre !!

code html

Code html :

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

1
2
3
4
5
6
7
8
<div id="article_union" style="display:none;width:100%;">
<p align="center">
<span style="cursor:pointer;color:blue;font-size:1.2em;" onmouseover="this.className='survol';" onmouseout="this.className='survolnon';" onclick="javascript:montrer('patrimoine_2016');cacher('article_union');">Fermer</span><br />
<br />
Article publié le 21 septembre dans le journal <b>L'Union</b><br />
<img src="journees_patrimoine/journees_2016/images/Union 2016 09 21.jpg" class="articleunion" alt="" />
</p>
</div>

le css

Code :

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

1
2
3
4
.articleunion {
	width : 90%;
	text-align : center;
}

quand à savoir si j'avais lu la FAQ CSS j'ai dit avoir passé plus de 2 heures à résoudre ce problème
Le site que j'essaie de re-faire c'est du bénévolat car l'informatique ou la construction de sites n'est pas et n'était pas ma profession.

[Invité]

Séparer le CSS du HTML :

• Premiers pas avec les CSS -> II-B et II-C

Soyons clair : ton code ressemble à une poubelle...
On n'a pas envie d'y mettre les mains, ni de trier tes déchets.


Il n'y a RIEN de négatif dans mes propos :

• un code PROPRE et LISIBLE (= bien indenté, avec codes séparés,...) est beaucoup plus facile à LIRE et à DEBOGUER.

[miss_socrates]

Pourrait-on savoir comment cela a été résolu ?
Je pense que si l'image est centrée, par contre la div ne l'est pas et il faudrait la centrer comme ceci:

Code :

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

1
2
3
4
 
div{
margin: 0 auto;
}

Ou une autre solution a-t-elle été trouvée ?

[philippef]

Pourrait-on savoir comment cela a été résolu ?

Ou une autre solution a-t-elle été trouvée ?

lorsque j'avais posté je m'occupais avant tout du résultat et pas de séparer le css du code.
voilà comment j'ai résolu ce problème
sur la page php

Code html :

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

1
2
3
4
5
6
7
<div id="article_union" class="article2016">
	<p class="particle2016">
		<span class="spanfermer" onclick="javascript:montrer('patrimoine_2016');cacher('article_union');">Fermer</span><br />
		<br />Article publié le 21 septembre dans le journal <b>L'Union</b><br />
		<img src="journees_patrimoine/journees_2016/images/Union 2016 09 21.jpg" alt="" />
	</p>
</div>

bon ok pour les fonctions Javascript j'aurai pu grouper. mais bon ...
sur la feuille de style

Code :

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

1
2
3
4
 
.article2016 { display:none; width:98%;}
.particle2016 { width:95%;text-align:center;margin-left:auto;margin-right:auto;}
.spanfermer { cursor:pointer;color:blue;font-size:1.2em;}

tout fonctionne correctement. Comme je le veux !! Et cela fait peut être moins poubelle

[Invité]

C'est clair, c'est clairement plus clair !

Bel effort