Discussion :

[EIN-LESER]

Bonjour à tous

Voila petite question bête
Je crée un formulaire dans lequel j'aurais aimé placer les différents input dans des div inline afin de gérer l'affichage sans tableaux (assez peu recommandé maintenant apparemment).
Mon soucis est que les div prennent la taille des input et non celle que je leur donne en CSS.

Si quelqu’un pouvait m'expliquer pourquoi... Merci d'avance

Voici les bouts de codes incriminés:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    <div>
        <span class='filtres legende'><label>Nom poste operateur</label></span>
        <span class='filtres legende'><label>Type poste operateur</label></span>
        <span class='filtres legende'><label>Raccordement</label></span>
        <span class='filtres legende'><label>Supprimer poste operateur</label></span>
    </div>
    <div>
        <div class="div_inline_page_poster"><input type='textfield' name='name_po1' id="name_po1" value="po_non_selectionne" onfocus="javascript:if(this.value=='name_po1')this.value=''; "  onblur="if(this.value.length==0){this.value='name_po1'}"/></div>
        <div class="div_inline_page_poster"><input type="radio" name="raccordement1" value="local" checked="checked" /> Local <input type="radio" name="raccordement1" value="deporte" /> Déporté</div>
        <div class="div_inline_page_poster"><select name="po1" id="po1" style="margin-top: -10px;"><option value='A'>A</option><option value='B'>B</option><option value='C'>C</option></select></div>
        <div class="div_inline_page_poster"><img src="pictures/user-trash.png" alt="Supprimer poste operateur" title="Supprimer poste operateur" onclick="supp_selectionne(1)" oncontextmenu='return false' ondragstart='return false' onselectstart='return false' style="cursor: pointer;"/></div>
    </div>

Code :

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

1
2
3
4
5
6
7
.div_inline_page_poster{
    display: inline;
    width:190px;
    max-width: 190px;
    min-width: 190px;
    border: 4px solid red;
}

PS : l'encadrement rouge servait à visualiser la taille des div, rien de plus

[Bovino]

des div inline

Euh... ça s'appellerait pas des span par hasard ?

Code html :

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

<input type='textfield' />

Tiens, c'est nouveau comme type ça ?

[rodolphebrd]

Bonjour,

Surtout que les DIV ne servent à rien dans ce cas là.

Sinon pour répondre à la question : testez avec display: inline-block;

[EIN-LESER]

inline-block fonctionne nickel merci ^^

Pour répondre a bovino div car imposé par mon chef :-(

[Bovino]

div car imposé par mon chef

C'est pas vraiment une excuse...
Car soit il n'a pas de maitrise technique et dans ce cas, c'est ton rôle de le lui faire remarquer (encore faut-il savoir l'argumenter), soit il a une maitrise technique et dans ce cas, il peut y avoir derrière cela des contraintes dont tu ne parles pas.

Donc encore une fois, un conteneur générique inline, c'est <span>, pas <div> en position: inline; et un conteneur générique en inline-block, ben c'est aussi du <span> pour des raisons de compatibilité avec d'anciennes versions de IE pour lesquelles inline-block ne s'appliquait qu'aux éléments de type inline.

Enfin, pour ta question initiale, vouloir appliquer un width à des éléments inline démontre que tu ne sais pas à quoi correspond un élément inline !

[rodolphebrd]

Bovino

D'autant que pour éviter de se m..turber avec des display, un float:left; ferait l'affaire, non ?

[EIN-LESER]

Je pensais que le float étais désormais déconseillé pour cause de soucis d'affichage justement

[rodolphebrd]

Non je ne vois pas pourquoi.

C'est justement un outil indispensable dans ce cas.