28172 sujets

CSS et mise en forme, CSS3

Hello,

Je cherche à obtenir une mise en forme qui me semble simple mais en réalité cocasse.

Voici ma structure


<div id="conteneur">
    <input type="text" id="keywords" />
    <div id="commandes">
        <button>Edit</button>
        <button>Copy</button>
        ... et d'autres boutons ...
    </div>
</div>


Dans un premier temps, je voudrais que l'input et la div#commandes soient alignés. J'applique donc un display:inline à div#commandes.


#conteneur{
    white-space: nowrap;
}
#keywords{
    border: 1px solid blue;
    width: 100%;
}
#commandes {
    border: 1px solid red;
    height: 18px;
    display: inline;
}


Le problème est que :
- div#commandes doit être de taille variable. Elle doit être obligatoirement collé à droite.
- j'aimerais que l'input#keywords prenne toute la largeur qu'il lui reste.

Je n'arrive pas à obtenir ça.
Si je spécifie un width: 100% à l'input#keywords, celui ci dégage la div#commandes en dehors de la boite.
J'ai pensé à faire flotter div#commandes à droite afin que l'input#keywords vienne se wrapper autour, mais sans succès Smiley ohwell

Merci pour votre aide.
Modifié par supertino (06 Aug 2012 - 14:16)
J'ai trouvé une solution alternative : une mise en forme en tableau.


<table>
    <tr>
        <td id="td_input">
            <input type="text" id="keywords" />
        </td>
        <td id="td_commandes">
            <button>Edit</button><button>Copy</button><button>Paste</button>
        </td>
    </tr>
</table>



table {
    width: 100%; // Le tableau doit prendre toute la largeur disponible
}
table td {
    border: 1px solid gray;
}
#keywords {
    min-width: 200px; // le champs texte ne doit pas descendre en dessous de 200px
    width: 100%; // Autrement il prends toute la largeur de sa cellule
}
#td_commandes {
    width: 1px; // On fixe une taille minimum, la cellule s'adaptera au contenu
    white-space: nowrap; // On empêche le contenu de passer à la ligne
}



Pour l'instant, ça remplit à 100% le comportement que je voudrais.