Pb redimensionnement avec <right fixed>

om_paris -  
M@dien Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Dans ma barre (horizontale sur une ligne) de navigation, j'ai 4 éléments
- 1 zone d'input
- 3 boutons-images dont la somme des longueur est de 292 pixels (genre ajouter-modifier-supprimer)

Je voudrai pouvoir redimensionner ma page avec la longueur de ma zone d'input qui varie et mes 3 boutons qui restent bien à droite

Initialement, je pensai mettre cette barre dans un frame-frameset pour ne pas avoir de pb. peut etre y a t il une meilleure idée?

Par avance, merci
Olivier
Configuration: Linux
Firefox 3.5.2

1 réponse

  1. M@dien Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   74
     
    Bonjour,

    Voici une piste, à customiser à ta guise:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    	<meta http-equiv="Content-Type"	content="text/html; charset=iso-8859-1" />
    		<title>Page de test</title>
    		<style type="text/css">
    			div#barre {
    				min-width:400px;
    				position:relative;
    				height:24px;
    				background:lightgrey;
    				border:1px solid grey;
    				padding:3px;
    				margin:20px 50px;}
    			div#barre input {
    				margin:0px;
    				padding:0px;}
    			div#barre div.input_button {
    				height:0px;
    				text-align:right;
    				float:right;
    				background:red;
    				width:292px;}
    			div#barre div.input_text {
    				height:0px;
    				width:auto;
    				background:green;
    				margin-right:300px;}
    			div#barre input.input_text{
    				height:20px;
    				width:100%;}
    			div#barre input.input_button{
    				width:94px;}
    		</style>
    	</head>
    	<body>
    		<div id="barre">
    			<div class="input_button">
    				<div>
    					<input class="input_button" type="button" value="Ajouter"/>
    					<input class="input_button" type="button" value="Modifier"/>
    					<input class="input_button" type="button" value="Supprimer"/>
    				</div>
    			</div>
    			<div class="input_text">
    				<input class="input_text" type="text"/>
    			</div>
    		</div>
    	</body>
    </html>
    0