Créer un site avec des cadres simples

FONTE ZOOM:
Dans votre site Web, vous pouvez travailler avec des tables et des cadres. Ce est un choix personnel et est souvent basée sur une de ses préférences. En utilisant des cadres de l'écran est divisé en plusieurs fenêtres. Si vous apportez un moyen simple de structurer votre site Web, qui sera également apprécié par les visiteurs de votre site web. Cet article a commencé avec la fabrication de cadres et explique comment obtenir un poste que vous avez fait la page dans le cadre de droite.

Les possibilités de cadres

Supposons que vous souhaitez utiliser quatre cadres que votre écran en quatre compartiments séparés. Chaque image est une profession distincte et indépendante peut avoir sa propre page web complète avec barre de défilement, fond, graphiques, liens, etc. Le contenu d'un cadre est entièrement gratuit et dans les mains du site Web du constructeur. Dans un cadre que vous pouvez placer une image dans un menu différent et un autre en vue le contenu de votre site. Les possibilités sont infinies.

CONSEIL: Assurez-vous que les différents cadres dans le style et la couleur correspondance.

La première page de votre site est toujours appelé "index.html". Les cadres font dans cette page d'index. Les pages dans les cadres devraient être placés vous à l'avance pour tout prêt. Distribuer ces pages ou le contenu de votre site, vous allez dans les différents cadres. La page d'index "index.html" alors venez seul avec les cadres et non le contenu de votre site web.

Dans un document HTML est le code source standard. Cela ressemble comme suit:


</ title> <br> </ Head> <br> <Body> <br> </ Body> <br> </ Html> </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 = "creer-un-site-avec-des-cadres-simples"; 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/creer-un-site-avec-des-cadres-simples.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/creer-un-site-avec-des-cadres-simples.php" title="Créer un site avec des cadres simples">Créer un site avec des cadres simples</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/creer-un-site-avec-des-cadres-simples.php]Créer un site avec des cadres simples[/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="#">cadres</a>, <a href="#">cadres</a>, <a href="#">site web</a>, <a href="#">html</a>, <a href="#">web</a>, <a href="#">fenêtres</a>, <a href="#">boîtes</a>, <a href="#">la structure</a>, <a href="#">le code source</a>, <a href="#">de cadres</a>, <a href="#">des lignes</a>, <a href="#">des cols</a>, <a href="#">les pixels</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/pour-raccourcir-une-url-twitter-comment-cela-fonctionne.php" title="Pour raccourcir une URL Twitter - 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/pour-raccourcir-une-url-twitter-comment-cela-fonctionne.php">Pour raccourcir une URL Twitter - comment cela fonctionne:</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/epson-stylus-sx210-nettoyer-les-buses-il-est-donc-possible.php" title="Epson Stylus SX210: Nettoyer les buses - il est donc possible"><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/epson-stylus-sx210-nettoyer-les-buses-il-est-donc-possible.php">Epson Stylus SX210: Nettoyer les buses - il est donc possible</a></h2> </div> <div class="cleaner"> </div> </li> <li> <div class="cover"><a href="http://wunderking.com/categorie/computer/supprimer-coffre-fort-gratuit-de-lespace-ccleaner.php" title="Supprimer coffre-fort gratuit de l'espace - CCleaner"><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/supprimer-coffre-fort-gratuit-de-lespace-ccleaner.php">Supprimer coffre-fort gratuit de l'espace - CCleaner</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 = 'creer-un-site-avec-des-cadres-simples'; CommentsPathPrefix = '/statistic/comments/'; CommentsUrl = 'http://wunderking.com/categorie/computer/creer-un-site-avec-des-cadres-simples.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="#Les-possibilités-de-cadres">Les possibilités de cadres</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>