18041 sujets

Questions générales et questions de débutants

Problème de taille

Bonjour,

je veux faire une colonne à gauche de 20% de l'écran et à l'interieur j'ai un input text et une image de taille fixe.

J'aimerais que mon input prenne le reste de la largeur de ma colonne comment faire? Le reste étant la taille de la colonne moins les 23px utilisé par mon image.

Le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="./test.css" media="screen" />
    </head>
    <body>
        <div id="colonne_gauche">
            <input id="search" type="text" />
            <img src="./templates/img/search.png"></img>
        </div>
    </body>
</html>



#colonne_gauche {
    width: 20%;
    height: 500px;
    border: 1px solid black;
}

#search {
}

img {
    float: right;
    width: 23px;
}
J'ai réussi à avoir un résultat qui fonctionne à peu près je crois avec le code suivant:
        <div id="colonne_gauche">
            <div id="champ">
                <input id="search" type="text" />
            </div>
        </div>
            #colonne_gauche {
                border: 1px solid black;
                height: 500px;
                width: 20%;
                padding: 5px;
            }
            #search {
                width: 100%;
                border: 1px #aaa solid;
                padding: 0;
                margin: 0;
                border-radius: 3px;
            }
            #champ {
                background: url("http://www.softdz.com/images/stories/djasoft/images-stories-djasoft-info-23x23.gif") right top no-repeat;
                padding-right: 27px;
                min-height: 23px;
            }
tu mets ton image en background-image, pas celle que j'ai mise ^^' et tu remplaces min-height par la taille de ton image.
Modifié par Gothor (29 Feb 2012 - 11:19)
Effectivement dans mon exemple simplifié ta solution fonctionne mais je ne peux pas (je n'arrive pas) l'adapter à mon cas concret.

code :

<div id="menu_gauche">
            <input id="search" class="contour_field" type="text" placeholder="Search..."/>
            <a href="#" class="add"></a>
        </div>



html, body, div, img, li, form, fieldset, input, textarea, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, table, blockquote, hr, td, tr, table {
    margin: 0;
    padding: 0;
}

#menu_gauche {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    width: 20%;
    background-color: #F3F3F3;
    border-right: 1px solid #DDD;
}


#search {
    background: white url('./templates/img/search.png') 6px 6px no-repeat;
    font-size: 14px;
    height: 29px;
/*    width: 100%;*/
    padding: 4px 0 4px 30px;
    margin: 5px 0 5px 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #222;
    border: 1px solid #D9D9D9;
    border-top: 1px solid silver;

}

.add {
    position: absolute;
    height: 19px;
    width: 23px;
    background: white url('./templates/img/add.png') 5px 5px no-repeat;
    border-bottom: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    border-top: 1px solid silver;
    padding: 4px 4px 4px 0px;
    margin: 5px 5px 5px 0;
}

.add:hover {
    background-position: 5px -19px;
}


Un aperçu :
upload/41797-Capture.JPG
Modifié par Pyroxn (29 Feb 2012 - 11:20)
Je ne trouve pas la solution en css, donc en script js :

function calculTailleInputSearch() {
    $('#search').css({
        "width" : $('#menu_gauche').outerWidth() - $('.add').outerWidth(true) 
        - parseInt($('#search').css("margin-left"))
    });
}


un coup à la génération de ma page et un autre sur l'evenement resize

$(window).resize(function(){
        calculTailleInputSearch();
    })
Sujet clos
Aller à