Outils pour utilisateurs

Outils du site


Panneau latéral

webdev:html_css:habillage_texte_irregulier

Habillage de texte irrégulier

Idée : http://www.paris-beyrouth.org/tutoriaux-spip/article/un-habillage-irregulier-float

Fonctionne tant qu'on ne change pas la taille de l'image. Supporte les changements de taille et les décalages du texte.

<div id="main">
                <img id="portrait-1870" src="<?php bloginfo('template_url');?>/img/portrait-1870.png" alt="Maison fondée en 1870" width="314" height="429"/>
                <div class="habillage-portrait-container" style="font-size:155%;font-style:italic;">
                    <div class="habillage-portrait" style="width:260px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:290px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:310px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:322px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:330px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:333px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:335px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:333px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:330px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:318px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:306px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:285px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:285px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:285px;">&nbsp;</div>
                    <div class="habillage-portrait" style="width:285px;">&nbsp;</div>
                </div>
                <span class="texte-accueil">
                    Maison de tradition familiale fondée en 1870 dans le village de Saint Germain de Lusignan en Charente-Maritime,
                    la boulangerie Bouchet bénéficie d’un savoir-faire perpétué depuis cinq générations. Nos spécialités : le pain traditionnel,
                    les pains spéciaux et les pavés cuits sous atmosphère, destinés à la restauration collective et commerciale. À découvrir
                    également, le petit Saintongeais, un gâteau au Cognac qui fait le succès de notre maison.
                    
                    Maison de tradition familiale fondée en 1870 dans le village de Saint Germain de Lusignan en Charente-Maritime,
                    la boulangerie Bouchet bénéficie d’un savoir-faire perpétué depuis cinq générations. Nos spécialités : le pain traditionnel,
                    les pains spéciaux et les pavés cuits sous atmosphère, destinés à la restauration collective et commerciale. À découvrir
                    également, le petit Saintongeais, un gâteau au Cognac qui fait le succès de notre maison.
                </span>
                
            </div>
#main {
    background-color:rgba(233,209,164,0.9);;
    border-radius:18px;
    color:#64191B;
    
    width:800px;
    height:510px;
    margin:auto;
}

.texte-accueil {
    font-style:italic;
    font-size:155%;
}

#portrait-1870 {
    /*float:left;*/
    position:absolute;
}

div.habillage-portrait-container {
    font-size:155%;
    font-style:italic;
}

div.habillage-portrait {
    float: left;
    clear: left;
    /*height: 1.3em;*/
    overflow: hidden;
}
webdev/html_css/habillage_texte_irregulier.txt · Dernière modification: 16/01/2016 21:23 (modification externe)