[HTML] Alignement d'un texte sur un tableau...

Encore désolé de vous déranger avec des questions très basiques,
mais j'essaie de peaufiner l'apparence de mon site, et j'ai encore
un petit problème.

Je voudrais comprendre pourquoi le code html suivant:

Code:

---

1 2 3 4 5

<table border=1 cellspacing=0 cellpadding=0 width="20" height="30"> <tr><td width="20" height="20" bgcolor="blue"></td></tr> <tr><td width="20" height="10"></td></tr> </table>Coucou

---

fait- apparaître "Coucou" en dessous du tableau, et pas à côté?

Notez que je n'ai pas la possibilité de placer mon texte dans un tableau,
donc la réponse "fais un tableau avec un première collone contenant ton petit tableau bleu, et une seconde colonne contenant Coucou" ne marchera pas chez moi...

Merci!

<table> est une balise block qui commence et se termine donc par un saut de ligne....

Aucune solution donc?

Je peux peut-être présenter mon problème autrement...
Je souhaite afficher une liste à puce, et comme mon site peut changer de "thème" grâce à trois variabes PHP $couleur1 $ couleur2 et $couleur3, je souhaite que ma puce prenne un de ces couleurs, et change de couleur quand je change ces variables.

La solution la plus simple pour moi serait de créer une puce transparente, sur fond blanc,
et si l'attribut bgcolor était valide pour un img, il me suffiraitde faire
<img src="puce.gif" bgcolor="blue"> pour avoir une puce bleue... Tadaaa! :wink:

Malheureusement, deux problèmes se posent:
1. L'attribut bgcolor n'est pas accepté dans <img>
2. Problème plus fin... Si mon fond changeait un jour de couleur, le fait que mon puce.gif est blanc et transparent ferait apparaître des tâches blanches sur mon fond coloré.

D'où mon idée de ne pas passer par un fichier image, mais par un tableau
de la forme:

Code:

---

1 2 3 4 5

<table border=1 cellspacing=0 cellpadding=0 width="20" height="30"> <tr><td width="20" height="20" bgcolor="blue"></td></tr> <tr><td width="20" height="10" bgcolor="white"></td></tr> </table>

---

affichant une puce carrée un peu surélevée (grâce à la ligne de hauteur 10, invisible sur fond blanc).

Voilà, si quelqu'un à des idées pour me eprmettre de disposer de puces d'une couleur "générique", je suis vraiment très intéressé... J'espère avoir été assez précis, merci beaucoup!

Citation:

---

Envoyé par gdawirs

Voilà, si quelqu'un à des idées pour me eprmettre de disposer de puces d'une couleur "générique", je suis vraiment très intéressé... J'espère avoir été assez précis, merci beaucoup!

---

Euh, comment dire....

Pour faire une liste, je te conseille plutot le tag ul. C'est ce qu'il y a de plus adapté.

Et bizarrement, il a une propriété de style:

Code:

---

1 2	list-style-image

---

qui te permet justement de mettre une image customisée comme puce de la liste. Donc une image de la couleur que tu veux...

Ca me parait plus simple et plus rapide que ta solution 8)

Cette propriété je ne la connais pas... :oops:

mais mon problème reste qu'avec des <ul> il y a plein d'espacements
ajoutés contre ma volonté entre les puces...

ben gere les margin

Ben oui, je serai obligé de faire ca....

Je ne vois pas la manière dont je pourrais gérer les margin dans une liste à puce...
Parce que même en mentionnant:

Code:

---

1 2 3 4 5 6 7 8 9 10

ul { list-style-image: url(http://www.gdawirs.be/puce.gif); list-style-type: circle; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm; margin-bottom: 0cm; }

---

l'écart entre élément reste "conséquent"...

De plus, je ne vois aps comment ceci me permettra de changer la couleur dema puce.
Même si celle ci est transparente, il faudrait que je définisse une espèce de bgcolor derrière...

De plus, si je veux quelque chose d'un tout petit peu plus abouti (comme une puce qui ne soit pas carrée, mais ronde), je me retrouve avec des "bords de puce" qui ont une couleur prédéterminée...

Alors que ma solution de tableau, même s'il me reste une problème d'alignement, résolvait ces problèmes!

SI je peux me permettre, pour revenir au post initial...
N'existe-t-iul pas de moyen de placer du texte à côté d'un tableau?

Merci :D

Citation:

---

Envoyé par gdawirs

De plus, je ne vois aps comment ceci me permettra de changer la couleur dema puce.
Même si celle ci est transparente, il faudrait que je définisse une espèce de bgcolor derrière...

De plus, si je veux quelque chose d'un tout petit peu plus abouti (comme une puce qui ne soit pas carrée, mais ronde), je me retrouve avec des "bords de puce" qui ont une couleur prédéterminée...

---

Cette solution est bien plus simple que ton tableau!!!

Pour supprimer tous les écarts dans la liste, fait simplement:

Code:

---

1 2 3 4 5

ul { padding: 0; margin: 0; }

---

Tu auras tous les élements de ta liste collés aux puces.

Sinon, pour la puce et la couleur de la puce (la forme, tout...) il faut que tu construise une image par puce que tu veux rendre disponible.
Tu oublies tes idées d'une puce ronde transparente et tu dessines tes puces.

Par exemple tu créé des fichiers puce-rond-bleu.gif, puce-rond-rouge.gif et puce-carré-orange.gif.
De cette façon, il ne te reste plus qu'à appliquer le style correct à ta liste (directement dans le html ou dans le css):

Code:

---

1 2	list-style-image: url(http://www.gdawirs.be/puces/puce-round-bleu.gif);

---

Ca va mieux :?:

Ok, je te rmercie beaucoup.
Le problème estr ésolu à 99%

Dernier truc: j'avais espoir de trouver une solution qui me permette d'avoir un puce qui change automatiquement de couleur dès que je change le thème, et ceci est bien plus "spécialisé" que puce-orange, puce-bleue, ... Parce que chaque couleur est un triplet RGB, et que je ne peux évidemment pas préparer une puce pour chaque couleur possible...
En somme, mon site utilise bien plus que des couelurs basiques...
Ce qui m'amène à des millions de nuances possibles.

En gros, je change mes triplets RGB, et paf! mes puces suivent...
Sinon, je dois prendre Gimp, colorier, ... et réuploader ma pupuce ;)
Ok, ce n'est aps énorme, mais je phantasme sur une architecture 100% générique ;)

Ca, c'est le dernier %... merci pour le reste, c'est super sympa :D

Citation:

---

Envoyé par gdawirs

Ca, c'est le dernier %... merci pour le reste, c'est super sympa :D

---

Je ne vois pas comment faire ça en HTML.... Tu risques de pervertir ton code HTML rien que pour mettre en place ça (qui ne doit pas être très prioritaire...).

Donc, la seule solution pour moi est de créer un script coté serveur qui renvoit l'image de la puce avec la couleur donnée... Mais bon, l'interet me laisse un peu songeur :roll:

Ben, franchement, tu ne trouves aps ca intéressant d'avoir un site qui, en fonction du positionnement de trois variables (3 codes RGB...) peut totalement changer de look?

Moi je trouve ca plutôt cool 8)

Et comme je l'ait fait pour tout le reste du site, c'est un peu frustrant d'être bloqué par ce dernier détail: la couleur des puces...

Tu parles d'un script côté serveur... Mais jene vois même aps comment il pourrait être possible d'intervenir sur la couleur d'un fichier GIF dans un script! 8O

En tout cas, même si l'intérêt semble limité, c'est devenu pour moi un challenge :wink:

Merci de vos réponses, j'apprécie!

Citation:

---

Envoyé par gdawirs

Tu parles d'un script côté serveur... Mais jene vois même aps comment il pourrait être possible d'intervenir sur la couleur d'un fichier GIF dans un script! 8O

---

Il ne s'agirait pas de modifier le fichier GIF, mais de le generer à la volée. De cette façon, pour la génération, tu paramètres les couleurs de la façon qui t'arrange.

Je te conseille de poser la question dans le forum associé à ton langage coté serveur (PHP, ASP, J2EE, ....) Je vois très bien comment le faire en J2EE (mon langage), mais pas vraiment dans les autres langages :)

Merci beaucoup, je passe au bon forum!!! :D