Accueil
Créer un forumPage HTML trop longue pour être hébergée
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Page HTML trop longue pour être hébergée
par Chouchounette Mer 24 Jan 2018 - 10:28
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis toujours
Lien du forum : http://sevenreload.forumactif.com/
Description du problème
Bonjour et merci à qui voudra bien se pencher sur mon problème
A la recherche d'un bottin original pour mon forum j'ai donc trouvé un modèle en LS sur Tumblr. Et le résultat est parfaitement ce que je souhaite et fonctionne nickel sur FA sauf que je rencontre deux petits soucis.
Voici la page où se situe le problème :
http://sevenreload.forumactif.com/t6-codages-en-vrac-et-a-bidouiller
Cette page contient évidemment du Js, du css et du HTML.
Cette page est aussi destinée à s'allonger en fonction des membres qui nous rejoindront une fois le forum lancé.
Or, rien qu'avec les personnages déjà joués, elle est trop longue/lourde et je dépasse la limite autorisée.
Ma question est donc celle-ci : y a-t-il un moyen de séparer les trois parties : js, css et html pour pallier à cela et me permettre d'avoir plus de marge quant à la longueur ?
( ou existerait-il un hébergeur externe genre Archivehost ou Google Drive qui me permettrait de créer ma page sans être bloquée par sa longueur ? )
Ensuite, comme montré sur le screen, le bottin possède un fond de couleur sombre mais j'ai beau chercher je n'arrive pas à en limiter la taille ce qui fait que cela élargit mon forum sur ce sujet précis. Ce n'est pas foncièrement dérangeant car c'est un sujet destiné à la lecture et que cela n'influe pas sur le reste de mon architecture mais bon... J'aimerais quand même résoudre ce souci et comprendre d'où cela vient.
Je précise enfin que j'aurais volontiers demandé l'aide du créateur mais celui-ci ayant clôturé son Tumblr tout en laissant ses codes en LS... Et je l'admets humblement si je peux me débrouiller avec certains codes je ne suis pas non plus une experte et je serais infiniment reconnaissante à qui parmi notre communauté pourra et voudra bien m'apporter son aide.
L'accès à mon forum est laissé libre et si jamais vous aviez besoin que je vous communique le code intégral ( très très long) je me tiens à votre disposition.
Merci d'avance
Chouchounette- Nouveau membre
-
Messages : 11
Inscrit(e) le : 01/12/2014 -
Re: Page HTML trop longue pour être hébergée
par Scoubifitz Mer 24 Jan 2018 - 18:09
Bonsoir,
Concernant la longueur de votre code , on peut le réduire en ôtant tous les espaces inutiles qui se rajoutent à chaque édition de votre page HTML.
Prenez l'habitude d'éditer en mode HTML avancé quand vous modifiez votre page .
On évite ainsi les espaces supplémentaires et la disparition de la structure HTML (doctype , balises html , et balises body)
Je recolle ici votre code nettoyé , on passe de 127 700 caractères à 40 200 :
Concernant la longueur de votre code , on peut le réduire en ôtant tous les espaces inutiles qui se rajoutent à chaque édition de votre page HTML.
Prenez l'habitude d'éditer en mode HTML avancé quand vous modifiez votre page .
On évite ainsi les espaces supplémentaires et la disparition de la structure HTML (doctype , balises html , et balises body)
Je recolle ici votre code nettoyé , on passe de 127 700 caractères à 40 200 :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- macfustythemes -->
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/01wstkc/Bvdnq7h99/jquery.fullpage.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"/>
<!-- HTML5 Shiv -->
<!-- [if lt IE 9]>
<script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
<![endif] -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function viewTab(listitem) {
var showtab = $(listitem).attr("id");
$("ul#nav li.active").removeClass("active");
$(listitem).addClass("active");
$("#content .show").removeClass("show");
$("#content #" + showtab).addClass("show");
}
$(document).ready(function() {
$("#content #tab1").addClass("show");
$("ul#nav li#tab1").addClass("active");
$("ul#nav li").click(function () {
viewTab(this);
});
$("#filter input").change(function() {
$("ul#nav li").removeClass("hidden visible");
var showItems = $("ul#nav li");
$("#filter input").filter(":checked").each(function() {
var filt = $(this).attr("data-filter");
if(filt != undefined) {
showItems = $(showItems).filter("." + filt);
}
});
$(showItems).addClass("visible");
$("ul#nav li").not(".visible").addClass("hidden");
viewTab($(".visible").first());
});
});
</script>
<style>
body {
width:60%;
height:600px! important;
background-repeat: repeat;
margin: 0;
font-size: 11px;
font-family: 'Calibri', sans-serif;
background-color: #1b1716;
color: #121010;
}
a {
color: #9ab2ba;
font-size: 12px;
font-weight: bold;
text-decoration: none;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a:hover {
text-decoration: underline;
}
#main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 600px;
height: 540px;
}
#container {
margin-left: 180px;
position: fixed;
width: 550px;
height: 500px;
background-color: rgba(250,250,250,0.7);
padding: 10px;
}
ul#nav {
position: fixed;
overflow: auto;
margin-top: 80px;
padding: 20px 0 0 30px;
width: 240px;
height: 300px;
}
ul#nav li {
list-style-type: none;
float: left;
height: 50px;
width: 50px;
margin: 0 10px 10px 0;
opacity: 0.6;
cursor: pointer;
}
ul#nav li img {
width: 100%;
height: 100%;
}
ul#nav li.active {
opacity: 1;
}
ul#nav li.hidden {
display: none;
}
ul#nav::-webkit-scrollbar-track
{
background-color: #d1d6dc;
}
ul#nav::-webkit-scrollbar
{
width: 3px;
}
ul#nav::-webkit-scrollbar-thumb
{
background-color: #d1d6dc;
}
#content {
margin-left: 280px;
position: fixed;
width: 280px;
height: 500px;
background-color: rgba(250,250,250,0.7);
}
.tab {
position: fixed;
width: 240px;
height: 460px;
padding: 10px;
overflow-y: auto;
overflow-x: hidden;
text-align: justify;
display: none;
}
.show {
display: block;
}
img.main {
margin: -20px 0 0 -20px;
width: 280px;
height: 500px;
}
.tab::-webkit-scrollbar-track
{
background-color: #d1d6dc;
}
.tab::-webkit-scrollbar
{
width: 7px;
}
.tab::-webkit-scrollbar-thumb
{
background-color: #d1d6dc;
}
h2, h3 {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 3px;
text-align: center;
margin: 50px 0;
}
h3 {
margin: 35px 0;
font-size: 14px;
text-align: left;
}
.quote {
position: relative;
text-transform: uppercase;
margin: 50px 0 40px 60px;
width: 180px;
}
.quote::before {
content: '“';
font-family: 'Times New Roman', sans-serif;
font-size: 150px;
color: #9ab2ba;
position: absolute;
top: -50px;
left: -70px;
}
.links {
font-family: 'Roboto', sans-serif;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
}
#filter {
position: fixed;
width: 130px;
height: 480px;
padding: 20px;
background-color: rgba(250,250,250,0.7);
overflow: auto;
}
#filter::-webkit-scrollbar-track
{
background-color: #d1d6dc;
}
#filter::-webkit-scrollbar
{
width: 5px;
}
#filter::-webkit-scrollbar-thumb
{
background-color: #d1d6dc;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 3px;
margin: 25px 0;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 20px;
margin-right: 8px;
font-size: 13px;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 4px;
background-color: #f7f7f7;
}
input[type=radio]:checked + label:before {
content: "X";
color: #1e1e1e;
font-size: 8px;
text-align: center;
line-height: 10px;
}
#credit {
font-family: 'Roboto', sans-serif;
font-size: 9px;
position: absolute;
right: 0;
bottom: -20px;
}
#credit a {
color: #d1d6dc;
}
</style>
</head>
<body>
<div id="main">
<div id="filter">
<!-- This is the filter section of the code to the left of the screen. You can add as many categories as you like and change the names however you would like. Just remember that 'input id=" "' should equal 'label for=" "' on the next line down. Make sure the name you choose for the "data-filter" label is just one word, as this is how the filters work. -->
<h4>
Disponibilité </h4>
<p>
<input id="anycategory1" type="radio" name="category1" checked=""/><label for="anycategory1">Tous</label>
</p>
<p>
<input id="option1" type="radio" name="category1" data-filter="one"/><label for="option1">Libre</label>
</p>
<p>
<input id="option2" type="radio" name="category1" data-filter="two"/><label for="option2">Réservé</label>
</p>
<p>
<input id="option3" type="radio" name="category1" data-filter="three"/><label for="option3">Pris</label>
</p>
<h4>
Groupes </h4>
<p>
<input id="anycategory2" type="radio" name="category2" checked=""/><label for="anycategory2">Tous</label>
</p>
<p>
<input id="optiona" type="radio" name="category2" data-filter="a"/><label for="optiona">Les Elus</label>
</p>
<p>
<input id="optionb" type="radio" name="category2" data-filter="b"/><label for="optionb">Les Exorcistes</label>
</p>
<p>
<input id="optionc" type="radio" name="category2" data-filter="c"/><label for="optionc">Le Nouvel Ordre</label>
</p>
<p>
<input id="optiond" type="radio" name="category2" data-filter="d"/><label for="optiond">La Résistance</label>
</p>
<p>
<input id="optione" type="radio" name="category2" data-filter="e"/><label for="optione">La Plèbe</label>
</p>
<p>
<input id="optionf" type="radio" name="category2" data-filter="f"/><label for="optionf">Les Esclaves</label>
</p>
<h4>
Lieu de Résidence </h4>
<p>
<input id="anycategory3" type="radio" name="category3" checked=""/><label for="anycategory3">Tous</label>
</p>
<p>
<input id="optionpim" type="radio" name="category3" data-filter="pim"/><label for="optionpim">Londres</label>
</p>
<p>
<input id="optionpam" type="radio" name="category3" data-filter="pam"/><label for="optionpam">Paris</label>
</p>
<p>
<input id="optionpoum" type="radio" name="category3" data-filter="poum"/><label for="optionpoum">Rome</label>
</p>
</div>
<div id="container">
<ul id="nav">
<!-- This is the icons list in the middle of the screen. Make sure you have said 'id=" "' to the tab you would like to display when clicking on this icon. For example, clicking on the first icon below will display Tab 1.
Secondly, check the 'class=" "' label. These should correspond with the "data-filter" labels above. When a checkbox is selected, only icons which have a class matching that data-filter label will be shown. For example, if you select the checkbox with the data-filter label "one" above, only icons with the class "one" will be shown. You can have as many classes as you need, and as many icons as you need. -->
<li id="tab1" class="one e pam">
<img src="https://www.pixenli.com/image/k-WaRuGq"/>
</li>
<li id="tab2" class="three a pam">
<img src="https://www.pixenli.com/image/3GtoFkwF"/>
</li>
<li id="tab3" class="one e poum">
<img src="https://www.pixenli.com/image/LBfa2arn"/>
</li>
<li id="tab4" class="three c pim">
<img src="https://www.pixenli.com/image/XT-onZFD"/>
</li>
<li id="tab5" class="one e poum">
<img src="https://www.pixenli.com/image/GJ2HoWHR"/>
</li>
<li id="tab6" class="one c pim">
<img src="https://www.pixenli.com/image/SfLi94f8"/>
</li>
<li id="tab7" class="three b pim">
<img src="https://www.pixenli.com/image/-b-X0wRK"/>
</li>
<li id="tab8" class="one c pam">
<img src="https://www.pixenli.com/image/kSSSNbhw"/>
</li>
<li id="tab9" class="three poum">
<img src="https://www.pixenli.com/image/eQGe1M0c"/>
</li>
<li id="tab10" class="one c pim">
<img src="https://www.pixenli.com/image/7gnEYmYN"/>
</li>
<li id="tab61" class="three d poum">
<img src="https://www.pixenli.com/image/YTaX4iIy"/>
</li>
<li id="tab58" class="three b pam">
<img src="https://www.pixenli.com/image/eP_B44uK"/>
</li>
<li id="tab11" class="one c pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/cooper10.jpg"/>
</li>
<li id="tab12" class="one e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/cormac10.jpg"/>
</li>
<li id="tab13" class="one a pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/damien10.jpg"/>
</li>
<li id="tab14" class="one e pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/davidm10.jpg"/>
</li>
<li id="tab15" class="three b poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/devonm10.jpg"/>
</li>
<li id="tab16" class="one f pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/donova10.jpg"/>
</li>
<li id="tab17" class="three c poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/edenmi10.jpg"/>
</li>
<li id="tab18" class="one c pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/elisam10.jpg"/>
</li>
<li id="tab19" class="one c pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/emmami10.jpg"/>
</li>
<li id="tab20" class="one a pim">
<img src="https://www.pixenli.com/image/9O7fOxTX"/>
</li>
<li id="tab21" class="three e pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/fergus11.jpg"/>
</li>
<li id="tab22" class="three f poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/gaelle11.jpg"/>
</li>
<li id="tab23" class="one d pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/gianni11.jpg"/>
</li>
<li id="tab24" class="three e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/jakemi11.jpg"/>
</li>
<li id="tab60" class="three e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/jamesm11.jpg"/>
</li>
<li id="tab62" class="one c pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/jerome11.jpg"/>
</li>
<li id="tab25" class="one e poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/jonath12.jpg"/>
</li>
<li id="tab26" class="one c pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/julian11.jpg"/>
</li>
<li id="tab27" class="one e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/lalami11.jpg"/>
</li>
<li id="tab28" class="one d poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/luccam11.jpg"/>
</li>
<li id="tab29" class="three a pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/lucymi11.jpg"/>
</li>
<li id="tab59" class="one d poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/marcmi11.jpg"/>
</li>
<li id="tab30" class="three d pam">
<img src="https://www.pixenli.com/image/S9VA3nrM"/>
</li>
<li id="tab31" class="one e pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/markus11.jpg"/>
</li>
<li id="tab32" class="one d pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/maxmin11.jpg"/>
</li>
<li id="tab33" class="one c pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/miamin11.jpg"/>
</li>
<li id="tab34" class="one d poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/milami11.jpg"/>
</li>
<li id="tab35" class="three e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/minami10.jpg"/>
</li>
<li id="tab36" class="one c pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/minnie10.jpg"/>
</li>
<li id="tab37" class="one e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/moiram10.jpg"/>
</li>
<li id="tab38" class="three e pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/nalami10.jpg"/>
</li>
<li id="tab39" class="one b pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/nathan10.jpg"/>
</li>
<li id="tab40" class="three b poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/neilmi10.jpg"/>
</li>
<li id="tab41" class="three a pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/ninami10.jpg"/>
</li>
<li id="tab42" class="one e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/nyxmin10.jpg"/>
</li>
<li id="tab43" class="three a poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/romeom10.jpg"/>
</li>
<li id="tab64" class="three f pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/romymi10.jpg"/>
</li>
<li id="tab44" class="three c pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/roxann10.jpg"/>
</li>
<li id="tab45" class="one c poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/ryanmi10.jpg"/>
</li>
<li id="tab46" class="three e poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/sallym10.jpg"/>
</li>
<li id="tab47" class="three e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/sarahm10.jpg"/>
</li>
<li id="tab48" class="one c poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/selene10.jpg"/>
</li>
<li id="tab49" class="three a pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/serena10.jpg"/>
</li>
<li id="tab50" class="one a pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/sethmi10.jpg"/>
</li>
<li id="tab51" class="one c poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/shelle10.jpg"/>
</li>
<li id="tab52" class="three e pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/shiloh10.jpg"/>
</li>
<li id="tab53" class="one e poum">
<img src="https://www.pixenli.com/image/VcDehhkP"/>
</li>
<li id="tab54" class="one d pim">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/taylor10.jpg"/>
</li>
<li id="tab55" class="three d poum">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/toscam10.jpg"/>
</li>
<li id="tab56" class="two a pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/vincen10.jpg"/>
</li>
<li id="tab57" class="one d pam">
<img src="https://i62.servimg.com/u/f62/18/63/96/02/willia10.jpg"/>
</li>
<li id="tab99" class="three b">
<img src="https://placehold.it/80x80"/>
</li>
<li id="tab100" class="three b">
<img src="https://placehold.it/80x80"/>
</li>
</ul>
<div id="content">
<!-- These are the main content tabs to the right of the screen. When an icon is selected, the corresponding tab will be shown according to the 'id=" "' label. -->
<div id="tab1" class="tab">
<img class="main" src="https://www.pixenli.com/image/ax9Q38Kl"/>
<h2>
Adam Bettancourt <em>feat. Tom Hiddleston </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab2" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503393026012398700.jpg"/>
<h2>
Adrien de Habsbourg <em>feat. Jonathan Rhys Meyers </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab3" class="tab">
<img class="main" src="https://www.pixenli.com/image/mZftJSsc"/>
<h2>
Amanda Visconti <em>feat. Jennifer Lawrence </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab4" class="tab">
<img class="main" src="https://www.pixenli.com/image/PxHq7jah"/>
<h2>
Angélique Daubigney <em>feat. Alicia Vikander </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab5" class="tab">
<img class="main" src="https://www.pixenli.com/image/6rs18oqc"/>
<h2>
Anissa Ghisolfini <em>feat. Emma Stone </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab6" class="tab">
<img class="main" src="https://www.pixenli.com/image/xmb9-RWR"/>
<h2>
Anthony Waldorf Godfrey <em>feat. Harry Treadaway </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab7" class="tab">
<img class="main" src="https://www.pixenli.com/image/alOT8mRI"/>
<h2>
Astrid Granger <em>feat. Taylor Swift </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab8" class="tab">
<img class="main" src="https://www.pixenli.com/image/olcT6b7Y"/>
<h2>
Benjamin Flamel <em>feat. Benedict Cumberbatch </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab9" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503524357067018000.jpg"/>
<h2>
Charlize Londubat <em>feat. Margot Robbie </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab10" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503396704045862400.jpg"/>
<h2>
Christopher Baker <em>feat. Matt Lanter </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab61" class="tab">
<img class="main" src="https://www.pixenli.com/image/iBKr308w"/>
<h2>
Clementina Di Santis <em>feat. Alannah Walton</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab58" class="tab">
<img class="main" src="https://www.pixenli.com/image/b8TfwS8j"/>
<h2>
Chloé Weasley <em>feat. Riley Rasmussen </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab11" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503396725062830000.jpg"/>
<h2>
Cooper Mac Carthy <em>feat. Max Riemelt </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab12" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503396745097664100.jpg"/>
<h2>
Cormac Moffat <em>feat. Viggo Mortensen </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab13" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503398919064294900.jpg"/>
<h2>
Damien Mayfair <em>feat. Matt Bomer </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab14" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503398942013410100.jpg"/>
<h2>
David Thorne <em>feat. Cheyenne Jackson </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab15" class="tab">
<img class="main" src="https://www.pixenli.com/image/U187f_wy"/>
<h2>
Devon <em>feat. Sara Sampaio</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab16" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503398982088711900.jpg"/>
<h2>
Donovan Thorne <em>feat. Lucky Blue Smith</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab17" class="tab">
<img class="main" src="https://www.pixenli.com/image/t31Lhlhw"/>
<h2>
Eden Corrigan <em>feat. Taylor Marie Hill </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab18" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503399175072697500.jpg"/>
<h2>
Elise Bettancourt <em>feat. Amanda Seyfried </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab19" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503399208002255900.jpg"/>
<h2>
Emma Weasley Flamel <em>feat. Sophie turner </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab20" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503399227015349700.jpg"/>
<h2>
Ethan Waldorf <em>feat. Jon Kortajarena </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab21" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503401226076416200.jpg"/>
<h2>
Fergus Moffat <em>feat. James Franco </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab22" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503401246087955500.jpg"/>
<h2>
Gaëlle de Habsbourg / Romy Mayfair <em>feat. Rosie Tupper </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab23" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503401267054488500.jpg"/>
<h2>
Gianni Genovese <em>feat. Raphaël Personnaz</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab24" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503401295022087100.jpg"/>
<h2>
Jake Sarkander <em>feat. Hugh Dancy </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab60" class="tab">
<img class="main" src="https://www.pixenli.com/image/2utohRvB"/>
<h2>
James <em>feat. Liev Schreiber </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab62" class="tab">
<img class="main" src="https://www.pixenli.com/image/DwBDPOQm"/>
<h2>
Jérôme Weasley <em>feat. Jack Falahee</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab25" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503404184042232400.jpg"/>
<h2>
Jonathan Heddren <em>feat. Reeve Carney </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab26" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503404209026900400.jpg"/>
<h2>
Julian Moriarty <em>feat. Francisco Lachowski </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab27" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503404235070722200.jpg"/>
<h2>
Lala Mélanie Crestwood <em>feat. Alexandra Daddario</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab28" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503404266048550600.jpg"/>
<h2>
Luca De Santis <em>feat. Alex Pettyfer </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab29" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503406490008845700.jpg"/>
<h2>
Lucy Black <em>feat. Barbara Palvin</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab59" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503786292037084000.jpg"/>
<h2>
Marc Visconti <em>feat. Eddie Redmayne</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab30" class="tab">
<img class="main" src="https://www.pixenli.com/image/YhN_t6-P"/>
<h2>
Marion <em>feat. Lily Collins</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab31" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503406537085247900.jpg"/>
<h2>
Markus <em>feat. Charlie Hunnam</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab32" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503406574000251200.jpg"/>
<h2>
Maxime Rey Weber <em>feat. Ryan Gosling</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab33" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503406712072443500.jpg"/>
<h2>
Mia Rookwood <em>feat. Meika Woollard </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab34" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503406730037846300.jpg"/>
<h2>
Mila <em>feat. Cintia Dicker</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab35" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503406755042769100.jpg"/>
<h2>
Mina O'Connor <em>feat. Freya Mavor </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab36" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503406773088260400.jpg"/>
<h2>
Minnie Godfrey <em>feat. Elle Fanning</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab37" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503408787000334000.jpg"/>
<h2>
Moïra Moffat <em>feat. Marisa Tomei</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab38" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503408805007189100.jpg"/>
<h2>
Nala <em>feat. Marie Avgeropoulos</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab39" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503408822080847400.jpg"/>
<h2>
Nathaniel O'connelly <em>feat. Garrett Hedlund</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab40" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503408849062069000.jpg"/>
<h2>
Neil Corrigan <em>feat. Sean O'Pry </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab41" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503409000031764500.jpg"/>
<h2>
Nina Mayfair <em>feat. Ginta Lapina</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab42" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503409019011948300.jpg"/>
<h2>
Nyx Fitz <em>feat. Diane Lane</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab43" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503409038014395500.jpg"/>
<h2>
Roméo Rookwood <em>feat. Jon Kortajarena</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab64" class="tab">
<img class="main" src="https://www.pixenli.com/image/WuC8h93p"/>
<h2>
Romy Mayfair <em>feat. Rosie Tupper</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab44" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503409070057962700.jpg"/>
<h2>
Roxanne Granger <em>feat. Cate Blanchett </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab45" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503410400098127200.jpg"/>
<h2>
Ryan Lannister <em>feat. Bill Skarsgard</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab46" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503410420030902100.jpg"/>
<h2>
Sally Tates <em>feat. Christina Ricci</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab47" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503410439039169400.jpg"/>
<h2>
Sarah Middleton <em>feat. Abbey Lee Kershaw</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab48" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503410463090642100.jpg"/>
<h2>
Selene Moriarty <em>feat. Elsa Hosk</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab49" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503410616088322400.jpg"/>
<h2>
Serena Mc Allister <em>feat. Lily Rose Depp</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab50" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503410636087349800.jpg"/>
<h2>
Seth O'Connelly <em>feat. Gaspard Ulliel </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab51" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503410655096064500.jpg"/>
<h2>
Shelley Gallagher <em>feat. Scarlett Johansson</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab52" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503410673047694500.jpg"/>
<h2>
Shiloh Romy Wenkis <em>feat. Sasha Kichigina</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab53" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503412121045623100.jpg"/>
<h2>
Stefano Renzi <em>feat. Cam Gigandet</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab54" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503412216012608400.jpg"/>
<h2>
Taylor Evans <em>feat. Mila Kunis</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab55" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503412245059055600.jpg"/>
<h2>
Tosca L. Gotti <em>feat. Keira Knightley</em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab56" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503412272001480900.jpg"/>
<h2>
Vincent Thorne <em>feat. Neels Visser </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
<div id="tab57" class="tab">
<img class="main" src="https://www.pixenli.com/images/1503/1503412292063539900.jpg"/>
<h2>
William Rookwood <em>feat. Jared Leto </em>
</h2>
<div class="links">
<a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a>
</div>
<div class="quote">
Include a quote here! This can be as long or as short as you like.
</div>
</div>
</div>
<div id="tab99" class="tab">
<img class="main" src="https://placehold.it/420x500?text=Tab+61"/>
<h2>
tab 60. </h2>
</div>
</div>
</div>
<div id="credit">
<a href="http://macfustythemes.tumblr.com/">macfustythemes</a>
</div>
</body>
</html>
Scoubifitz- Membre actif
-
Messages : 3687
Inscrit(e) le : 18/03/2008 -
Re: Page HTML trop longue pour être hébergée
par Chouchounette Mer 24 Jan 2018 - 21:35
Bonsoir et merci infiniment pour votre réponse rapide et qui plus est aussi instructive qu'utile. Et merci pour le temps que vous avez bien voulu passer à nettoyer mon code !
Ne connaissant vraiment que les bases du codage j'avoue ne pas toujours penser aux solutions les plus simples. En tous cas encore une fois merci et je penserai donc désormais à éditer en mode avancé.
Je peux donc dire que la première partie de mon problème est résolue. Il ne me reste plus que ce problème de fond immense apparaissant sur mon screen. Celui-ci me semble infini et du coup lorsque je veux utiliser ma page via une iframe celle-ci doit impérativement avoir au moins une largeur de 900 ou même 1000px sinon les ascenseurs apparaissent. Ce n'est pas le plus gênant qui soit mais si vous ou une autre âme charitable pouvait m'en expliquer la raison afin que je puisse le réduire je serais alors comblée.
En tous cas merci bien Scoubifitz !
Ne connaissant vraiment que les bases du codage j'avoue ne pas toujours penser aux solutions les plus simples. En tous cas encore une fois merci et je penserai donc désormais à éditer en mode avancé.
Je peux donc dire que la première partie de mon problème est résolue. Il ne me reste plus que ce problème de fond immense apparaissant sur mon screen. Celui-ci me semble infini et du coup lorsque je veux utiliser ma page via une iframe celle-ci doit impérativement avoir au moins une largeur de 900 ou même 1000px sinon les ascenseurs apparaissent. Ce n'est pas le plus gênant qui soit mais si vous ou une autre âme charitable pouvait m'en expliquer la raison afin que je puisse le réduire je serais alors comblée.
En tous cas merci bien Scoubifitz !
Chouchounette- Nouveau membre
-
Messages : 11
Inscrit(e) le : 01/12/2014 -
Re: Page HTML trop longue pour être hébergée
par Scoubifitz Jeu 25 Jan 2018 - 7:16
Bonjour,
Sans trop rentrer dans les détails , le fait de donner une largeur au body de 60% ,
de mettre les cadres en position absolue qui dépasseront forcément le body ,
et de compenser par une largeur excessive de l'iframe , la déformation du forum reste inévitable .
On va donc modifier un peu le style de la page html . Remplacer toute la partie <style></style> par ceci :
... et on change les valeurs de l'iframe :
Votre forum devrait retrouver une taille de guêpe !^^
Sans trop rentrer dans les détails , le fait de donner une largeur au body de 60% ,
de mettre les cadres en position absolue qui dépasseront forcément le body ,
et de compenser par une largeur excessive de l'iframe , la déformation du forum reste inévitable .
On va donc modifier un peu le style de la page html . Remplacer toute la partie <style></style> par ceci :
- Code:
<style>
body {
font-size: 11px;
font-family: 'Calibri', sans-serif;
background-color: #1b1716;
color: #121010;
}
a {
color: #9ab2ba;
font-size: 12px;
font-weight: bold;
text-decoration: none;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a:hover {
text-decoration: underline;
}
#main {
margin: auto;
}
#container {
margin-left: 180px;
position: fixed;
width: 550px;
height: 500px;
background-color: rgba(250,250,250,0.7);
padding: 10px;
}
ul#nav {
position: fixed;
overflow: auto;
margin-top: 80px;
padding: 20px 0 0 30px;
width: 240px;
height: 300px;
}
ul#nav li {
list-style-type: none;
float: left;
height: 50px;
width: 50px;
margin: 0 10px 10px 0;
opacity: 0.6;
cursor: pointer;
}
ul#nav li img {
width: 100%;
height: 100%;
}
ul#nav li.active {
opacity: 1;
}
ul#nav li.hidden {
display: none;
}
ul#nav::-webkit-scrollbar-track
{
background-color: #d1d6dc;
}
ul#nav::-webkit-scrollbar
{
width: 3px;
}
ul#nav::-webkit-scrollbar-thumb
{
background-color: #d1d6dc;
}
#content {
margin-left: 280px;
position: fixed;
width: 280px;
height: 500px;
background-color: rgba(250,250,250,0.7);
}
.tab {
position: fixed;
width: 240px;
height: 460px;
padding: 10px 30px 10px 10px;
overflow-y: auto;
overflow-x: hidden;
text-align: justify;
display: none;
}
.show {
display: block;
}
img.main {
margin: -20px 0 0 -20px;
width: 280px;
height: 500px;
}
.tab::-webkit-scrollbar-track
{
background-color: #d1d6dc;
}
.tab::-webkit-scrollbar
{
width: 7px;
}
.tab::-webkit-scrollbar-thumb
{
background-color: #d1d6dc;
}
h2, h3 {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 3px;
text-align: center;
margin: 50px 0;
}
h3 {
margin: 35px 0;
font-size: 14px;
text-align: left;
}
.quote {
position: relative;
text-transform: uppercase;
margin: 50px 0 40px 60px;
width: 180px;
}
.quote::before {
content: '“';
font-family: 'Times New Roman', sans-serif;
font-size: 150px;
color: #9ab2ba;
position: absolute;
top: -50px;
left: -70px;
}
.links {
font-family: 'Roboto', sans-serif;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
}
#filter {
position: fixed;
width: 130px;
height: 480px;
padding: 20px;
background-color: rgba(250,250,250,0.7);
overflow: auto;
}
#filter::-webkit-scrollbar-track
{
background-color: #d1d6dc;
}
#filter::-webkit-scrollbar
{
width: 5px;
}
#filter::-webkit-scrollbar-thumb
{
background-color: #d1d6dc;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 3px;
margin: 25px 0;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 20px;
margin-right: 8px;
font-size: 13px;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 4px;
background-color: #f7f7f7;
}
input[type=radio]:checked + label:before {
content: "X";
color: #1e1e1e;
font-size: 8px;
text-align: center;
line-height: 10px;
}
#credit {
font-family: 'Roboto', sans-serif;
font-size: 9px;
position: absolute;
right: 0;
bottom: -20px;
}
#credit a {
color: #d1d6dc;
}
</style>
... et on change les valeurs de l'iframe :
- Code:
<iframe name="Masterlist" src="http://sevenreload.forumactif.com/h4-bottin-responsive" scrolling="no" width="765" height="540" frameborder="no"></iframe>
Votre forum devrait retrouver une taille de guêpe !^^
Scoubifitz- Membre actif
-
Messages : 3687
Inscrit(e) le : 18/03/2008 -
Re: Page HTML trop longue pour être hébergée
par Chouchounette Jeu 25 Jan 2018 - 10:05
Bonjour,
Encore une fois merci pour votre aide.
<i> et je pense commencer à comprendre d'où venait mon problème. J'aime apprendre de mes erreurs ! </i>
Du coup tout fonctionne parfaitement et je m'empresse de mettre ce sujet en résolu.
Merci encore Scoubifitz !
Chouchounette- Nouveau membre
-
Messages : 11
Inscrit(e) le : 01/12/2014 -
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum