Html et Css pour système réutilisable sur n'importe quel site

Bonjour,

J'essaye de créer un script de petites annonces intégrable à n'importe quel site et je voudrais qu'il soit personalisable en css mais je bloque sur un point en particulier, le positionnement des éléments de chaque annonce dans les listes de résultats.

Quel Html faudrait-il générer pour que cela soit le plus personalisable possible en Css?

Par exemple pouvoir positionner le éléments comme ça sur un site:
http://cinterssant.free.fr/docs/nosuppr/p1.png

Et comme ça sur un autre:
http://cinterssant.free.fr/docs/nosuppr/p2.png

Merci D'avance pour vos réponses

JD

Salut

Pour ce que tu souhaites faire, il fa te falloir 2 codes HTML et 2 CSS... Ou alors placer tes éléments en absolute soit 1 code HTML et 2 CSS

Salut Strix,

Ce que je veux c'est éviter la solution 2 codes HTML et 2 CSS

et favoriser celle 1 codes HTML et 2 CSS comme ça mon script php génère toujours le même HTML et je modifie uniquement le CSS suivant le site sur lequel je l'utilise.

Pour tout ce qui est des tailles de chaque texte, des bordures et des couleurs j'y arrive par contre pour le positionnement j'suis largué.

Est ce que tu pourrais m'en dire un peu plus sur la façon de faire avec absolute parce que pour l'instant chaque fois que j'essaye je me retrouve avec toutes les annonces de ma liste les unes sur les autres... pas très pratique pour la consultation :)

Salut,

Déjà pourquoi souhaites tu avoir deux affichages différent selon le navigateur ?
Est ce que tes affichages différents ne serait il pas un pour IE et l'autre pour tous les autres navigateurs ??

j'ai fait pas mal de sites d'annonces et le mieux est de séparer chaque élément de tes résultats et d'englober le tout dans un div.

après tu joues avec les css pour positionner tes éléments comme tu veux.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="item">   <p class="item-img"><img src="" /></p>   <p class="item-titre">titre</p>   <p class="item-prix">prix</p>   <p class="item-desc">desc</p>   etc.   </div>

---

Citation:

---

Envoyé par dimalta5

Est ce que tu pourrais m'en dire un peu plus sur la façon de faire avec absolute parce que pour l'instant chaque fois que j'essaye je me retrouve avec toutes les annonces de ma liste les unes sur les autres... pas très pratique pour la consultation :)

---

attention : pour pouvoir positionner tes item-prix, item-desc etc. en absolu dans la div "item", il faut que la div "item" soit en position "relative"

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

.item { position:relative; }   .item-prix { position:absolute; bottom:5px; right:5px; width:150px }

---

dans cette exemple, le prix est positionné en absolu dans la div item.