Aller au contenu

truitas

Actif
  • Compteur de contenus

    37
  • Inscrit(e) le

  • Dernière visite

Tout ce qui a été posté par truitas

  1. merci pour vos réponses, ca a avancé grâce aux idées que vous m'avez données, c'est bien positionné après je ne sais pas si c'est très juste, qu' en pensez-vous?: a l'intérieur de ma div content située dans la div wrapper j'ai ajouté: <aside class="decodroit"> <section class="decodroit"> </section> </aside> <aside class="decogauche"> <section class="decogauche"> </section> </aside> mon CSS .content .decodroit { background:url(img/bg1.png) repeat-y; right:-25%; height:100%; } .content .decogauche { background:url(img/bg1.png) repeat-y; height: 100%; left:-12.7%; }
  2. Bonjour à tous, je tente de refaire complètement mon site en html5 et ccs3. Mon site est entièrement fluide je veux placer une image répétée en bordure extérieure de ma page gauche et droite. j'ai essayé sur le body en remplaçant right et left par des % mais en cas de redimensionnement de la page la bordure se retrouve soit trop loin soit trop près disparait sous le corps de la page. body { font-size: 68%; background:url(img/REEL_env_img_footer_1_1313510375.jpg) repeat-y right, url(img/REEL_env_img_footer2.jpg) repeat-y left; } } J'ai essayé sur ma div wrapper mais l'image est donc à l'intérieur du corps de page .wrapper { width: 100%; max-width: 1100px; border: 0 solid rgba(0,0,0,.46); border-width: 0 8px; margin: 0 auto; background:url(img/REEL_env_img_footer3.png) repeat-y right, url(img/REEL_env_img_footer2.jpg) repeat-y left; -moz-box-shadow: 0 0 12px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 12px 2px rgba(0,0,0,.2); box-shadow: 0 0 12px 2px rgba(0,0,0,.2); } } Pouvez-vous m'aider? merci yan
  3. Bonjour, je ne sais pas si cela pourra t'aider mais voici une générateur de bouton CSS3; Il suffit de faire varier les états normal state, hover state et tu devrais arriver à tes fins. (plus besoin d'image et un peu plus rapide) http://dryicons.com/demos/css3-linear-gradient-buttons-generator/ amicalement yan
  4. bonjour, tu as juste a faire un clique droit> code source de la page; et tu auras tout le nécessaire... amicalement yan
  5. bonjour et merci tomyweb, le site que tu recommandes et que j'avais mis en lien ne propose pas la compatibilité pour les différentes versions des navigateurs. J'ai utilisé:http://www.colorzilla.com/gradient-editor/ En plus de css-please mis dans le post précédent 2 sites excellents: http://www.css3files.com/ Générateur de box très complet: http://css3.mikeplate.com/
  6. merci beaucoup, on ne sais jamais si ca peut servir quelques liens vers des générateurs css permettant de travailler les gradient, shadow, les box etc: http://css3please.com/" http://www.impressivewebs.com/css3-click-chart/" http://westciv.com/tools/" http://www.display-inline.fr/projects/css-gradient/" http://gradients.glrzad.com/" http://www.colorzilla.com/gradient-editor/" http://www.css3files.com/gradient/"
  7. bonjour à tous, j'ai in problème d'affichage de ma couleur de background en dégradé: Sous firefox et chrome au lieu d'avoir un dégradé de haut en bas j ai une succession de lignes dégradées. Sous IE 9 cela ne fonctionne pas. Avez vous une solution? merci <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <style type="text/css"> body{ background: #a1dbff; /* Old browsers */ background: -moz-linear-gradient(top, #a1dbff 0%, #cbebff 53%, #f0f9ff 100%);/* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1dbff), color-stop(53%,#cbebff), color-stop(100%,#f0f9ff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1dbff', endColorstr='#f0f9ff',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* W3C */ } </style> </body> </html>
  8. Merci, je viens de tester ca marche parfaitement. pour ceux que ca intéresse je mets quelques liens vers des animations du même type: http://web.enavu.com/demos/dual_sliding_door/ http://web.enavu.com/demos/thumbnailZoom/ http://www.queness.com/resources/html/bar/index.html http://www.queness.com/resources/html/thumbnail/index.html http://web.enavu.com/demos/sliding_door/ Avant/après: http://www.queness.com/post/6480/create-an-attractive-before-and-after-photo-effect-with-jquery
  9. Bonjour à tous, j'ai trouvé une animation sur image qui m'intéresse fortement: http://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery Demo: http://www.queness.com/resources/html/slicing/index.html Par contre, je n'arrive pas à obtenir une position centrée sur ma page. Quels sont les éléments à modifier dans le CSS ? merci d'avance. Code HTML: <div class="qitem"> <a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a> <span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span> </div> CSS body { font-family:arial; } .qitem { /* width and height must be even number */ width:126px; height:126px; /* some styling for the item */ border:4px solid #222; margin:5px 5px 5px 0; background: url('bg.gif') no-repeat; /* make sure the four divs are hidden after changing the position */ overflow:hidden; /* absolute position enabled for children elements*/ position:relative; /* display item in single row */ float:left; /* hand symbol for ie and other browser */ cursor:hand; cursor:pointer; } .qitem img { border:0; } /* styling for caption, position absolute is a must to set the z-index */ .qitem .caption { position:absolute; z-index:0; color:#ccc; display:block; } .qitem .caption h4 { font-size:12px; padding:10px 5px 0 8px; margin:0; color:#369ead; } .qitem .caption p { font-size:10px; padding:3px 5px 0 8px; margin:0; } /* Generic setting for corners */ .topLeft, .topRight, .bottomLeft, .bottomRight { /* allow javascript to move the corners */ position:absolute; background-repeat: no-repeat; z-index:200; } /* set the background position for different corners */ .topLeft { background-position: top left; } .topRight { background-position: top right; } .bottomLeft { background-position: bottom left; } .bottomRight { background-position: bottom right; } .clear { clear:both; } Javascript: $(document).ready(function() { //Custom settings var style_in = 'easeOutBounce'; var style_out = 'jswing'; var speed_in = 1000; var speed_out = 300; //Calculation for corners var neg = Math.round($('.qitem').width() / 2) * (-1); var pos = neg * (-1); var out = pos * 2; $('.qitem').each(function () { //grab the anchor and image path url = $(this).find('a').attr('href'); img = $(this).find('img').attr('src'); //remove the image $('img', this).remove(); //append four corners/divs into it $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>'); //set the background image to all the corners $(this).children('div').css('background-image','url('+ img + ')'); //set the position of corners $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos}); $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos}); $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos}); $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos}); }).hover(function () { //animate the position $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out}); $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out}); $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out}); $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out}); }, function () { //put corners back to the original position $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in}); $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in}); }).click (function () { //go to the url window.location = $(this).find('a').attr('href'); }); });
  10. Bonjour à tous, le site bostom .com propose une partie photo reportage avec des clichés grand format. Vous pourrez les voir ici: Mon lien Cliquer sur une photo pour voir la série. S'il on prend la série sur Ratko Mladic. Je vous mets le poids des 10 premières en Ko: 532+682+809+471+862+572+582+728+667+567 Il y en a 41 en tout. Quel procédé utilisent-ils pour que des photos aussi grandes se chargent aussi vite? merci d'avance.
  11. Bonjour à tous, vous trouverez ci-dessous quelques liens qui me semblent intéressants pour l'intégration de carte google map ou autre sur un site. J'espère que cela vous sera utile et que j'ai posté au bon endroit: *Map slider : http://css-tricks.com/google-maps-slider/ > explorer ce site, beaucoup de tools en css et jquery ex: -http://hitotoki.org/places/japan/tokyo/ -http://widmerbrothers.com/find-beer/#beer > explorer ce site assez original -http://jaxvineyards.com/#/stockists.html -http://albertyung.com/MyTravel/20100918/ *Autre plugin jquery -http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps#demos -http://www.mayzes.org/googlemaps.jquery.html > voir les différentes démos en bas -http://www.blocsoft.com/bmap/examples.asp -http://gmap3.touraineverte.com/index.html *A voir: -http://www.topomap.co.nz/ -http://cartographer.visualmotive.com/ -http://www.cssplay.co.uk/menu/mapper.html amicalement
  12. salut merci pour ta tentative de réponse: mais je veux juste ajouter une ligne au code que je t'ai mis afin d'avoir les informations sur le volume de transaction. La ligne que je voudrais ajouter ressemblerait à ca (je bloque sur les expressions régulières concernant le volume: <syndication name="action_vol(euronext)" parent="cotation(euronext)"> <masks> <mask value=" volume:{volum}" blinking="0" color=""/> </masks> <patterns> <pattern name="volum" value="volume:</td>[ \t\r\n]*<td[ \t\r\n]*colspan="\d+"[ \t\r\n]*class="([\w]+)">[ \t\r\n]*\d+,\d+,\d+[ \t\r\n]*" /> </patterns> </syndication>
  13. truitas

    regex recuperer infos pages

    Bonjour à tous je ne suis pas sur d'être au bon endroit, j'utilise un petit programme qui permet d'afficher les cours de bourse de valeurs sélectionnées sur un bandeau défilant en haut de l'écran. source du programme: http://boursi.scroller.moult.org/ Il fonctionne avec des flux de syndication, on rentre le code d'identification d'une action dans le programme et il va chercher les informations sur une page web. Si j'avais entré par exemple le code de l'action natixis = FR0000120685, le programme serait aller extraire des infos sur la page suivante: =http://www.euronext.com/trader/summarizedmarket/stocks-2593-EN-FR0000120685.html?selectedMep=1 Mon problème: j'aimerais ajouter au flux de syndication (.sxml) des lignes permettant d'aller récupérer les informations sur le volume de transaction (tableau market data) Pouvez-vous m'aider? code du flux: <syndications> <syndication name="cotation (euronext)" url="http://www.euronext.com/trader/summarizedmarket/stocks-2593-EN-{code}.html?selectedMep=1" username="" password="" culture="en-US"> <masks> <mask value="{name} {value}{currency}" blinking="0" color=""/> </masks> <patterns> <pattern name="value" value="LAST_PRICE">(\d+[\,]*\d*.\d+)</span><" /> </patterns> </syndication> <syndication name="indice (euronext)" parent="cotation (euronext)"> <masks> <mask value="{variation_day}" image="default" index="0"/> <mask value="({variation_day}%)" blinking="0" color="variation_day"/> </masks> <patterns> <pattern name="variation_day" value="RELATIVE_DIFFERENCE">([\+\-]+\d*.\d+)%</span><" /> </patterns> </syndication> <syndication name="action (euronext)" parent="indice (euronext)"> <masks> <mask value="({my_variation}%)" blinking="0" color="my_variation" /> <mask value="{my_gain}{currency}" blinking="1" color="my_gain" /> </masks> </syndication> <syndication name="action+ (euronext)" parent="action (euronext)"> <masks> <mask value="{my_variation}" image="default" index="4"/> </masks> </syndication> </syndications> merci d'avoir lu jusqu'au bout. bien cordialement yannick
  14. bonjour a tous, je voudrais installer sur mon site (html) un moteur de recherche ne passant pas par une base de donnée. Le moteur ferait apparaître les résultats dans la page sur laquelle il se situe. Cela existe il? merci pour vos réponses.
  15. salut et merci pour ta réponse, j'ai essayé avec ce que tu m'a donné mais les images s'affichaient verticalement. Le menu et la mise en forme etaien absents. j'ai trouvé un autre exemple plus simple à mettre en place mais je n'arrive toujours pas à créer un lien. Je met en dessous le code pour le css. j'espère que tu pourras me répondre J'ai mis en ligne une page de test. le code de la page est: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="Phatfusion_fichiers/mootools.js" type="text/javascript"></script> <link href="Phatfusion_fichiers/imageMenu.css" type="text/css" rel="stylesheet"/> <script src="Phatfusion_fichiers/imageMenu.js" type="text/javascript"></script> </head> <body> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>abstract</span></li> <li class="kwick opt2"><span>People</span> </li> <li class="kwick opt3"><span>Nature</span> </li> <li class="kwick opt4"><span>Urban</span> </li> <li class="kwick opt5"><span>Abstract</span> </li> </ul> </div> <script type="text/javascript"> function test() { alert('Sélection : ' + myMenu.options.selected); } var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200, onClick: test}); </script> </body> </html> css kwick { MARGIN-TOP: 20px; POSITION: relative } #kwick .kwicks { DISPLAY: block; MARGIN: 0px; HEIGHT: 250px } #kwick LI { FLOAT: left } LI:unknown { content: "" } #kwick .kwick { BORDER-RIGHT: #fff 2px solid; DISPLAY: block; BACKGROUND: #fff; OVERFLOW: hidden; WIDTH: 97px; CURSOR: pointer; HEIGHT: 200px } #kwick .kwick SPAN { DISPLAY: none } #kwick .opt1 { BACKGROUND: url(images/landscapes.jpg) #9ce782 } #kwick .opt2 { BACKGROUND: url(images/people.jpg) #92bdfa } #kwick .opt3 { BACKGROUND: url(images/nature.jpg) #faa892 } #kwick .opt4 { BACKGROUND: url(images/urban.jpg) #e78282 } #kwick .opt5 { BACKGROUND: url(images/abstract.jpg) #000; BORDER-RIGHT-WIDTH: 0px } merci
  16. bonjour à tous, j'ai trouvé je viens de découvrir mootools et surtout un plungin qui m'intéresse. Vous pouvez le voir ici. je voudrais réaliser l'exemple n 7. Cela fait plusieurs jours que je bidouille mais apparemment je n'ai rien compris. J'ai donc plusieurs questions: 1/Où mettre les fichiers mootools.js et byslidemenu-1.1.js ? 2/Où mettre les fichiers images? 3/Que mettre dans le code html? Le peu que j'ai compris est qu'il faut mettre entre les balise head deux lignes du type: <script src="mootools.js" type="text/javascript"></script> <script src="byslidemenu-1.1.js" type="text/javascript"></script> 4/ Où mettre le code javasript pour l'exemple 7: var pinovermenu = new BySlideMenu('pinovermenu', {pinMode: 'mouseover'}); 5/Où mettre le code html de l'exemple 7: <ul id="pinovermenu"> <li><img src="creditcards.jpg" /></li> <li><img src="games.jpg" /></li> <li><img src="computer.jpg" /></li> <li><img src="eiffeltower.jpg" /></li> <li><img src="electronic.jpg" /></li> </ul> merci d'avance pour vos réponses éclairées bien cordialement petit oubli: Quel code faut il mettre pour que le clique sur l'image renvoi vers la page désirée? ou faut il le mettre? merci
  17. Salut, Quelles sont alors les solutions techniques pour du contenu provenant d'un fichier XML, d'une base de donnée?
  18. merci de ta réponse mais "qu'entend tu par faire les choses bien"
  19. Bonjour à tous, je suis entrain de transformer certains de mes tableaux html classique en tableau dynamique spry ( html+ajax+JS). Les données proviennent désormais d'un fichier xml. Le tableau se reclasse en cliquant sur les colonnes. J'aurais aimé savoir si cela allait avoir une influence négative sur mon référencement? Si oui y-a-il des techniques afin de résoudre ce problème? merci pour vos réponses
  20. bonjour a tous en fait c'était plus simple que je ne pensais: après avoir ajouté une ligne url dans mon fichier xml, il suffisait de transformer dans le doc html comme suit: code initial: <h1>spry</h1> <p> </p> <div spry:region="dsimages"> <table border="1" align="center" cellpadding="1" bordercolor="#000000" bgcolor="#FFFFFF"> <tr> <th bordercolor="#000000" spry:sort="saison"> </th> <th bordercolor="#000000" spry:sort="saison"><a href="#">Saison</a></th> <th bordercolor="#000000" spry:sort="massif"><a href="#">Massif</a></th> <th bordercolor="#000000" spry:sort="type">Type</th> <th bordercolor="#000000">Description</th> <th bordercolor="#000000" spry:sort="duree">Duree</th> <th bordercolor="#000000" spry:sort="prix"> </th> <th bordercolor="#000000" spry:sort="prix">Prix</th> </tr> <tr spry:repeat="dsimages"> <th bordercolor="#000000"><img src="image/{LARGEIMAGE}" alt="arche chartreuse" width="100" height="50" /></th> <th bordercolor="#000000">{saison}</th> <th bordercolor="#000000">{massif}</th> <th bordercolor="#000000">{type}</th> <th bordercolor="#000000">{description}</th> <th bordercolor="#000000">{duree}</th> <th bordercolor="#000000">{URL}</th> <th bordercolor="#000000">{prix}</th> </tr> </table> le résultat qui fonctionne: <th bordercolor="#000000"><a href="{URL}">Détails</a></th>
  21. truitas

    liens xml

    Bonjour à tous, j'espère être au bon endroit. je vous explique ce que je voudrais faire: J'ai crée avec dreamweaver un tableau dynamique spry inséré dans une page html que vous pouvez voir ici. J'aimerais insérer des liens dans une nouvelle colonne renvoyant vers des pages html spécifiques. Et c'est là que je bloque. Si j'ai bien compris la technologie spry utilise du Javasript, du XML et de l'ajax. Je vous remercie par avance pour vos réponses Mon code xml est le suivant: <?xml version="1.0" encoding="utf-8"?> <dataroot> <randonnees> <randonneeID>1</randonneeID> <massif>Belledonnes</massif> <type>randonnee nocturne</type> <saison>ete</saison> <prix>45</prix> <duree>apres-midi-soiree</duree> <description>randonnee et repas autour d'un feu</description> <LARGEIMAGE>etoiles_filantes.jpg</LARGEIMAGE> <MEDIAID>1</MEDIAID> </randonnees> <randonnees> <randonneeID>2</randonneeID> <massif>Bauges</massif> <type>nuitee en refuge</type> <saison>ete</saison> <prix>62</prix> <duree>soiree-nuitee-matinee</duree> <description>randonnee nocturne et nuit en refuge</description> <LARGEIMAGE>nocturne_ete.jpg</LARGEIMAGE> <MEDIAID>2</MEDIAID> </randonnees> <randonnees> <randonneeID>3</randonneeID> <massif>Bauges</massif> <type>randonnee gourmande</type> <saison>ete</saison> <prix>35</prix> <duree>journee</duree> <description>randonnee et degustation de produits du terroir</description> <LARGEIMAGE>valle _entremont_chartreuse.png</LARGEIMAGE> <MEDIAID>3</MEDIAID> </randonnees> <randonnees> <randonneeID>4</randonneeID> <massif>Chartreuse</massif> <type>randonnee thematique</type> <saison>ete</saison> <prix>38</prix> <duree>journee</duree> <description>randonnee du vertige et degustation de produits du terroir </description> <LARGEIMAGE>ARCHE_CHARTREUSE.JPG</LARGEIMAGE> <MEDIAID>4</MEDIAID> </randonnees> </dataroot> Mon code html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans nom</title> <script src="../SpryAssets/xpath.js" type="text/javascript"></script> <script src="../SpryAssets/SpryData.js" type="text/javascript"></script> <script type="text/javascript"> <!-- var dsimages = new Spry.Data.XMLDataSet("Copie de Untitled-1.xml", "dataroot/randonnees",{sortOnLoad:"prix",sortOrderOnLoad:"ascending"}); //--> </script> </head> <body> <h1>spry</h1> <p> </p> <div spry:region="dsimages"> <table border="1" align="center" cellpadding="1" bordercolor="#000000" bgcolor="#FFFFFF"> <tr> <th bordercolor="#000000" spry:sort="saison"> </th> <th bordercolor="#000000" spry:sort="saison">Saison</th> <th bordercolor="#000000" spry:sort="massif">Massif</th> <th bordercolor="#000000" spry:sort="type">Type</th> <th bordercolor="#000000">Description</th> <th bordercolor="#000000" spry:sort="duree">Duree</th> <th bordercolor="#000000" spry:sort="prix">Prix</th> </tr> <tr spry:repeat="dsimages"> <th bordercolor="#000000"><img src="image/{LARGEIMAGE}" alt="arche chartreuse" width="100" height="50" /></th> <th bordercolor="#000000">{saison}</th> <th bordercolor="#000000">{massif}</th> <th bordercolor="#000000">{type}</th> <th bordercolor="#000000">{description}</th> <th bordercolor="#000000">{duree}</th> <th bordercolor="#000000">{prix}</th> </tr> </table> </div> <p> </p> </body> </html>
  22. merci a tout les deux pour vos réponses cordialement
  23. Bonjour à tous, cela fait un an que j'ai mis mon site en ligne en n'y connaissant rien au départ. Je suis bien positionné sur certains mots clefs mais les visiteurs ne consultent bien souvent que ma page d'accueil et ne restent que peu de temps. Il doit y avoir un problème de design (les internautes ne doivent pas avoir envie d'aller plus loin) ainsi qu'un problème de navigation, enfin c'est mon explication. En ce qui concerne mon menu horizontal, je ne suis pas très satisfait et suis preneurs de toutes solutions. je vous remercie de tous les conseils avertis que vous pourriez me donner. cordialement truitas nb: le lien vers le site est dans la signature
  24. bonjour à tous, pourriez vous m"expliquer pourquoi la commande de google related:"mon site etc" donne comme résultat un site en japonais (vente de produit locaux) alors que mon site traîte de la randonnée et de la culture de Savoie. merci
×
×
  • Créer...