Avec HTML pour créer un index - comment cela fonctionne:

FONTE ZOOM:

Créer une page d'index HTML est très simple. Avec seulement quelques lignes de code HTML pour créer le World Wide Web votre propre présence.

Index.html est la page principale de votre site, le visiteur arrive à la première information. La maison est pour ainsi dire, votre réceptionniste et guide le visiteur à travers des liens à côté des pages épisode où sont les informations réelles.

Préparer le fichier index.html

  1. Ouvrez votre éditeur de texte. Sous Windows, vous trouverez cette vertu: Démarrer -> Programmes -> Accessoires.
  2. Lorsqu'il est ouvert, l'éditeur, cliquez sur la première chose dans le coin supérieur gauche sur "Fichier", qui ouvre un menu de texte.
  3. Sélectionnez l'élément de la "Enregistrer sous".
  4. Ensuite, ouvrez une nouvelle fenêtre où vous devez changer le "Save as type" à "Fichiers texte" sur "tous les fichiers".
  5. Maintenant, entrez "Nom du fichier" index.html et confirmer l'entrée en cliquant sur Enregistrer.

Avec ces cinq étapes que vous avez créé un fichier d'index vide dans votre dossier Mes documents. Maintenant, ce fichier doit être rempli de vie.

Remplissez le fichier avec la vie

Maintenant, ouvrez le index.hml vide créé précédemment de sorte que vous pouvez commencer la programmation effective. Fonctionne avec des balises HTML, qui sont des marqueurs qui indiquent le début et la fin d'un élément.

  1. La première chose à garder à la première ligne de la balise "" un, partageant ainsi le navigateur de communiquer avec le langage HTML.
  2. Dans la ligne suivante, entrez "" comme la balise de début.
  3. Dans la troisième ligne suit la balise "" suivi du nom du site. Enfin, après la balise fermante </ title>. </li> <li> Maintenant vient la balise finale »</ head>". </li> <li> Suivi par une autre nouvelle ligne sur laquelle aujourd'hui le tag "<body>" signifie. Ici vous entrez le texte réel pour votre site web. B. Ma page d'accueil, la description de votre page, etc. </li> <li> Puis suit un nouveau jour de l'obtention du diplôme, cette fois pour le corps "</ body>" </li> <li> Dans la dernière ligne, entrez le dernier jour pour un html "</ html>" </li> <li> Enfin, enregistrez le fichier. </li> </ol> <p> Ainsi, l'entrée dans le monde de la programmation html est fait, si vous avez maintenant enteckt les concepteurs de site web en lui-même, vous trouverez un très bon la page débutant SelfHTML. </p> </span> <div style="margin-top: 10px"> <span> <style type="text/css"> .rating_frame {margin: 10px 0px 10px 0px !important; width: 130px !important; background:#FFFFFF !important;} .rating_top {font-size: 10pt !important; padding: 3px 3px 3px 5px !important; border: 1px solid #e4e4e4 !important; background: #f9f9f9 url('/images/v_header.GIF') repeat-x !important; font-weight: bold !important; font-family: verdana !important;} .rating_bottom {border: 1px solid #e4e4e4 !important; border-top: none !important; font-size: 10pt !important; line-height: 1.2em !important; background: #fff !important; padding: 5px !important;} .rating_main {position:relative !important; height:21px !important; cursor:pointer; width:114px !important; display: inline-block; top: 3px} .rating_ground, .rating_votes, .rating_hover {height:21px !important; position:absolute !important} .rating_ground {background:url('/images/v_ratings_1.png'); width:114px !important; } .rating_votes {background:url('/images/v_ratings_1.png') 0 -22px} .rating_hover {background:url('/images/v_ratings_1.png') 0 -44px; display:none} .rating_zone {padding: 0px 0px 5px 5px !important; margin: 0px 0px 0px 0px; line-height: 0.2em !important;} .rating_loading_blink { -webkit-animation: rating_loading_blink 3s linear infinite; animation: rating_loading_blink 3s linear infinite; } @-webkit-keyframes rating_loading_blink { 0% { color: rgba(34, 34, 34, 1); } 50% { color: rgba(34, 34, 34, 0); } 100% { color: rgba(34, 34, 34, 1); } } @keyframes rating_loading_blink { 0% { color: rgba(34, 34, 34, 1); } 50% { color: rgba(34, 34, 34, 0); } 100% { color: rgba(34, 34, 34, 1); } } </style> <div class="rating_frame"> <div class="rating_top" id="rating_info"></div> <div class="rating_bottom"> <div class="rating_zone"> <div class="rating_main" id="rating_main"> <div class="rating_ground"></div> <div class="rating_hover" id="rating_hover"></div> <div class="rating_votes" id="rating_votes"></div> </div> </div> </div> </div><script type="text/javascript"> $(document).ready(function(){ RatingInitial = 0; RatingPageName = "avec-html-pour-creer-un-index-comment-cela-fonctionne"; RatingActivated = false; RatingSideA = 'Évaluation: '; RatingSideB = ' | Votes: '; RatingRates = 0; RatingVotes = 0; RatingTipSelect = 'Choisir '; RatingTipLoading = 'Chargement ...'; RatingTipLoadingShow = false; RatingTipDone = 'Adoptée voix!'; RatingTipDoneShow = false; RatingTipBlinking = true; RatingLockTime = 0.2; RatingPathPrefix = '/statistic/rating/'; RatingUrl = 'http://wunderking.com/categorie/computer/avec-html-pour-creer-un-index-comment-cela-fonctionne.php'; if (RatingActivated == false) $('#rating_votes').width(RatingInitial*22); $('#rating_info').append(RatingSideA + '<b>' + RatingInitial.toFixed(1) + '</b>'); he_voted = $.cookies.get('article_rating_'+RatingPageName); if(he_voted != null) { $("#rating_main").attr("title",RatingSideA + RatingInitial.toFixed(1) + RatingSideB + RatingVotes); } if(he_voted == null){ $('#rating_main').hover(function() { $('#rating_votes, #rating_hover').toggle(); }, function() { $('#rating_votes, #rating_hover').toggle(); }); var margin_doc = $("#rating_main").offset(); $("#rating_main").mousemove(function(e){ var widht_votes = e.pageX - margin_doc.left; if (widht_votes == 0) widht_votes =1 ; user_votes = Math.ceil(widht_votes/22); if (user_votes > 5) user_votes = 5; if (RatingActivated == false) $('#rating_hover').width(user_votes*22); $("#rating_main").attr("title",RatingTipSelect + user_votes); }); $('#rating_main').click(function(){ saved_vote = user_votes; RatingActivated = true; if (RatingTipBlinking) $("#rating_info").addClass('rating_loading_blink'); if (RatingTipLoadingShow) $("#rating_info").html(RatingTipLoading); $('#rating_loading img').toggle(); $.post( "/tools/rating_vote.php", {page: RatingPageName, rate: user_votes, message: RatingTipDone, prefix: RatingPathPrefix, url: RatingUrl}, function(data){ $('#rating_info').toggle(); if (RatingTipBlinking) $("#rating_info").removeClass('rating_loading_blink'); var rate_next = ((RatingRates + saved_vote)/(RatingVotes + 1)).toFixed(1); if (RatingTipDoneShow) $("#rating_info").html(RatingTipDone); else $("#rating_info").html(RatingSideA + '<b>' + rate_next + '</b>'); $('#rating_votes').width(rate_next*22); $('#rating_info, #rating_loading img').toggle(); $.cookies.set('article_rating_'+RatingPageName, 123, {hoursToLive: RatingLockTime}); $("#rating_main").attr("title",RatingSideA + rate_next + RatingSideB + (RatingVotes + 1)); $("#rating_main").unbind(); $('#rating_hover').hide(); $('#rating_votes').show(); } ) });}}); </script> </span> <span> <script type="text/javascript"> google_ad_client = "ca-pub-4665675800508568"; google_ad_slot = "2381967530"; google_ad_width = 468; google_ad_height = 15; </script> <!-- Wunderking 468x15 --> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </span> </div> <script type="text/javascript"> google_ad_client = "ca-pub-4665675800508568"; google_ad_slot = "3858700734"; google_ad_width = 580; google_ad_height = 400; </script> <!-- Wunderking 580x400 --> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <style type="text/css"> .quick_links {width: 90%; height: 43px; margin: 0px 0px 5px 0px !important; padding: 10px 15px !important; display: inline-block; box-shadow: none; font-size: 15px; line-height: 1.42857143;color: #2c3e50;border: 2px solid #dce4ec;border-radius: 4px;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;font-family: inherit;box-sizing: border-box; cursor: pointer;} .quick_links:focus {border: 2px solid #A2D0FD;} .quick_links_copy { margin: 5px !important; width: 32px; height: 32px; position: relative; top: 8px; display: inline-block; border: none; background: url(/images/links_copy.png) no-repeat; cursor: pointer;} .quick_links_copy:hover { opacity: 0.6;} #quick_links_block p { margin: 10px 0px 10px 0px !important; padding: 0px !important;} #quick_links_block h2 { margin: 20px 0px 5px 0px !important; font-size: 16px !important; color: rgb(19, 83, 86) !important; font-family: 'Comic Sans MS'; } @media screen and (max-device-width: 533px), screen and (max-width: 533px) { #quick_links_block {display: none;} } @-moz-document url-prefix() { .quick_links { margin: 15px 0px 5px !important; } .quick_links_copy { margin: 5px !important; top: -5px; } } </style> <div id="quick_links_block"> <h2>Lien vers le site / blog:</h2> <p> <button title="Sélectionnez le lien" class="quick_links_copy" onclick="LinkCopyA()" onfocus="this.blur()"></button> <input type="text" class="quick_links" id="quick_links_a" value='<a href="http://wunderking.com/categorie/computer/avec-html-pour-creer-un-index-comment-cela-fonctionne.php" title="Avec HTML pour créer un index - comment cela fonctionne:">Avec HTML pour créer un index - comment cela fonctionne:</a>' onclick="this.select()" readonly/> </p> <h2>Lien til forums (BB-code):</h2> <p> <button title="Sélectionnez le lien" class="quick_links_copy" onclick="LinkCopyB()" onfocus="this.blur()"></button> <input type="text" class="quick_links" id="quick_links_b" value='[url=http://wunderking.com/categorie/computer/avec-html-pour-creer-un-index-comment-cela-fonctionne.php]Avec HTML pour créer un index - comment cela fonctionne:[/url]' onclick="this.select()" readonly/> </p> </div><script type="text/javascript"> function LinkCopyA() { $("#quick_links_a").select(); } function LinkCopyB() { $("#quick_links_b").select(); } </script> </div> <div class="aline"></div> <div id="article-tags"> <div class="font_bold">TAGS: <a href="#">Ordinateur</a>, <a href="#">la page d'accueil</a>, <a href="#">site web</a>, <a href="#">html</a>, <a href="#">index</a> </div></div> <div class="aline"></div> <div id="article_other"> <div class="font_bold article_other_header">VOIR AUSSI:</div> <ol class="font_bold"> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/feuilles-de-temps-faire-une-forme-pour-les-travailleurs-comment-cela-fonc.php" title="Feuilles de temps: faire une forme pour les travailleurs - comment cela fonctionne:"><img src="/images/article_image.png" class="article-other_image"></a></div> <div class="postmeta"> <h2 class="small"><a href="http://wunderking.com/categorie/computer/feuilles-de-temps-faire-une-forme-pour-les-travailleurs-comment-cela-fonc.php">Feuilles de temps: faire une forme pour les travailleurs - comment cela fonctionne:</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/changement-blender-allemand-comment-cela-fonctionne.php" title="Changement Blender Allemand - comment cela fonctionne:"><img src="/images/article_image.png" class="article-other_image"></a></div> <div class="postmeta"> <h2 class="small"><a href="http://wunderking.com/categorie/computer/changement-blender-allemand-comment-cela-fonctionne.php">Changement Blender Allemand - comment cela fonctionne:</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/copier-un-cd-pour-pc-comment-cela-fonctionne.php" title="Copier un CD pour PC - comment cela fonctionne:"><img src="/images/article_image.png" class="article-other_image"></a></div> <div class="postmeta"> <h2 class="small"><a href="http://wunderking.com/categorie/computer/copier-un-cd-pour-pc-comment-cela-fonctionne.php">Copier un CD pour PC - comment cela fonctionne:</a></h2> </div> <div class="cleaner"> </div> </li> </ol> <div style="margin-top: 10px"> <script type="text/javascript"> google_ad_client = "ca-pub-4665675800508568"; google_ad_slot = "2381967530"; google_ad_width = 468; google_ad_height = 15; </script> <!-- Wunderking 468x15 --> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <script type="text/javascript"> </script> </div> <div class="aline"></div> <style type="text/css"> @font-face { font-family: "likes-icons"; font-style: normal; font-weight: normal; src: url('/images/fonts_additional/likes-icons.eot') format("embedded-opentype"), url('/images/fonts_additional/likes-icons.woff') format("woff"), url('/images/fonts_additional/likes-icons.ttf') format("truetype"), url('/images/fonts_additional/likes-icons.svg') format("svg"); } @font-face { font-family: "Yanone Kaffeesatz"; font-style: normal; font-weight: 700; src: local("Yanone Kaffeesatz Bold"), local("YanoneKaffeesatz-Bold"), url('/images/fonts_additional/yanone.woff') format("woff"); } .clearfix { clear: both } .comment_hide { display: none} .comment_item {margin: 15px 0px 15px 0px !important; padding: 0px !important; } .comment_item p { margin: 5px 0px 15px 0px !important; padding: 0px !important; } .comment_item_author { color: rgb(34, 34, 34); font-family: "Helvetica Neue",Arial,Tahoma,sans-serif; font-weight: bold; } .comment_item_logo { width: 48px; height: 48px; float: left; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); margin: -5px 5px 5px 0px !important; padding: 4px !important; cursor: pointer; } .comment_item_logo:hover { opacity: 0.8;} .comment_item_author cite { font-style: normal; } .comment_item_says {color: rgb(235, 97, 105)} .comment_item_date { font-family: "Helvetica Neue",Arial,Tahoma,sans-serif; color: rgb(123, 123, 123); text-decoration: none; font-size: 11px; margin: 0px 0px 20px 0px !important; text-decoration: none; } .comment_item_header {line-height: 22px;} .comment_item_content {font-family: 'Comic Sans MS'; font-size: 14px;} .comment_item_likes {float: right;} .comment_item_like_value {float: left; padding: 11px 13px 9.5px 13px; border-radius: 4px 0px 0px 4px; color: #fff; background-color: #545659; box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); font-weight: normal; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing: .01em; text-transform: uppercase;} .comment_item_like_inc:before { content: "\e628"; } .comment_item_like_dec:before { content: "\e62a"; } .comment_item_like_inc {padding: 12px 13px 12px 13px; background-color: #fff; color: #bcbdc0; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 0px 1px 1px; font-family: "likes-icons"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; cursor: pointer;} .comment_item_like_dec {padding: 12px 13px 12px 13px; background-color: #fff; color: #bcbdc0; border: 1px solid rgb(221, 221, 221); border-radius: 0px 4px 4px 0px; font-family: "likes-icons"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; cursor: pointer;} .comment_item_like_inc:hover { color: rgb(51, 51, 51) !important; background-color: #F4F9FD; } .comment_item_like_dec:hover { color: rgb(51, 51, 51) !important; background-color: #F4F9FD; } .comment_item_likes_style_1 { line-height: 27px; cursor: default; display: inline-block; white-space: nowrap; direction: ltr; text-indent: 0px; position: relative; background-attachment: scroll; font-family: "Helvetica Neue",Arial,sans-serif; font-size: 12px; font-weight: 700; margin: 0px; padding: 0px; border-width: 0px; text-decoration: none; text-transform: none; direction: ltr; text-indent: 0px; text-shadow: none; box-sizing: content-box; } .comment_item_likes_style_1_like_wrap, .comment_item_likes_style_1_dislike_wrap { background-color: transparent; border: 1px solid transparent; border-radius: 2px; color: rgb(102, 102, 102); height: 27px; padding: 0px 7px 0px 8px; display: inline-block; margin-right: 3px; overflow: visible; } .comment_item_likes_style_1_like_wrap:hover, .comment_item_likes_style_1_dislike_wrap:hover { background-color: rgb(248, 248, 248); border: 1px solid rgb(198, 198, 198); color: rgb(51, 51, 51); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset; border-radius: 2px; height: 27px; } .comment_item_likes_style_1_button { line-height: 27px; display: inline-block; color: rgb(120, 120, 105); overflow: visible; position: relative; text-decoration: none; outline: medium none; top: 0px; } .comment_item_likes_style_1_button span { vertical-align: middle; } .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_like_icon:hover { background-image: url('/images/comments_likes_1.png'); opacity: 0.66; display: inline-block; cursor: pointer; height: 16px; margin-right: 2px; width: 16px; vertical-align: middle; } .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1 .comment_item_likes_style_1_like_icon, .comment_item_likes_style_1 .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_like_icon { opacity: 1; } .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_dislike_icon { background-image: url('/images/comments_dislikes_1.png'); opacity: 0.66; display: inline-block; cursor: pointer; height: 16px; margin-right: 2px; width: 16px; vertical-align: middle; } .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_dislike_icon, .comment_item_likes_style_1_button:hover .comment_item_likes_style_1_dislike_icon { opacity: 1; } .comment_item_likes_style_1_counter { height: 27px; display: inline-block; padding: 0px 2px 0px 4px; font-size: 13px; font-weight: normal; position: relative; top: 0px; vertical-align: middle; } .comment_item_likes_style_2 { line-height: 24px; cursor: default; display: inline-block; white-space: nowrap; direction: ltr; text-indent: 0px; position: relative; background-attachment: scroll; font-family: "Helvetica Neue",Arial,sans-serif; font-size: 12px; font-weight: 700; margin: 0px; padding: 0px; border-width: 0px; text-decoration: none; text-transform: none; direction: ltr; text-indent: 0px; text-shadow: none; box-sizing: content-box; } .comment_item_likes_style_2_like_wrap, .comment_item_likes_style_2_dislike_wrap { background-color: transparent; color: rgb(85, 85, 85); height: 26px; border-radius: 2px; display: inline-block; margin-right: 3px; overflow: visible; padding: 1px 0px 1px 3px; } .comment_item_likes_style_2_button {display: inline-block; color: rgb(120, 120, 105); overflow: visible; position: relative; text-decoration: none; outline: medium none; top: 1px;} .comment_item_likes_style_2_like_icon, .comment_item_likes_style_2_dislike_icon { height: 24px; width: 24px; display: inline-block; cursor: pointer; margin-right: 2px; vertical-align: middle; } .comment_item_likes_style_2_like_icon { background-image: url('/images/comments_likes_2_1.png'); } .comment_item_likes_style_2_like_icon:hover { background-image: url('/images/comments_likes_2_2.png'); } .comment_item_likes_style_2_dislike_icon { background-image: url('/images/comments_dislikes_2_1.png'); } .comment_item_likes_style_2_dislike_icon:hover { background-image: url('/images/comments_dislikes_2_2.png'); } .comment_item_likes_style_2_counter { height: 24px; display: inline-block; padding: 0px; font-weight: normal; position: relative; top: 1px; vertical-align: middle; } #comments_block { width: 99%; margin: 0px 0px 15px 0px !important; padding: 0px 0px 0px 0px !important; border: 1px solid rgb(205, 205, 205);} #comments_inner { margin: 10px 0px 10px 0px !important;} #comments_zone {margin: 10px !important; padding: 10px !important; border: 1px solid rgb(205, 205, 205); background-color: rgb(235, 235, 235);} .comments_sep { background: url('/images/comments_sep.gif') repeat-x scroll left top transparent; height: 10px; clear: both } .comments_header { margin: 0px !important; padding: 0px !important; border-bottom: 1px solid rgb(205, 205, 205); background-color: rgb(250, 250, 250); background-image: -moz-linear-gradient(center top , rgb(255, 255, 255), rgb(242, 242, 242)); background-repeat: repeat-x; } .comments_legend { display: block; width: 100%; padding: 0pt; margin-bottom: 5px; font-size: 14px; text-transform: uppercase; font-weight: bold; line-height: 20px; color: rgb(51, 51, 51); border: 0pt none; } .comments_legend_h {position: relative; top: 4px} .comments_legend_spot {background:url(/images/toggle.png); display: inline-block; width: 14px; height: 14px; margin-top: 6px; float: right; color: rgb(153, 153, 153);} #comments_toggle { display: block; margin: 0px !important; padding: 8px 15px !important; cursor: pointer; text-decoration: none; } #add_block { width: 99%; background-color: rgb(250, 251, 252); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 1px solid rgb(205, 205, 205); } #add_block label { margin: 0px !important; padding: 0px !important; } #add_block p { margin: 10px 0px 10px 0px !important; padding: 0px !important;} #add_block textarea { margin: 10px 0px 10px 0px !important;} #add_inner { margin: 10px !important} #add_header { margin: 0px 0px 15px 0px !important; padding: 10px 0px 0px 0px !important; font-size: 14px !important; text-transform: uppercase; font-weight: bold; } .add_sep { margin: 0px 0px 15px 0px !important; background: url('/images/comments_sep.gif') repeat-x scroll left top transparent; height: 10px; clear: both } #add_submit { width: 100%; padding: 10px !important } #get_logo img { width: 48px; height: 48px; opacity: 0.4; border: 1px solid rgb(221, 221, 221); padding: 10px !important; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } #get_logo img:hover { opacity: 1.0; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; } #get_logo .selected { opacity: 1.0; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; } #cap_image {margin: 0px 10px 0px 0px !important; border: 1px solid rgb(205, 205, 205); width: 130px; height: 61px; float: left;} #cap_code_refresh { width: 32px; height: 32px; border: none; background: url(/images/cap_refresh.png) no-repeat; position: relative; top: 10px; cursor: pointer;} #cap_code_refresh:hover { opacity: 0.8;} #cap_field { position: relative; top: 0px } #cap_enter_wrap { position: relative; left: 10px;} #get_author { width: 98%; margin: 0px !important; padding: 5px !important; font-size: 16px !important; color: rgb(69, 85, 247); } #get_text { width: 98%; height: 160px; margin: 0px !important; padding: 5px !important; font-size: 16px !important; margin-top: 10px; color: rgb(168, 30, 249); } #get_code { width: 130px; margin: 0px 5px 0px 0px !important; padding: 5px !important; font-size: 16px !important; text-transform: uppercase; text-align: center;} #get_tip {margin: 0px 0px 10px 0px !important; padding: 10px 10px 10px 60px !important; display: none; border: 1px solid rgb(205, 205, 205); align: center;} .tip_red {background-color: rgb(250, 232, 228) !important; background: url(/images/icon-tip_red.png) no-repeat 10px;} .tip_green {background-color: rgb(228, 250, 233) !important; background: url(/images/icon-tip_green.png) no-repeat 10px;} .tip_blue {background-color: rgb(228, 242, 250) !important; background: url(/images/icon-tip_blue.png) no-repeat 10px;} .tip_spot {background-color: rgb(233, 249, 250) !important;} @media screen and (max-device-width: 800px), screen and (max-width: 800px) { #get_author, #get_text { width: 96%;} } @media screen and (max-device-width: 414px), screen and (max-width: 414px) { #get_author, #get_text { width: 95%;} } @media screen and (max-device-width: 375px), screen and (max-width: 375px) { #cap_image {float: none; margin: 0px 10px 10px 0px !important;} } @media screen and (max-device-width: 176px), screen and (max-width: 176px) { #cap_image {width: 125px} #get_code {width: 100px} #cap_code_refresh {top: 5px; left: 10px} } @-moz-document url-prefix() { #cap_code_refresh { top: 0px;} #cap_field { position: relative; top: 10px} #cap_enter_wrap { bottom: 10px} } #add_submit { padding: 12px !important; background: url('/images/button_submit.png') repeat-x scroll 0% 0% rgb(29, 111, 167); border: 1px solid rgb(21, 92, 142); text-shadow: -1px -1px rgb(19, 70, 104); border-radius: 3px; color: white; cursor: pointer; font-size: 14px; font-weight: bold; text-decoration: none; font-family: "Helvetica Neue",Arial,Tahoma,sans-serif;} #add_submit:hover { background: none repeat scroll 0% 0% rgb(29, 111, 167); } #add_submit2 { font-weight: 700; color: rgba(255,255,255,.9); text-shadow: #2e7ebd 0 1px 2px; text-decoration: none; text-align: center; line-height: 1.1; white-space: pre-line; border: 1px solid; border-color: #60a3d8 #2970a9 #2970a9 #60a3d8; border-radius: 6px; outline: none; background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce); box-shadow: inset rgba(255,255,255,.5) 1px 1px; cursor: pointer; } #add_submit2:hover { color: rgb(255,255,255); background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce); } #comments_more_wrap {margin: 10px 10px -7px 10px !important;} .comments_more_button { margin: 0px 0px 10px 0px !important; padding: 20px 30px !important; text-transform: uppercase; font-family: 'Comic Sans MS','Yanone Kaffeesatz',sans-serif; font-size: 19px; display: inline-block; color: rgb(0, 0, 0); width: 100%; text-align: center; text-decoration: none; border: 1px solid rgb(222, 219, 209); border-radius: 5px; transition: all 0.2s ease-out 0s; background: none repeat scroll 0% 0% rgb(255, 255, 255); cursor: pointer; } .comments_more_button:hover { background-color: rgb(84, 84, 84); color: rgb(255, 255, 255) !important; } .tooltip_default { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#0088e2), to(#005cc4)); background-image: -webkit-linear-gradient(top, #0088e2, #005cc4); background-image: -moz-linear-gradient(top, #0088e2, #005cc4); background-image: -ms-linear-gradient(top, #0088e2, #005cc4); background-image: -o-linear-gradient(top, #0088e2, #005cc4); background-image: linear-gradient(to bottom, #0088e2, #005cc4); color: white;font-weight: normal; padding: 8px; border-radius: 5px; box-shadow: 0px 0px 3px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.5); margin-top: 10px; text-shadow: -1px -1px 0px rgba(0,0,0,0.4); } .tooltip_default:after { content: ''; border-top: 10px solid #005cc4; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 35%; top: 85%; } .tooltip_biggrey { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f6f6f6)); background-image: -webkit-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -moz-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -ms-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -o-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: linear-gradient(to bottom, #f9f9f9, #f6f6f6); color: rgb(22, 22, 22); width: 140px; height: 25px; padding: 30px 20px 20px 20px; border: 1px solid #e5e5e5; border-radius: 5px; box-shadow: 0px 2px 0px rgba(0,0,0,0.1); margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); text-align: center; font-size: 18px; font-weight: bold } .tooltip_biggrey:after { content: ''; border-top: 10px solid #f6f6f6; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 45%; margin-top: 2.5em; } .tooltip_biggrey:before { content: ''; border-top: 10px solid rgba(0,0,0,0.1); border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 45%; margin-top: 2.5em; } .tooltip_softblue { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#ddeefe), to(#c0e0f1)); background-image: -webkit-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -moz-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -ms-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -o-linear-gradient(top, #ddeefe, #c0e0f1); background-image: linear-gradient(to bottom, #ddeefe, #c0e0f1); color: #3f4b53; font-weight: bold; padding: 5px 20px; border-radius: 20px; border: 1px solid #c0d9e9; margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); } .tooltip_softblue:after { content: ''; border-top: 6px solid #c0e0f1; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 1.5em; } .tooltip_softblue:before { content: ''; border-top: 6px solid #c0d9e9; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 1.5em; } .tooltip_bigyellow { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#f7e29a), to(#deb223)); background-image: -webkit-linear-gradient(top, #f7e29a, #deb223); background-image: -moz-linear-gradient(top, #f7e29a, #deb223); background-image: -ms-linear-gradient(top, #f7e29a, #deb223); background-image: -o-linear-gradient(top, #f7e29a, #deb223); background-image: linear-gradient(to bottom, #f7e29a, #deb223); color: #2c170a; font-weight: bold; width: 100px; padding: 12px 20px; border-radius: 20px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5); border: 1px solid #d9c171; margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); text-align: center; z-index: 8; } .tooltip_bigyellow:after { content: ''; border-top: 6px solid #deb223; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 1.9em; } .tooltip_black { font-family: sans-serif; font-size: 0.875em; text-align: center; text-shadow: 0 1px rgba( 0, 0, 0, .5 ); line-height: 1.5; color: #fff; background: #333; background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) ); background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) ); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); position: absolute; z-index: 100; padding: 15px; } .tooltip_black:after { content: ''; border-top: 10px solid #333; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 35%; top: 92%; } </style> <div id="comments_block"> <div class="comments_header"> <a id="comments_toggle" onclick="ToggleComments('#comments_inner')" onmousedown="return false"> <span class="comments_legend"><span class="comments_legend_h">Commentaires - 0</span><i class="comments_legend_spot"></i></span> </a> </div> <div id="comments_inner"> <div id="comments_zone"> <div> Sans commentaires </div> <div class="clearfix"></div> </div> <div id="comments_more_wrap"> <button class="comments_more_button" onclick="MoreComments()" onfocus="this.blur()">Autres commentaires</button> </div> </div> </div> <div id="add_block"> <div id="add_inner"> <h3 id="add_header">Laisser un commentaire</h3> <div class="add_sep"></div> <form method="post"> <p> <label for="get_author">Nom :</label> <div><input id="get_author" name="get_author" maxlength="30" value="" type="text"></div> </p> <p> <label for="get_text">Commentaire :</label> <textarea id="get_text" name="get_text" maxlength="3000"></textarea> </p> <p> <label for="get_logo">Choisissez avatar :</label> <div id="get_logo"> <div> <img src="/images/comment_logo_m_1.png"> <img src="/images/comment_logo_m_2.png"> <img src="/images/comment_logo_m_3.png"> <img src="/images/comment_logo_m_4.png"> </div> <div> <img src="/images/comment_logo_w_1.png"> <img src="/images/comment_logo_w_2.png"> <img src="/images/comment_logo_w_3.png"> <img src="/images/comment_logo_w_4.png"> </div> </div> </p> <p> <div id="cap_image"> <img src="/tools/comment_captcha.php" id="cap_source" alt="Code De Sécurité"/> </div> <div id="cap_field"> <div id="cap_enter_wrap"><label for="get_code">Entrez le code :</label></div> <div style="display: inline-block"><input id="get_code" name="get_code" maxlength="8" value="" type="text"></div> <div style="display: inline-block"><input id="cap_code_refresh" type="button" value="" onclick="RefreshCode()" onfocus="this.blur()" tooltip="Recharger le code"></div> </div> <div class="clearfix"></div> </p> <div id="get_tip"></div> <p> <input name="add_submit" id="add_submit" type="button" value="Envoyer" onclick="AddComment()"> </p> </form> </div> </div><script type="text/javascript"> jQuery.fn.extend({ insert: function(myValue){ return this.each(function(i) { if (document.selection) { this.focus(); var sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if (this.selectionStart || this.selectionStart == '0') { var startPos = this.selectionStart; var endPos = this.selectionEnd; var scrollTop = this.scrollTop; this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length); this.focus(); this.selectionStart = startPos + myValue.length; this.selectionEnd = startPos + myValue.length; this.scrollTop = scrollTop; } else { this.value += myValue; this.focus(); } }) } }); CommentsAddDone = false; CommentsAddLock = false; CommentsCount = 0; CommentsHideMode = true; CommentsHideFlag = true; CommentsHideVal = 5; CommentStatus = true; CommentsLogoIndex = 0; CommentsLogoApply = true; CommentsLogoSaveTime = 0.2; CommentsAddTipHasBeen = 'Vous avez laissé votre commentaire!'; CommentsAddTipUnfilled = 'Tous les champs sont remplis.'; CommentsAddTipDone = 'Commentaire ajouté!'; CommentsAddTipBadcode = 'Code erroné. essayer à nouveau.'; CommentsAddTipFilter = 'Texte de votre commentaire viole les règles sur notre site. Se il vous plaît changer.'; CommentsLikeLockTime = 0.2; CommentsAddLockTime = 0.3; CommentsAddDelay = 4000; CommentsPageName = 'avec-html-pour-creer-un-index-comment-cela-fonctionne'; CommentsPathPrefix = '/statistic/comments/'; CommentsUrl = 'http://wunderking.com/categorie/computer/avec-html-pour-creer-un-index-comment-cela-fonctionne.php'; $(document).ready(function(){ is_posted = $.cookies.get('article_comment_'+CommentsPageName); if(is_posted !== null){ $("#get_tip").html(CommentsAddTipHasBeen); $("#get_tip").addClass('tip_blue'); $('#get_tip').show(); document.getElementById('add_submit').disabled = false; CommentsAddLock = true; } if (CommentsHideFlag) { if (CommentsCount > CommentsHideVal && CommentsHideMode) $('#comments_more_wrap').show(); else $('#comments_more_wrap').hide(); CommentsHideFlag = false; } saved_logo = $.cookies.get('selected_logo_id'); if (CommentsLogoApply) { CommentsLogoApply = false; if (saved_logo !== null) CommentsLogoIndex = saved_logo; $('#get_logo img:eq(' + CommentsLogoIndex + ')').addClass('selected'); } $('#get_logo img').click(function(){ $('#get_logo img').removeClass('selected'); $(this).addClass('selected'); CommentsLogoIndex = $("#get_logo img").index(this); $.cookies.set('selected_logo_id', CommentsLogoIndex, {hoursToLive: CommentsLogoSaveTime}); }); }); function MoreComments() { $('.comment_hide').slideToggle('slow'); $('.comment_item, .comments_sep').removeClass('comment_hide'); $('#comments_more_wrap').hide(); } function ToggleComments(elements, is_blur) { if (is_blur === undefined) is_blur = false; if (is_blur) $(elements).slideUp(); else $(elements).slideToggle('normal'); if (CommentStatus) $(".comments_header").css("border-bottom", "0px"); else $(".comments_header").css("border-bottom", "1px solid rgb(205, 205, 205)"); if (CommentStatus) CommentStatus = false; else CommentStatus = true; } function GetReply(index) { var author_name = $(".comment_" + index + "_author").text(); var prev_text = $("#get_text").text(); $("#get_text").focus(); $("#get_text").insert(author_name); $('html, body').animate({ scrollTop: $('#get_author').offset().top }, 1000); } function LikesInc(index) { comment_cookie_name = CommentsPageName + 'comment' + index; is_liked = $.cookies.get(comment_cookie_name); get_last_id = $.cookies.get('article_comment_'+CommentsPageName); if(is_liked == null && ((get_last_id !== null && parseInt(get_last_id, 10) !== parseInt(index, 10)) || get_last_id == null)){ $.post( "/tools/comment_like.php", {page: CommentsPageName, prefix: CommentsPathPrefix, id: index, mode: 'likes'}, function(data){ $("#comment_" + index + "_g_likes").html(data); $.cookies.set(comment_cookie_name, 123, {hoursToLive: CommentsLikeLockTime}); } ); } } function DislikesInc(index) { comment_cookie_name = CommentsPageName + 'comment' + index; is_liked = $.cookies.get(comment_cookie_name); get_last_id = $.cookies.get('article_comment_'+CommentsPageName); if(is_liked == null && ((get_last_id !== null && parseInt(get_last_id, 10) !== parseInt(index, 10)) || get_last_id == null)){ $.post( "/tools/comment_like.php", {page: CommentsPageName, prefix: CommentsPathPrefix, id: index, mode: 'dislikes'}, function(data){ $("#comment_" + index + "_g_dislikes").html(data); $.cookies.set(comment_cookie_name, 123, {hoursToLive: CommentsLikeLockTime}); } ); } } function LikeInc(index) { comment_cookie_name = CommentsPageName + 'comment' + index; is_liked = $.cookies.get(comment_cookie_name); get_last_id = $.cookies.get('article_comment_'+CommentsPageName); if(is_liked == null && ((get_last_id !== null && parseInt(get_last_id, 10) !== parseInt(index, 10)) || get_last_id == null)){ $.post( "/tools/comment_like.php", {page: CommentsPageName, prefix: CommentsPathPrefix, id: index, mode: 'inc'}, function(data){ $("#comment_" + index + "_likes").html(data); $.cookies.set(comment_cookie_name, 123, {hoursToLive: CommentsLikeLockTime}); } ); } } function LikeDec(index) { comment_cookie_name = CommentsPageName + 'comment' + index; is_liked = $.cookies.get(comment_cookie_name); get_last_id = $.cookies.get('article_comment_'+CommentsPageName); if(is_liked == null && ((get_last_id !== null && parseInt(get_last_id, 10) !== parseInt(index, 10)) || get_last_id == null)){ $.post( "/tools/comment_like.php", {page: CommentsPageName, prefix: CommentsPathPrefix, id: index, mode: 'dec'}, function(data){ $("#comment_" + index + "_likes").html(data); $.cookies.set(comment_cookie_name, 123, {hoursToLive: CommentsLikeLockTime}); } ); } } function RefreshCode() { $("#cap_source").attr("src","/tools/comment_captcha.php?nocash="+Math.random()); } function CheckFields() { var Cond = true; if (document.getElementById('get_author').value=='') Cond = false; else if (document.getElementById('get_text').value=='') Cond = false; return Cond; } function HideTip() { if (!CommentsAddDone) { $('#get_tip').hide(); } } function LightFields() { if (document.getElementById('get_author').value=='') { $("#get_author").addClass('tip_spot'); setTimeout(function(){ $("#get_author").removeClass('tip_spot'); },2000); } if (document.getElementById('get_text').value=='') { $("#get_text").addClass('tip_spot'); setTimeout(function(){ $("#get_text").removeClass('tip_spot'); },2000); } $("#get_tip").html(CommentsAddTipUnfilled); $("#get_tip").removeClass('tip_blue'); $("#get_tip").addClass('tip_red'); $('#get_tip').show(); setTimeout(function(){ HideTip(); },4000); } function AddComment() { if (CommentsAddLock) return false; if (CheckFields()) { SendComment(); } else LightFields(); } function SendComment() { $(document).ready(function(){ is_posted = $.cookies.get('article_comment_'+CommentsPageName); if(is_posted == null){ document.getElementById('add_submit').disabled = true; $.post( "/tools/comment_filter.php", {author: $("#get_author").val(), text: $("#get_text").val()}, function(data){ if (data == 'true') { $.post( "/tools/comment_check.php", {code: $("#get_code").val()}, function(data){ if (data == 'true') { CommentsAddDone = true; var GLogo = $('#get_logo img'); if (GLogo.length > 0) { GLogo = $('#get_logo img:eq(' + CommentsLogoIndex + ')').attr("src") } else GLogo = '/images/comment_logo.png'; $.post( "/tools/comment_write.php", {comment_author: $("#get_author").val(), comment_text: $("#get_text").val(), comment_logo: GLogo, page: CommentsPageName, prefix: CommentsPathPrefix, url: CommentsUrl}, function(data){ $("#get_tip").html(CommentsAddTipDone); $("#get_tip").removeClass('tip_blue'); $("#get_tip").removeClass('tip_red'); $("#get_tip").addClass('tip_green'); $('#get_tip').show(); $.cookies.set('article_comment_'+CommentsPageName, data, {hoursToLive: CommentsAddLockTime}); $("#add_submit").unbind(); setTimeout(function() {location.reload();}, CommentsAddDelay); $("#get_author").val(''); $("#get_text").val(''); $("#get_code").val(''); } ) } else if (data == 'false') { document.getElementById('add_submit').disabled = false; $("#get_tip").html(CommentsAddTipBadcode); $("#get_tip").removeClass('tip_blue'); $("#get_tip").addClass('tip_red'); $('#get_tip').show(); $("#get_code").addClass('tip_spot'); setTimeout(function(){ $("#get_code").removeClass('tip_spot'); },2000); setTimeout(function(){ HideTip(); },4000); } } ) } else if (data == 'false_a_t' || data == 'false_a' || data == 'false_t') { document.getElementById('add_submit').disabled = false; $("#get_tip").html(CommentsAddTipFilter); $("#get_tip").removeClass('tip_blue'); $("#get_tip").addClass('tip_red'); $('#get_tip').show(); setTimeout(function(){ HideTip(); },12000); if (data == 'false_a_t' || data == 'false_a') $("#get_author").addClass('tip_spot'); if (data == 'false_a_t' || data == 'false_t') $("#get_text").addClass('tip_spot'); setTimeout(function(){ if (data == 'false_a_t' || data == 'false_a') $("#get_author").removeClass('tip_spot'); if (data == 'false_a_t' || data == 'false_t') $("#get_text").removeClass('tip_spot'); },5000); } } ) } }); } </script> </div> </div> <div class="sidebar"> <div id="contents_list" class="bordered" style="border-bottom:0px"> <h2 class="font_bold toggle-trigger">CONTENU</h2> <ul class="toggle-container block"> <li><a href="#Préparer-le-fichier-index.html">Préparer le fichier index.html</a></li> <li><a href="#Remplissez-le-fichier-avec-la-vie">Remplissez le fichier avec la vie</a></li> </ul> </div> <div id="sidebar_adsence_big" class="bordered" style="border-bottom: 0px"> <h2 class="font_bold toggle-trigger">ADSENCE</h2> <ul class="toggle-container block" style="margin-top: 25px"> <script type="text/javascript"> google_ad_client = "ca-pub-4665675800508568"; google_ad_slot = "5614635539"; google_ad_width = 160; google_ad_height = 600; </script> <!-- Wunderking 160x600 --> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </ul> </div> <div id="category_list" class="bordered"> <h2 class="font_bold toggle-trigger">CATÉGORIES</h2> <ul class="toggle-container block"> <li><a href="/categorie/auto">Auto</a></li> <li><a href="/categorie/beaute">Beauté</a></li> <li><a href="/categorie/computer">Computer</a></li> <li><a href="/categorie/education">Éducation</a></li> <li><a href="/categorie/famille">Famille</a></li> <li><a href="/categorie/miscellany">Miscellany</a></li> <li><a href="/categorie/nature">Nature</a></li> <li><a href="/categorie/nourriture">Nourriture</a></li> <li><a href="/categorie/recreation">Récréation</a></li> <li><a href="/categorie/sante">Santé</a></li> <li><a href="/categorie/sport">Sport</a></li> <li style="border-bottom:0px"><a href="/categorie/technology">Technology</a></li> </ul> </div> </div> </div> <div class="twitter-reader"> <div id="twitter-holder"> <div id="footer_search"> <script> (function() { var cx = '015828302691840625181:hbjenipyazs'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search> </div> </div> </div> </div> </div> <div id="footer"> <div class="degree"> <div class="wrapper"> <div id="social-bar"> <ul class="follow-us"> <li><span>SOCIAL</span></li> <div class="share42init"> <script type="text/javascript" src="/scripts/share42/share42.js"></script> </div> </ul> <span id="get_time"><script type="text/javascript">show_clock();</script></span> </div> <ul class="footer-cols"> <div id="copyright" class="font_bold">© 2015 Wunderking.com</div> </ul> </div> </div> </div> <div id="bottom"> </div> <style type="text/css"> .gotop_button { position: fixed; z-index: 1000; bottom: 20px; right: 20px; display: none; } .gotop_button a { display: block; width: 44px; height: 44px; opacity: 0.8; background: url('/images/backtotop2.png') no-repeat scroll center center transparent; text-indent: -9999px; transition: all 0.4s ease 0s; } .gotop_button a:hover { opacity: 1.0 } @media screen and (max-device-width: 800px), screen and (max-width: 800px) { .gotop_button a {display: none !important;} } </style> <div id="gotop_button" class="gotop_button"><a href="#" onfocus="this.blur()"></a></div><script type="text/javascript"> GotopDistance = 200; GotopBottomHide = false; $(window).scroll(function(){ var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop(); if($(window).scrollTop() > GotopDistance && (GotopBottomHide == false || (GotopBottomHide && scrollBottom > 150))){ $("#gotop_button").fadeIn(200); } else{ $("#gotop_button").fadeOut(200); } }); $('#gotop_button').click(function() { $('html, body').animate({ scrollTop:0 }, '800'); return false; }); </script> </body> </html>