28172 sujets

CSS et mise en forme, CSS3

Bonjour.

Je fais fasse à un problème dans la création d'une seconde feuille de style pour mon site. Cette feuille est destinée à être utilisée sur certaines pages, ce sont simplement les couleurs et certaines images qui changent. A priori, pas de problème.

Là où ça coince, c'est que mon menu est commun à l'ensemble du site (via un inclue en php). Il se trouve qu'un élément de sa mise en page (barre de séparation horizontale, qui est une petite image de 1px de hauteur) ne passe pas par la feuille de style mais est directement affiché via le code html comme ceci:

<p class="separation"><img src="/kit/separation.png" alt="___________________" width="149" height="1"/></p>


Pour mon second style, il faudrait donc que je change la couleur de cette barre de séparation... mais si je le fais, ça change aussi sur les pages avec mon style n°1.

Je voulais donc savoir s'il est possible d'écrire une condition en php qui permette d'afficher une image n°1 ou une image n°2 en fonction de la feuille de style qu'utilise la page courante. Je pensais à quelque chose du genre:

<?php
  if (stylesheet == style2.css)
  { echo '<p class="separation"><img src="/kit/separation2.png" alt="___________________" width="149" height="1"/></p>';}
  else { echo '<p class="separation"><img src="/kit/separation.png" alt="___________________" width="149" height="1"/></p>';}
  ?>


Ne faites pas attention aux horreurs qui auraient pu se glisser dans cette condition, je suis nul en php Smiley ohwell
Modifié par Chrispic (07 Jun 2011 - 03:53)
Bonsoir,

Pourquoi ne pas gérer ta séparation en CSS directement ?

en virant:
<p class="separation"><img src="/kit/separation.png" alt="___________________" width="149" height="1"/></p>


et en ajoutant :
<div class="separation"></div>

et dans le css :

.separation {
width: 149px;
height: 1px;
background: url(/kit/separation.png) no-repeat;
}


Bon, c'est un peu crade d'utiliser une div comme ça mais au moins tu n'as plus rien en dur, et sur chaque feuille CSS tu pointes vers la class ".séparation".
Bonsoir et un grand merci!

J'avais justement essayé ce que tu propose avant de poser ma question, mais j'avais oublié les width et height, du coup rien n'apparaissait... ^^'
Pourquoi faire compliqué quand on peut faire simple...

Bref merci, c'est résolu! Smiley biggrin
Modifié par Chrispic (07 Jun 2011 - 03:51)
Je me demande si dans ces cas-là on ne peut pas utiliser la balise <hr> à la place d'une div ?
vu qu'avec les CSS on peut lui donner le look que l'on veut ...
Bonjour,

<hr> peut tout à fait être utilisé dans ce cas.

Et une petite précision, dans ton premier code Chrispic, il ne faut surtout pas remplir le alt. L'image est purement décorative et le texte alternatif ne fait aucun sens.