positions div dans un td avec texte

23 juin 2007, 16:36

Bonjour, j'ai un problème que je comprend pas, mon code:

<table cellspacing="0" cellpadding="2" style="border:0px solid #000000">
	<tr><td style="border:0px solid #000000"></td></tr>
	<tr><td class="lignedebut">Texte:</td><td class="ligne1">Taille: <select name=\"tailletexte\">
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>

      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
	  </select></td><td class="ligne0">Couleur: <input type="hidden" value="" name="colorainput" id="colorainput"><div id="colorabox" style="cursor:pointer;width: 20px; height: 20px; border: 1px solid gray;background-color: #FFFFFF" onclick="javascript:toggle('a')">&nbsp;</div></td><td class="ligne1">Police: testtesttest</td></tr>
</table>
<table cellspacing="0" cellpadding="2" style="border:0px solid #000000">
	<tr><td style="border:0px solid #000000"></td></tr>

	<tr><td class="lignedebut">Bord Texte:</td><td class="ligne0">Taille: <select name=\"taillebordtexte\">
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>

      <option value="10">10</option>
	  </select></td><td class="ligne1">Couleur: <input type="hidden" value="" name="colorbinput" id="colorbinput" /><div id="colorbbox" style="cursor:pointer;width: 20px; height: 20px; border: 1px solid gray;background-color: #000000" onclick="javascript:toggle('b')">&nbsp;</div></td><td class="lignedebut">Bord Image:</td><td class="ligne0">Taille: <select name=\"taillebordimage\">
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>

      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
	  </select></td><td class="ligne1">Couleur: <input type="hidden" value="" name="colorcinput" id="colorcinput" /><div id="colorcbox" style="cursor:pointer;width: 20px; height: 20px; border: 1px solid gray;background-color: #000000" onclick="javascript:toggle('c')">&nbsp;</div></td></tr>
	<tr><td style="border:0px solid #000000"></td></tr>
	<tr><td style="border:0px solid #000000" colspan="6"><input type="button" name="retour" value="Retour" onclick="javascript:location.href='image.html';" class="button" onmouseover="this.className='buttonhov'" onmouseout="this.className='button'">&nbsp;&nbsp;&nbsp;<input type="submit" name="register" value="Enregistrer" class="button" onmouseover="this.className='buttonhov'" onmouseout="this.className='button'"></td></tr>
</table>

mes select sont bien à droite de :
mais mes cases div de 20x20 se retrouve dessous "couleur:"
ors je ne spécifie aucun saut de ligne, je comprend pas j'ai essayé tout ce que j'ai pu rien n'y fait.
moi je veux tout sur une ligne

merci d'avance à ceux qui m'aiderons

23 juin 2007, 17:47

Tu devrais essayer de mettre les div en float:left;.

Tu devrais également enlever le tableau, et corriger les erreurs (<select name=\"tailletexte\"> par exemple, mais également les cellules vides avec un style). Tu dois sûrement pouvoir remplacer le tableau par une architecture plus simple, et plus légère.

Et peut être mettre une image à la place d'un div. Ca demande plus de travail sur le moment, mais c'est à mon avis plus accessible et moins problématique pour la suite.

23 juin 2007, 18:02

Salut,

Ton code n'est pas un modèle académique

Tu devrais t'entrainer à n'utiliser les balises tables tr td que pour des données tabulaires (ou vraiment quand tu ne peux pas faire autrement) et ton code n'en serait que plus lisible et léger.
Cela dit en reprenant ton code voici une solution pour faire ce que tu souhaites

Code : Tout sélectionner

<td class="ligne1" width="80px">
	 <div id="colorbbox" style="float:right;cursor:pointer;width: 20px; height: 20px; border: 1px solid gray;background-color: #000000" onclick="javascript:toggle('b')">&nbsp;</div>
	 <div>Couleur:&nbsp;<input type="hidden" value="" name="colorbinput" id="colorbinput" /></div>
	 </td>

(n'oublies pas de fixer une largeur suffisante pour td)

Edit : le début de mon message ressemble à celui d'HyWaN. Ce n'est pas une reprise, je ne l'avais pas vu avant de poster car j'étais entrain de vérifier le code que je t'ai proposé

23 juin 2007, 18:37

Oui autant pour moi. Quitte à utiliser des tableaux, autant tout faire en tableau.

Mais si tu peux faire sans tableau, c'est une solution à envisager. Les tableaux sont pratiques, mais lourds dans une page.

23 juin 2007, 18:51

@HyWaN

Mon Edit était pour dire que nous avons eu la même réaction (sans nous consulter) à la première vue du code

23 juin 2007, 19:44

@AB : Oui j'avais compris

Mais auss après ton message, je me suis rendu compte que ma solution est correcte, mais que c'était pas la meilleure. Si on était dans une logique tableau, autant y rester, hehe

24 juin 2007, 20:12

Bonjour, tout d'abord merci pour votre aide sa fonctionne parfaitement.

pour remplacer le div de couleur par une image, il s'agit d'une image transparente auquels j'ajoute la couleur de fond à la balise img?
Quel est l'interêt je vois pas entre div et img?

pour les tr vide effectivement je vais changer sa c'était pour avoir des saut de ligne de 2px.

pour le tableaux, vu que chaque td a une couleur si je change je vais utiliser des div donc le nombre de balise diminuera pas, je comprend pas comment vous alléger mon code en remplaçant le tableaux par des div

merci.

24 juin 2007, 21:46

Voici un exemple de code uniquement avec des div et des span.
C'est normalement un code équivalent à ton deuxième tableau. ça paraît long car j'ai indenté le code mais c'est finalement plus simple à lire et il y a moins de code.

Code : Tout sélectionner

<div>
   <span class="lignedebut">
   Bord Texte:
   </span>
   <span class="ligne0">
   Taille 
   <select name="taillebordtexte">
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
	</span>
	<span class="ligne1" style="margin-left:5px">
	Couleur 
	<input type="hidden" value="" name="colorbinput" id="colorbinput" />
	<input id="colorbbox" style="cursor:pointer;width: 20px; height: 20px; border: 1px solid gray;background-color: #000000" onclick="javascript:toggle('b')" />
	</span>
	<span class="lignedebut" style="margin-left:20px">
	Bord Image:
	</span>
	<span class="ligne0">
	Taille 
	<select name="taillebordimage">
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
     </select>
	 </span>
	 <span class="ligne1" style="margin-left:5px">
	 Couleur 
	 <input type="hidden" value="" name="colorcinput" id="colorcinput" />
	 <input id="colorcbox" style="cursor:pointer;width: 20px; height: 20px; border: 1px solid gray;background-color: #000000" onclick="javascript:toggle('c')" />
	 </span>
</div>
<div style="border:0px solid #000000;margin-top:15px">
	<input type="button" name="retour" value="Retour" onclick="javascript:location.href='image.html';" class="button" onmouseover="this.className='buttonhov'" onmouseout="this.className='button'">
	<input type="submit" name="register" value="Enregistrer" class="button" onmouseover="this.className='buttonhov'" onmouseout="this.className='button'">
</div>

PS J'ai rajouté des margin-left et margin-top ici et là pour aérer un peu

24 juin 2007, 22:31

Attention à :

Code : Tout sélectionner

<select name=\"taillebordimage\">

les \ n'ont pas lieu d'être.

24 juin 2007, 22:41

C'est vrai j'avais pas corrigé ça vu que j'étais concentré sur la mise en page. C'est maintenant fait

25 juin 2007, 12:08

merci pour vos réponses, sa m'a bien aidé.

positions div dans un td avec texte

Qui est en ligne