Page 1 sur 1
positions div dans un td avec texte
Posté : 23 juin 2007, 16:36
par ouiouioui
Bonjour, j'ai un problème que je comprend pas, mon code:
Code : Tout sélectionner
<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')"> </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')"> </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')"> </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'"> <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
Posté : 23 juin 2007, 17:47
par Hywan
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.
Posté : 23 juin 2007, 18:02
par AB
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')"> </div>
<div>Couleur: <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é
Posté : 23 juin 2007, 18:37
par Hywan
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.
Posté : 23 juin 2007, 18:51
par AB
@HyWaN
Mon Edit était pour dire que nous avons eu la même réaction (sans nous consulter) à la première vue du code
Posté : 23 juin 2007, 19:44
par Hywan
@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
Posté : 24 juin 2007, 20:12
par ouiouioui
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.
Posté : 24 juin 2007, 21:46
par AB
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
Posté : 24 juin 2007, 22:31
par Hywan
Attention à :
les
\ n'ont pas lieu d'être.
Posté : 24 juin 2007, 22:41
par AB
C'est vrai j'avais pas corrigé ça vu que j'étais concentré sur la mise en page. C'est maintenant fait
Posté : 25 juin 2007, 12:08
par ouiouioui
merci pour vos réponses, sa m'a bien aidé.