Discussion :

[dimalta5]

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:


Et comme ça sur un autre:


Merci D'avance pour vos réponses

JD

[Strix]

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

[dimalta5]

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

[kaiser59]

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

[irizean]

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 :

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

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>

[irizean]

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 :

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

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.