IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Adapter police au conteneur


Sujet :

CSS

  1. #1
    Rédacteur
    Avatar de Arnaud F.
    Homme Profil pro
    Développeur COBOL
    Inscrit en
    août 2005
    Messages
    5 183
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France

    Informations professionnelles :
    Activité : Développeur COBOL
    Secteur : Finance

    Informations forums :
    Inscription : août 2005
    Messages : 5 183
    Points : 8 870
    Points
    8 870
    Par défaut Adapter police au conteneur
    Bonjour,

    j'ai un conteneur redimensionnable (de type : http://jqueryui.com/demos/resizable/#default) et j'aimerai ajuster la taille de la police en fonction du conteneur mais je ne sais pas si une police est plus adaptée qu'une autre ou le ratio à appliquer.

    Avez-vous été confronté a un cas similaire? Avez-vous une piste à me donner sur le ratio à appliquer?




    P.S: Le code HTML :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div style="position:absolute;">
        <span style="width:100%;height:100%">Texte à adapter.</span>
    </div>
    C'est par l'adresse que vaut le bûcheron, bien plus que par la force. Homère

    Installation de Code::Blocks sous Debian à partir de Nightly Builds

  2. #2
    Expert confirmé
    Avatar de vodiem
    Homme Profil pro
    Vivre
    Inscrit en
    avril 2006
    Messages
    2 886
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Vivre
    Secteur : Conseil

    Informations forums :
    Inscription : avril 2006
    Messages : 2 886
    Points : 4 312
    Points
    4 312
    Par défaut
    salut Arnaud F.,

    en css tu ne peux pas adapter la taille de la police pour qu'il prenne l'ensemble du conteneur automatiquement.
    c'est un peu normal puisque lorsqu'on choisi la taille d'une police c'est la "taille d'un caractère" et non la taille de la phrase qui est fixée.
    tu peux éventuellement le convertir en image puisque ceux-ci peuvent s'ajuster automatiquement au conteneur.
    sinon (en reprenant l'exemple) tu peux adapter un truc comme ca:
    Code JQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $("#resizable").bind( "resize", function(event, ui) {
    	$('#resizable span').css('font-size',parseInt(parseInt($("#resizable").css('width'))/10));
    	});
    en initialisant la font de départ avec un ratio (ici: font:15 ratio:10 largeur du conteneur:150px) afin d'occuper la largeur du conteneur.
    mais il peut avoir un bug si la police est substitué par une autre de plus grande taille auquel cas il faudrait éventuellement incorporer la police.
    ce serait mieux de pouvoir connaitre la largeur d'une phrase mais lorsque les dimension d'un span n'est pas fixé, la réponse est: 'auto'. :/
    je ne connais pas le moyen de déterminer cette largeur qui permettrait d'établir le ratio.

    bonne continuation,


    ps: pour test:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <html>
    <head>
    <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" />
    <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script>
    <link type="text/css" href="http://jqueryui.com/demos/demos.css" rel="stylesheet" />
    <style type="text/css">
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        #resizable span {font-size: 15}
    </style>
     
    <script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $("#resizable")
            .resizable();
            $("#resizable").bind( "resize", function(event, ui) {
                $('#resizable span').css('font-size',parseInt(parseInt($("#resizable").css('width'))/10));
                });
            });
    });
    </script>
     
    </head>
    <body>
    <div class="demo">
     
    <div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
        <div style="position:absolute;">
        <span>Texte à adapter.</span>
        </div>
    </div>
     
    </div><!-- End demo -->
     
    <div class="demo-description">
     
    <p>Enable any DOM element to be resizable.  With the cursor grab the right or bottom border and drag to the desired width or height.</p>
     
    </div><!-- End demo-description -->
    </body>
    </html>

Discussions similaires

  1. [ETAT] Adaptation de la police
    Par ESVBA dans le forum IHM
    Réponses: 3
    Dernier message: 17/04/2007, 13h03
  2. Hauteur d'un menu horizontal adapté à la taille de police
    Par BlackWood dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 01/02/2007, 11h19
  3. [css] taille du contenu adaptée à celle du conteneur ?
    Par ghohm dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 11/09/2006, 10h35
  4. Taille police adaptable
    Par Mike35 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 13/03/2006, 18h07
  5. adapter taille conteneur + taille max de ce conteneur
    Par grinder59 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 10/02/2006, 16h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo