28172 sujets

CSS et mise en forme, CSS3

Merci avant tout pour votre conseil sur ce cas : 'repeat y' sur div à gauche ok, mais pas sur div droite

J'intègre un menu extensible selon le contenu, j'ai donc des div imbriquées (nested) avec sur les 2 cotés du menu (gauche et droite) 2 div flottantes contenant les cotés graphiques du menu (left and right) . Cependant, le coté gauche s'allonge en fonction du contenu mais pas le coté droit ! Bien sûr si j'affecte une valeur en pixel sur ce même côté, cela marche mais ce menu perd du coup toute son extensibilité.

Voici le code de la colonne de gauche avec le menu gauche à l'intérieur :


#menuleftcol{
	margin-left: 88px;
	width: 133px;
	height: auto;
	margin-top: 51px;
	background-color: #E3D0CA;

}
#menuleftcolHaut{
	margin-left: 0px;
	width: 138px;
	background-color: #FFFFFF;
	height: 14px;
	margin-top: 0px;
	background-image: url(imagesbis/images/menuGau.jpg);
	background-repeat: no-repeat;
}
#menuGauCotGau{
	margin-left: 2px;
	height: auto;
	margin-top: 0px;
	background-image: url(imagesbis/images/menuGauCotGau.jpg);
	background-repeat: repeat-y;
	clear: both;
	float: left;
	margin-right: 0px;
	width: 137px;
}

#menuGauCotGau p {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	line-height: normal;
	margin-bottom: 0.8em;
	font-style: normal;
	letter-spacing: normal;
	text-align: left;
	display: block;
	height: auto;
	width: 105px;
	margin-left: 7px;
	margin-right: 0px;
	float: left;

}

menuGauCotDro {
	width: 6px;
	height: auto;
	background-image: url(imagesbis/images/menuGauCotDro.jpg);
	float: right;
	background-repeat: repeat-y;
}

#menuGaubas {
	margin-left: 0px;
	width: 137px;
	background-color: #cccccc;
	height: 10px;
	margin-top: 0px;
	background-image: url(imagesbis/images/menuGaubas.jpg);
	background-repeat: no-repeat;
	float: right;
}


Merci upload/18212-cssmenu.png
Modifié par moz (16 Oct 2008 - 09:54)
Un pt'it "bonjour" ça peut le faire aussi. Smiley cligne

Donc bonjour moz et bienvenue Smiley cligne ,

Comme te le fait remarquer Calak, le code html ou une page en ligne peut être utile pour mieux cerner le problème.
Modifié par knarf (16 Oct 2008 - 19:28)
knarf, je suis désolé, mais s'il ne s'encombre pas de quelques politesse, je ne vois pas pourquoi je me forcerais Smiley cligne

mais, il est vrai, mon état de fatigue ne joue pas en faveur de ma sympathie Smiley langue
Salut Calak,

J'ai bien remarqué et cela ne s'adressait pas seulement à toi (j'ai édité mon message) Smiley cligne .
Modifié par knarf (16 Oct 2008 - 19:30)
Calak a écrit :
Donc si j'ai bien compris, tu as un div de largeur fixe, sur lequel tu veux appliquer une bordure arrondie?
C'est marrant, mais ça me dit quelque chose Smiley cligne


Entre autre Smiley cligne (suivre les liens associés, notamment le liens en Anglais assez fourni)

Et plus globalement cet item de la FAQ et liens associés Smiley smile
Avec une petite préférence pour la méthode utilisée par Florent V.
(On va finir par croire que je le sponsorise Smiley lol )

Cdt,
Sylvain
Modifié par 6l20 (20 Oct 2008 - 11:37)
Bonsoir Calak, Knarf, 6l20

Je vous remercie pour vos réponses mais ce n'est pas ma question ! ou du moins pas tout à fait...
Dans le lien de
a écrit :
la méthode utilisée par Florent V.
en effet il aborde dans les variantes la méthode coulissante avec la propriété
background-repeat: repeat-y; c'est justement là à cet endroit que je suis stoppé net dans mon élan : sur la photo jointe, j'ai la div de droite qui ne se répète pas, sur l'axe y.



<div id="banner">Placez ici le contenu de  id "banner"</div>
<div id="chemin">Placez ici le contenu de  id "chemin"</div>
<div id="menubg"></div>
<div id="maincontent"> <!--debut de maincontent, qui contient col de gauche, partie centrale et col de droite -->
     <div id="leftcol"> <!--la colonne de gauche qui contient les 4 div du menu (avec les images qui constituent le menu) -->
         <div id="menuleftcol"> <!--le menu avec ces 4 div à l'intérieur -->
                  <div id="menuleftcolHaut"></div>
                  <div id="menuGauCotGau">
                    <p>Lorem ipsum dolor sit amet, </p> <!--le contenu du menu -->
                  <div id="menuGauCotDro">  </div>
                  </div>     
                  <div id="menuGaubas"></div>
         </div>  
     </div>

     <div id="content"> <div id="adv"></div>
       
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
     </div>
       
     <div id="rightcol">
              <div id="menurightcol"></div>
         
     </div>
     
</div>  <!--fin de maincontent -->



#maincontent {
	margin-left: auto;
	width: 1024px;
	margin-right: auto;
	height: 400px;
	background-color: #3366FF;

}

#leftcol {
	width: 233px;
	float: left;
	background-image: url(imagesbis/images/colgauche.jpg);
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
	clear: both;
	display: block;
	height: 400px;

}

#menuleftcol{
	margin-left: 88px;
	width: 132px;
	height: auto;
	margin-top: 51px;
	background-color: #E3D0CA;

}
#menuleftcolHaut{
	margin-left: 0px;
	width: 138px;
	background-color: #FFFFFF;
	height: 14px;
	margin-top: 0px;
	background-image: url(imagesbis/images/menuGau.jpg);
	background-repeat: no-repeat;
}
#menuGauCotGau{
	margin-left: 2px;
	height: auto;
	margin-top: 0px;
	background-image: url(imagesbis/images/menuGauCotGau.jpg);
	background-repeat: repeat-y;
	clear: both;
	float: left;
	margin-right: 0px;
	width: 137px;
}

#menuGauCotGau p {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	line-height: normal;
	margin-bottom: 0.8em;
	font-style: normal;
	letter-spacing: normal;
	text-align: left;
	display: block;
	height: auto;
	width: 105px;
	margin-left: 0px;
	margin-right: 0px;
	float: left;
	clear: both;

}

#menuGauCotDro {
	width: 6px;
	height: 50px;
	background-image: url(imagesbis/images/menuGauCotDro.jpg);
	float: right;
	background-repeat: repeat-y;
}
#menuGaubas {
	margin-left: 0px;
	width: 137px;
	background-color: #cccccc;
	height: 10px;
	margin-top: 0px;
	background-image: url(imagesbis/images/menuGaubas.jpg);
	background-repeat: no-repeat;
	float: right;
}
#content {
	margin-left: 5px;
	width: 550px;
	background-color: #cc6699;
	height: auto;
	float: left;

}

#adv{
	margin-left: 1px;
	width: 548px;
	background-color: #99FF00;
	height: 60px;
	float: left;

}

#rightcol {
	margin-left: 0px;
	width: 229px;
	margin-right: 0px;
	height: 400px;
	float: right;
	background-image: url(imagesbis/images/coldroite.jpg);
	background-repeat: repeat-y;
	clear: none;

}

#menurightcol{
	margin-left: 3px;
	width: 132px;
	background-color: #FF0000;
	height: 150px;
	margin-top: 51px;
} 


Je vous remercie et désolé d'avoir peut être heurté pas mon entrée en forum un peu à la hussarde...

Modifié par moz (16 Oct 2008 - 21:03)
Bon, je viens de faire mumuse:
http://calak.free.fr/~sandbox/alsa/roundedBox/roundedbox.html

C'est ça que tu voulais non?

Au passage, j'ai utilisé la technique des sprites fluides.
Voici l'image que j'ai fait pour l'occasion:
http://calak.free.fr/~sandbox/alsa/roundedBox/roundedBox.png

Si vous remarquez, j'ai laissé une colone de 1px à droite, c'est dans le cas où il demanderait une roundexBox dont on ne connait pas la taille (parfois, certaines couleurs qu'on met en background, n'ont pas la même couleur que le png...)
super! mais j'ai rien compris, donc je vais m'y mettre sérieux, c'est à dire :
-->regarder ton code source , et le comprendre.
-->l'intégrer dans le mien (à ma sauce)
-->si cela ne marche pas, cela proviendra des autres "boîtes" qui tournent autour et empêche cet div de droite d'appliquer la propriété "background repeat y"

Bon, j'y vais...demain, je vous tiens au courant, en tous les cas, merci pour cette réponse rapide et personnalisée.
Bonjour,

moz a écrit :
-->si cela ne marche pas, cela proviendra des autres "boîtes" qui tournent autour et empêche cet div de droite d'appliquer la propriété "background repeat y"

En général, rien n'empêche une image de se répéter en hauteur si on n'a pas demandé explicitement du background-repeat: no-repeat ou du background-repeat: repeat-x. Si ton image de fond ne prend pas toute la hauteur souhaitée, ça peut être:
- parce que tu t'es trompé dans les valeurs de background-repeat;
- parce que l'élément auquel tu as appliqué l'image de fond ne prend pas la hauteur souhaitée (ce que tu peux vérifier en lui donnant une bordure, par exemple).

Dans 99% des cas, c'est plutôt la deuxième raison qui est en cause.

Mais en fait, je ne vois même pas pourquoi tu aurais une div à gauche pour la bordure de gauche, et une div à droite pour la bordure de droite. Ce genre de structure qui imite un tableau à neuf cellules, ça ne marche pas, ou alors ça marche mal.

La solution proposée par Calak est élégante et efficace (bravo d'ailleurs pour le découpage de l'image à la mode «sprites», je crois que je n'avais jamais utilisé cette technique de cette manière, il faudra que j'y pense). Celle que je propose sur http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html est très proche. Je te laisse examiner tout ça. Une piste de travail (et de compréhension): on travaille surtout avec des éléments imbriqués, et on superpose ainsi plusieurs images de fond (ou différentes parties d'une même image de fond).
bon, j'ai du pain sur la planche entre vos réponses (Calak et Florent V.), je m'y penche aujourd'hui et vous tiens au courant .
Merci pour la précision de tes propos Florent V.
Bonsoir Calak,

Merci encore pour ton code adapté. Je reviens après avoir "digéré" ton information dans un premier temps avant de voir celle de Florent V par la suite.

Stp, j'aurais 3 questions : 2 plutôt théoriques et 1 pratique.

Théoriques :

1/ Comment calcule t-on initialement une valeur négative sur une propriété .Css, comme celle-ci pour le menu "rounded box" ? :
--->ex : background-position: -272px; ? d'où part en fait le point d' origine (o) sur l'axe x,y sur une image .png ? En bidouillant on s'y retrouve mais ce "n'est pas du boulot...

2/ Pourquoi avoir utilisé des "Class" au lieu des "Id" pour ce menu ?
Le résultat serait-il pas le même ? Il doit y avoir une raison , laquelle ?

Pratique :

3 / Sur le lien :

http://lesvieuxchenes.ovh.org/css/index.php j'ai intégré tes 2 menus sur les colonnes de droite et de gauche. Cependant, 2 problèmes surviennent sur le positionnement des div :

a --> lorsque le contenu s'agrandit : les div dans firefox occupent l'espace libre d'où le désordre total, alors que dans IE (V7) le "contenu bas" du site se maintient. Une idée ?

b --> Sous IE comme sous Fierefox , j'aurais souhaité que l'image d'arrière plan contenue dans la colonne de gauche ici, plus courte vu le contenu inférieur que celui de la colonne de droite, se répète jusqu'au "contenu bas" du site (esthétique). Que dois-je appliquer comme méthode ou astuce ?

Merci encore pour ta disponibilité sur ma demande, si tu ne l'a pas, c'est pas grave.
A bientôt peut être..
Bonsoir Florent V.,

Merci pour ton explication de l'autre soir...

Je viens de finir d'étudier ta méthode ( http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html )par rapport à celle de Calak.

Elles sont équivalentes pour moi, comme tu le disais, si on les observe dans leur globalité.

En fait, la propriété Css : "background-position"

--> center bottom; equivaut celle de
--> Calak : background-position: -272px;

avec une image de fond que l'on va dissimuler avec soit une valeur numérique (-272), soit une position nominative (center, left...) avec l'avantage d'une méthode plus abordable pour la méthode de Florent V. mais moins flexible, vu la position fixe des images, si le contenu est supérieur à l'image de fond, le contenu dépassera la boîte. Les variantes de la méthode Florent V. corrigent cet aspect mais devient alors équivalente dans son abord que celle de Calak.

En revanche quand tu dis :

a écrit :
- parce que l'élément auquel tu as appliqué l'image de fond ne prend pas la hauteur souhaitée (ce que tu peux vérifier en lui donnant une bordure, par exemple).


Mais, justement, pourquoi, Stp, ne prend elle pas la hauteur souhaitée, je veux dire, qu'est ce qui la "gêne" ?


Merci pour tes infos.
Est ce que les méthodes que l'on t'a donné fonctionnent?
- Si oui, c'est que TON code a un problème

As tu un peu chipoté avec pour voir leur fonctionnement?
- Si non, je t'y encourage fortement. En y allant pas à pas, tu comprendras à quel moment tu fais une erreur.

Pour "mon" système de "background-position" je t'encourage fortement à lire les articles sur le net, concernant "sprite + css"

Et si un élément ne prend pas la taille souhaitée, c'est que tu ne lui fais pas prendr ela taille souhaitée, tout simplement.
- Soit tu veux qu'il ait une taillée définie, dans ce cas, tu le précise dans la feuille de style
- Soit tu veux que la taille s'adapte au contenu, et dans ce cas, si tu ne commence pas à jouer avec les attributs "position" et autres, tout bloc conteneur prendra la taille de son contenu.

Bref, la solution que tu présentais en début de topic n'était pas propre pour un sous.
Maintenant, à toi de voir si tu préfère utiliser une des méthodes plus propre proposées ici, ou rester dans ton marasme.

(D'avance, désolé du ton employé dans ce post.)
a écrit :

Est ce que les méthodes que l'on t'a donné fonctionnent?
- Si oui, c'est que TON code a un problème


Smiley decu J'ai bien compris que mon code à un problème, sinon je ne serais pas sur le forum ! d'où mes questions théoriques et pratiques.

a écrit :
Maintenant, à toi de voir si tu préfère utiliser une des méthodes plus propre proposées ici, ou rester dans ton marasme


Smiley smile Je crois qu'il y a un problème de niveau de discours entre nous, calak, je rappelle que je suis novice, apprenant, pas vindicatif pour un sous, et essaye à voix haute avec la collaboration de personne plus qualifiée comme toi d'éclaicir un problème de css, c'est tout, et la vie continue.
Marasme il n'y a pas, au contraire, fantasme d'arriver à une solution "oui".

Bien sûr que les menus marchent mais ma question n'est pas là.
Je souhaite simplement intégrer ces menus qui marchent, merci, grace à ton aide sur une page mais selon les 2 navigateurs (Ie er firefox) j'obtiens un résulltat différent, pourquoi ? je sais qu'il y a un hack (firefox) à appliquer quelque part mais je ne sais pas où ? je rappelle l'adresse :
http://lesvieuxchenes.ovh.org/css/index.php

Merci encore pour votre aide
A oui, de fait...

Commence par rajouter un "clear: both;" à #bascontent.

Ton roundedBoxClear, mes lui une hauteur de 17px;

Si tu veux que tous les "<p>" de la roundedBox aient le même écart par rapport au bord, tu dois leur appliquer la classe roundedBoxBody

Pourquoi faire une duplication de ton code ainsi?
Apparemment, ta colonne de gauche et celle de droite ont beaucoup de points communs non?

Alors pourquoi ne pas définir 3 classes?
- roundedBox (et ses dérivés)
- rightSidebar (qui s'occupera du placement de la colonne de droite)
- leftSidebar (qui s'occupera du placement de celle de gauche)

Et dans ton html:

<div class="roundedBox rightSidebar">...</div>

Rien ne t'interdit de définir plusieurs classes à appliquer à un élément Smiley cligne

Pour ce qui est de la colone qui ne va pas jusqu'en bas, il n'existe pas (il me semble) de réelle solution. Le plus simple étant, vu que ton site à une largeur fixe, de faire une image de 1px de haut, et de la largeur de ton site, avec l'image de fond.
C'est pas clair Smiley ohwell
Au lieu de prendre une image avec le background à gauche et une autre avec le background à droite, tu prend une seule image, avec le background de gauche, de droite et du centre.
Bon, puisque mon site free.fr semble down O_o
Et puisque deux personnes me l'ont demandé, voici images et codes de l'exemple que j'avais fourni plus haut.
Je l'ai pas mal modifié pour:
- Règler un petit problème et permettre d'avoir plusieurs paragraphes dans une même boite.
- L'intégrer à un principe de layout fluide à 3 colonnes (ce que tu voulais ici non? (sauf que là, je l'ai fait fluide) Smiley cligne )

[L'image]
upload/18209-roundedBox.png

[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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Roundedbox and fluid layout Example</title>

        <style type="text/css">
            /***********
            * General Styles
            ***********/
            
            * {
                margin:0;
                padding:0;
            }
            body {
                background-color:#cc6698;
            }
            /***********
            * Rounded Styles
            ***********/
                
            .roundedBox, .roundedBoxBody, .roundedBoxClear {
                width:136px;

                margin:0;
                padding:0;
                
                background: transparent url('roundedBox.png') no-repeat 0px 0px;
            }
            .roundedBox {
                margin:10px;
                padding-top:16px;
            }
            .roundedBoxBody {
                width:116px !important;
                width:136px;

                padding:0 10px 10px 10px;

                background-color:#e3d0ca;
                background-position: -272px;
                background-repeat: repeat-y;
            }
            .roundedBoxClear {
                height:17px;

                margin-top:-5px;

                background-position:-136px;
                font-size:1px;
            }

            /***********
            * Layout Disposition
            ***********/

            .leftSidebar {
                float: left;
                margin-right: 10px;
            }
            .rightSidebar {
                float: right;
                margin-left: 10px;
            }
            .header {
                margin:10px 0;
                padding:0;
                
                text-align: center;
                color:#369;
                background-color:#fff;
                
                border:0 #369 dashed;
                border-width:0.1em 0 0.1em 0;
            }
            .content {
                overflow: hidden;
                background: khaki;
            }
            .footer {
              
                width: 100%;
                clear:both;
                color:#fff;
                font-weight: bold;
                text-align: center;
                background-color: #369;                
            }
            /*************
            * Explains
            *************/
            .hightlight {
                font-weight:bold;
                color:#456;
            }
        </style>
    </head>
    <body>
        <h1 class="header">Roundedbox and fluid layout Example</h1>
        <div class="leftSidebar">
            <div class="roundedBox">
                <p class="roundedBoxBody hightlight">
                    Dans cette colone, j'ai voulu deux boites superpos&eacute;es, donc j'ai cr&eacute;&eacute; un container suppl&eacute;mentaire, qui sui s'occupe du positionnement grace &agrave; la classe "leftSidebar".
                </p>
                <p class="roundedBoxBody">
                    Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                </p>
                <div class="roundedBoxClear">&nbsp;</div>
            </div>
            <div class="roundedBox leftSidebar">
                <p class="roundedBoxBody">
                    Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                </p>
                <div class="roundedBoxClear">&nbsp;</div>
            </div>        
        </div>
        <div class="roundedBox rightSidebar">
            <p class="roundedBoxBody hightlight">
                Cette colone par contre, n'est compos&eacute;e que d'une seule boite arrondie (mais de plusieurs paragraphes).
                Je peux donc tirer parti du multi-classage.
            </p>
            <p class="roundedBoxBody">
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
            </p>
            <p class="roundedBoxBody">
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
            </p>
            <div class="roundedBoxClear">&nbsp;</div>
        </div>        
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
                dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie,
                enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.
                Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim.
                Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.
                Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
            </p>
            <p>
                Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam,
                nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer
                quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien.
                Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere,
                metus purus iaculis lectus, et tristique ligula justo vitae magna.
            </p>    
        </div>
        <div class="footer">Ici, le footer</div>
    </body>
</html> 

Modifié par Calak (20 Oct 2008 - 13:56)
Hello Calak,

Merci pour ce petit retour, je visualise mieux le principe Smiley cligne
Une petite erreur dans le pied de page (</id> au lieu de </div>)

Cdt,
Sylvain
Oula, merci...

Dur dur coder sur une nuit blanche Smiley langue

Sinon, il y a toujours une autre solution, générant moins de code html, mais ne fonctionnant pas sous IE... A méditer donc...