CSS - groupe, class et id

FONTE ZOOM:
CSS est un langage que vous pouvez concevoir une page web assez. Vous pouvez donner à toutes les balises HTML dans les fonctionnalités que vous souhaitez. Pour ce faire en CSS intelligent, plusieurs possibilités existent. Dans cet article, un certain nombre de possibilités sont examinées à jouer avec CSS.

CSS ?? possibilités pour faire varier

CSS est un langage que vous pouvez concevoir une page web assez. Vous pouvez donner à toutes les balises HTML dans les fonctionnalités que vous souhaitez. Pour ce faire en CSS intelligent, plusieurs possibilités existent. Dans cet article, un certain nombre de possibilités sont examinées à jouer avec CSS.

Groupe

Il est possible de regrouper plusieurs sélecteurs dans une définition. Ainsi vous ne écrivez une fois pour la définition du style désiré.

Exemple:
H1, H2, H3 {
Font-weight: 600;
Font-size: 12px;
Font-family: arial
}

Des capacités supplémentaires sélecteurs

Il peut arriver que vous avez plusieurs types de besoins des paragraphes ?? s dans votre texte. Pensez citant quelqu'un où vous voulez faire que ce est un autre type de texte clairement que le reste. En utilisant seulement le sélecteur de P, vous donnez tous les paragraphes ?? s le même design. Mais la solution à ce problème réside dans la définition d'une classe.

Exemple


Citations </ TITLE> <br> <Style type = "text / css"> <br> P.citaat {font-size: 10px; font-style: italic;} <br> </ STYLE> <br> </ HEAD> <br> <BODY> <br> <P class = ?? citation ??> Je ai un rêve !! </ p> <br> </ BODY> <br> </ HTML> <br> <br> En raison de la paragraphe spécifique pour attribuer un nom, vous faites une distinction entre l'ordinaire et P P avec une citation. Dans la suite, vous pouvez si précisément par le paragraphe indiquer comment vous voulez voir la mise en page. <br> <br> Dans l'exemple, cela se fait en définissant d'abord P.citaat. Ensuite, vous définissez la conception du paragraphe. Ensuite, vous obtenez un paragraphe dans le texte du site sur lequel vous incluez un devis. A ce moment, vous commencez le paragraphe avec la balise <P>, puis ajoutez à cela les mots: class = ?? ?? citation. <br> <br> Vous pouvez attribuer tous les sélecteurs de classe. Dans votre feuille de style peut définir la classe et dans votre site, vous pouvez vous référer à cette classe. Mais vous pouvez faire votre feuille encore plus flexible par lui-même de style pour définir une classe. À ne importe quel sélecteur vous pouvez ensuite affecter la classe. Dans l'exemple ci-dessous vous pouvez voir ce qui est prévu. <br> <br> Exemple <br> <Style type = "text / css"> <br> .citaat {font-size: 10px; font-style: italic;} <br> </ STYLE> <br> <br> Dans votre code HTML, vous pouvez maintenant assigner ne importe quelle balise souhaité la citation de classe Cela se fait par exemple sur l'étiquette de table <td> le mot de class = ?? citation ?? ajouter. Dans une autre pièce, vous pouvez attribuer à nouveau la classe à une autre balise. La flexibilité et les capacités de CSS sont donc infinies. <br> <br> <h2><a id="Carte-d'identité">Carte d'identité</a></h2> Au lieu de définir une classe, vous pouvez également définir un identifiant. Inconvénient d'un Id est que vous ne fois par page un Id pouvez appeler comme sélecteur. Cependant, vous pouvez utiliser une classe sans fin. <br> <br> Exemple: <br> # 123 {font-weight: bold} <br> <br> <P id = ?? 123 ??> Texte épaisse imprimée </ p> <br> <br> <h2><a id="Remarques-de-vous-même">Remarques de vous-même</a></h2> Si vous travaillez sur la création d'une feuille de style idéal pour votre site, il peut être utile de prendre des notes en par vous-même. Si vous allez faire des changements plus tard, ces notes vous aident à voir ce que vous vouliez à l'origine avec une feuille de style. <br> <br> En CSS vous donnez à nouveau la note entre / * et * / vous pour poster des commentaires. <br> </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 = "css-groupe-class-et-id"; 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/css-groupe-class-et-id.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/css-groupe-class-et-id.php" title="CSS - groupe, class et id">CSS - groupe, class et id</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/css-groupe-class-et-id.php]CSS - groupe, class et id[/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="#">css</a>, <a href="#">groupement</a>, <a href="#">sélecteurs</a>, <a href="#">classe</a>, <a href="#">la notation</a>, <a href="#">site formatage</a>, <a href="#">des tutoriels</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/google-wave-une-nouvelle-vague.php" title="Google Wave, une nouvelle vague?"><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/google-wave-une-nouvelle-vague.php">Google Wave, une nouvelle vague?</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/ouvrez-le-fichier-kml-comment-cela-fonctionne.php" title="Ouvrez le fichier KML - 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/ouvrez-le-fichier-kml-comment-cela-fonctionne.php">Ouvrez le fichier KML - comment cela fonctionne:</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/enregistrez-des-chansons-sur-votre-pc-il-est-possible-de.php" title="Enregistrez des chansons - sur votre PC, il est possible de"><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/enregistrez-des-chansons-sur-votre-pc-il-est-possible-de.php">Enregistrez des chansons - sur votre PC, il est possible de</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 = 'css-groupe-class-et-id'; CommentsPathPrefix = '/statistic/comments/'; CommentsUrl = 'http://wunderking.com/categorie/computer/css-groupe-class-et-id.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="#CSS-??-possibilités-pour-faire-varier">CSS ?? possibilités pour faire varier</a></li> <li><a href="#Groupe">Groupe</a></li> <li><a href="#Des-capacités-supplémentaires-sélecteurs">Des capacités supplémentaires sélecteurs</a></li> <li><a href="#Carte-d'identité">Carte d'identité</a></li> <li><a href="#Remarques-de-vous-même">Remarques de vous-même</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>