Lun 18 Sep - 20:16
Ah bah tant mieux XD
Essayons alors !
Donc sur ton fofo, tu vas dans "Modules", "Gestion des pages HTML" et tu crées une nouvelle page HTML (ue, logique). Tu colles ce code dedans :
- Code:
<html lang="fr" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Galerie Ofty</title>
<style>.galerie_ofty{
width: 500px;
height: 800px;
}
.clear {
clear: both;
}
.galerie_ofty_image {
position: relative;
z-index: 2;
margin: 0;
}
.galerie_ofty:hover .galerie_ofty_image {
z-index: 1;
}
.contenu_galerie_ofty {
position: relative;
display: block;
width: 500px;
margin-top: -140%;
height: 700px;
z-index: 1;
font-family: Georgia;
font-size: 12px;
background: #822c62;
}
.paonglets {
float: left;
width: 115px;
margin: 160px 0 0 10px;
}
.paonglet {
padding: 10px;
cursor: pointer;
background-color: #4b2e3d;
color: #fff;
display: block;
text-transform: uppercase;
font-style: italic;
margin: 10px 0;
font-size: 10px;
}
.paonglet_0 {
border-right: 5px solid #c61341;
}
.paonglet_1 {
border-right: 5px solid #f17056;
}
.contenu_paonglet {
display: none;
height: 700px;
float: left;
width: 335px;
background: #fff;
overflow: auto;
color: #822c62;
text-transform: uppercase;
font-style: italic;
margin: auto;
text-align: center;
}
.contenu_paonglet img {
max-width: 318px;
}
.contenu_paonglet p {
padding: 10px;
text-align: justify;
}
</style></head>
<body>
<div class="galerie_ofty">
<img class="galerie_ofty_image" src="https://i.imgur.com/onalW0A.png" />
<div class="contenu_galerie_ofty" style="color: #66c937;">
<script type="text/javascript">
//<!--
function change_paonglet(name)
{
document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
document.getElementById('contenu_paonglet_'+name).style.display = 'block';
anc_paonglet = name;
}
//-->
</script>
<div class="paonglets">
<span class="paonglet_0 paonglet" id="paonglet_introduction" onclick="javascript:change_paonglet('introduction');">introduction</span>
<span class="paonglet_0 paonglet" id="paonglet_icons" onclick="javascript:change_paonglet('icons');">Icons</span>
<span class="paonglet_0 paonglet" id="paonglet_avatars" onclick="javascript:change_paonglet('avatars');">avatars</span>
<span class="paonglet_0 paonglet" id="paonglet_signatures" onclick="javascript:change_paonglet('signatures');">signatures</span>
<span class="paonglet_0 paonglet" id="paonglet_bannieres" onclick="javascript:change_paonglet('bannieres');">bannières</span>
<span class="paonglet_0 paonglet" id="paonglet_design" onclick="javascript:change_paonglet('design');">design</span>
<span class="paonglet_0 paonglet" id="paonglet_grandsformats" onclick="javascript:change_paonglet('grandsformats');">grands formats</span>
<span class="paonglet_0 paonglet" id="paonglet_photofiltre" onclick="javascript:change_paonglet('photofiltre');">photofiltre</span>
</div>
<div class="contenu_paonglets">
<div class="contenu_paonglet" id="contenu_paonglet_introduction">
<br /><img src="https://img11.hostingpics.net/pics/629076img1.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisi purus, maximus eget vulputate ut, ultricies eu neque. Praesent urna orci, suscipit ut posuere at, blandit nec justo. Sed scelerisque nisl in ultrices iaculis. Mauris iaculis neque vel orci auctor tempus. Curabitur ac ullamcorper nunc. Quisque ac lacus blandit, hendrerit leo eu, rhoncus tellus. Nullam id cursus erat, eget vulputate neque. Mauris sagittis sit amet nisl ac euismod. Aenean commodo, tellus eget fermentum ultrices, risus nisl placerat mauris, vitae convallis neque magna eu enim. Vestibulum tempus erat vel diam ultrices, lacinia maximus ante mollis. Quisque at faucibus nisl. Duis pellentesque tellus sed lacinia pellentesque. Aenean nec congue ante. Etiam consectetur eget nulla elementum scelerisque. Sed suscipit orci vitae cursus bibendum. Morbi vitae nunc fermentum, lacinia lectus ac, semper nisl.
<br /><br />Sed non interdum sapien. Sed purus est, ullamcorper sed consequat vel, pretium ac sapien. Curabitur interdum odio id ante finibus rhoncus vel vitae ligula. Fusce bibendum urna sed elementum auctor. Aenean tincidunt, risus sit amet vehicula tempor, justo ipsum ultricies quam, non maximus enim odio eu urna. Vivamus posuere erat enim, a imperdiet massa tristique sit amet. Ut a pellentesque odio. Vivamus ut nulla magna. Aliquam vestibulum ex ac tellus scelerisque, at ultrices lorem varius. Aenean sed diam ipsum. Sed fermentum diam vel lobortis aliquam. Sed efficitur ut magna a semper. Nulla molestie mattis augue, et sodales ex cursus id. Morbi in ultricies est.
<br /><br />Phasellus facilisis commodo sollicitudin. Pellentesque euismod lectus sit amet pretium semper. Mauris sit amet ipsum vel ipsum dictum tristique. Aliquam malesuada, libero ut imperdiet volutpat, urna felis egestas risus, at viverra eros tortor eget libero. Curabitur malesuada, quam vitae finibus semper, nisl lacus lobortis diam, nec efficitur ante eros eget nisi. Pellentesque dignissim, lectus eu tempus molestie, enim sem varius massa, a gravida neque odio eu nibh. Duis metus orci, facilisis sit amet tellus sit amet, eleifend efficitur diam.
<br /><br />Vivamus ut varius purus. Maecenas quis bibendum eros. Phasellus eu magna eget nisl tristique gravida. Fusce eu gravida metus, non consequat augue. Cras felis lectus, iaculis ut est sed, congue gravida diam. Ut lacinia felis nec justo hendrerit interdum. Morbi sit amet sodales diam. Nulla enim nulla, iaculis pharetra nisi non, suscipit sollicitudin libero. Integer rutrum ultricies odio. Mauris tristique non turpis a egestas. Mauris pellentesque rhoncus erat, sit amet aliquam dolor rhoncus tempor. Fusce at nisi fermentum, mattis libero sed, consequat eros. Phasellus dui enim, ultrices vel leo vel, rutrum pellentesque dolor. Duis sit amet lectus metus.
<br /><br />Quisque volutpat pharetra massa eu cursus. Aliquam fermentum tortor a erat vehicula mollis. Aliquam aliquam ac felis id sodales. Proin ultricies et velit placerat sagittis. Nullam ut risus vulputate, convallis lorem sit amet, auctor nulla. Fusce accumsan iaculis sapien. Praesent volutpat lectus eget nunc pulvinar luctus. Duis congue rutrum lacus, nec auctor augue sollicitudin id. </p>
</div>
<div class="contenu_paonglet" id="contenu_paonglet_icons">
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
</div>
<div class="contenu_paonglet" id="contenu_paonglet_avatars">
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
</div>
<div class="contenu_paonglet" id="contenu_paonglet_signatures">
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
</div>
<div class="contenu_paonglet" id="contenu_paonglet_bannieres">
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
</div>
<div class="contenu_paonglet" id="contenu_paonglet_design">
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
</div>
<div class="contenu_paonglet" id="contenu_paonglet_grandsformats">
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
<img src="http://zupimages.net/up/17/31/nso0.png" /><br /><br />
</div>
<div class="contenu_paonglet" id="contenu_paonglet_photofiltre">
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
<img src="http://www.zupimages.net/up/17/31/deyz.png" /><br /><br />
</div>
</div>
<script type="text/javascript">
//<!--
var anc_paonglet = 'introduction';
change_paonglet(anc_paonglet);
//-->
</script>
<div class="clear"></div>
</div>
</div>
</body>
J'ai essayé d'espacer un max pour que tu puisses t'y retrouver. Attention quand tu veux la modifier : modifies bien en "Avancé", pas en "Simple" (donc le deuxième petit rouage).
Pour insérer le code dans un message :
- Code:
<center><iframe src="URL DE TA PAGE HTML" height="700" width="520" frameborder="0" scrolling="no"></iframe></center>
Et je t'écoute pour les éventuels beugs \o/
Accueil
J'ai du mal à visualiser le truc. Parce que même avec un jeux d'onglets au final sur la page des icônes/avatars ils changent de place et c'est hors de mes compétences :/
