http://charliclarkgallery.free.fr/Attitude...desducorps.html sur le lien vous verrez une image centrale et un bandeau défilant dont voici le code :
| CODE |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Charli Clark Gallery</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="FeuilleCs.css" rel="stylesheet" type="text/css"> <SCRIPT LANGUAGE="JavaScript"> function PopupImage(img,titre) { w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=yes'); w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>"); w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+12,document.images[0].height+40); window.focus();} else { setTimeout('check()',250) } }</"+"SCRIPT>"); w.document.write("<BODY onload='checksize()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0><IMG src='"+img+"' border=0'>"); w.document.write(""); w.document.write("</BODY></HTML>"); w.document.close(); } </SCRIPT> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="haut"> Charli Clark Gallery <hr/> </div> <div class="gauche"> <img class="positiongalerie" src="Photos/ARROW.png" style="float:left "/> <img class="positiongalerie" src="Photos/galerie.png" /> <ul class="menu"> <li><a href="nu.html">Nu</a></li> <li><a href="geisha.html">Geisha</a></li> <li><a href="Attitudesducorps.html">Attitudes du corps</a></li> <li><a href="portraitsdefemmes.html">Portrait de femmes</a></li> <li><a href="lieux.html">Lieux</a></li> </ul> <img class="position" src="Photos/ARROW.png" style="float:left "/> <img class="position" src="Photos/artiste.png" /> <ul class="menu"> <li><a href="cvanglais.html">Anglais</a></li> <li><a href="cvfrancais.html">Français</a></li> </ul> <a href="exposition.html"><img src="Photos/expositions2.png" border="0" class="position"/> </a> </p> <a href="Index.htm"><img src="Photos/accueil.png" width="114" height="16" border="0" class="position"/> </a> </div> <div id="galerie" ><marquee direction="down" height="300" width="100" scrollamount="5"> <ul id="galerie_mini"> <a href="Attitudesducorps/comtemplation.jpg" title=""><img src="Attitudesducorps/reduction/comtemplation.jpg" alt=""/></a> <a href="Attitudesducorps/gipsy.jpg" title=""><img src="Attitudesducorps/reduction/gipsy.jpg" alt=""/></a> <a href="Attitudesducorps/hessorry.jpg" title=""><img src="Attitudesducorps/reduction/hessorry.jpg" alt=""/></a> <a href="Attitudesducorps/jackiesmusic.jpg" title=""><img src="Attitudesducorps/reduction/jackiesmusic.jpg" alt=""/></a> <a href="Attitudesducorps/lamour.jpg" title=""><img src="Attitudesducorps/reduction/lamour.jpg" alt=""/></a> <a href="Attitudesducorps/naomi.jpg" title=""><img src="Attitudesducorps/reduction/naomi.jpg" alt=""/></a> <a href="Attitudesducorps/naomipapillon.jpg" title=""><img src="Attitudesducorps/reduction/naomipapillon.jpg" alt=""/></a> <a href="Attitudesducorps/womanatdance.jpg" title=""><img src="Attitudesducorps/reduction/womanatdance.jpg" alt=""/></a> </ul></marquee> </div> <dl id="photo"> <dd><img id="big_pict" src="Attitudesducorps/comtemplation.jpg" /></dd> </dl> <div class="bas"> <hr/> <li >Charli Clark - Paris</li> <li ><a href="mailto:charliclarkgallery@free.fr">charliclarkgallery@free.fr</a></li> </div> </body> </html> |
la page css :
| CODE |
| body { font-family: tahoma; font-size: 11px; background-color: #000000; font-family: tahoma; } .boitephoto { position: absolute; top: 150px; left: 275px; width: 400px; height: 376px; } .boitecv { position: absolute; top:160px; left: 275px; width: 400px; height: 351px; overflow: auto; font-family: tahoma; font-size: 12px; color: #FFFFFF; text-align: justify; } hr{ clear: left; top: 0px; } a { font-size: 11px; font-family: tahoma; color: #ffffff; font-style: normal; text-decoration: none; clear: left; } ul{ list-style-type: none; } li { font-family: tahoma; font-size: 11px; color: #FFFFFF; font-style: normal; text-transform: none; text-decoration: none; list-style-type: none; } .bodystyle { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .gauche { position: absolute; left: 0px; width: 220px; height: 464px; } .menu{ margin-top: 0px; margin-left: 37px; width: auto; height: auto; } .positiongalerie{ margin-top: 300px; margin-left: 0px; } .position{ margin-top: 0px; margin-left: 0px; } .positionvignette{ margin-top: 10px; margin-right: 10px; position: relative; } .positionintro{ margin-top: 0px; margin-left: 13px; } .bas{ position: absolute; top: 520px; left: 275px; text-align: right; width: 400px; margin-top: 0px; } .haut{ position: absolute; top: 20px; left: 272px; text-align: right; width: 400px; height: 40px; color: #FFFFFF; font-family: tahoma; font-size: 18px; font-weight: bold; margin-top: 0px; } .signature{ position: absolute; top: 60px; left: 272px; width: 400px; height: 94px; color: #FFFFFF; } .frame{ margin-left:0px; margin-top: 50px width: 820px; height: 500px; overflow: auto; font-family: tahoma; font-size: 12px; color: #FFFFFF; text-align: justify; } div#galerie{ width: 100px; height: 100px; background: #000000; position: absolute; margin-left: auto; left: 815px; top: 150px; } ul#galerie_mini{ width: 100px; margin: auto; height: 400px; list-style-type: none; } ul#galerie_mini img { border-color: #000000; vertical-align: middle; margin: auto; } dl#photo { position: absolute; top: 79px; left: 271px; width: 400px; height: 376px; } dl#photo dd { margin: 0px; } .pos { margin: auto; } |
comme vous le constatez les images dans le bandeau ne sont pas centrées et j'ai beau essayer de mettre des margin-left et tout ce qui va bien mais rien n'y fait les image sont décalées, qqu'un sait il comment les aligner ?
J'ai utilisé <marquee> par ce que je ne sais pas faire la même chose en java mais si qqu'un connait le code je suis preneur aussi.
Merci de votre aide à tous