Bonjour !
Voilà, j'ai un petit problème avec un PA d'HenryKiki (Celle-là) et je viens donc demander un peu d'aide.
En fait, voilà, quand je poste la PA dans la partie HTML et en iframe ensuite, ça marche niquel. Cependant, dès que je modifie ne serait-ce qu'un bout de texte, la PA entière se déforme x) Le bloc partenaires part totalement en cacahuètes, le texte grossit sans raison particulière, bref, je suis perdue ^^'
Les images parlent d'elles-même :
Avant : https://www.zupimages.net/up/15/39/rndg.jpg
Après : https://www.zupimages.net/up/15/39/n73u.jpg
Et j'ai pas touché au CSS ou au code, j'ai juste changé le texte.
C'est pour ce forum !
Voici le code HTML, au cas où ^^
Et l'iframe :
Merci beaucoup à celui qui voudras bien m'aider
Bisouilles !
Voilà, j'ai un petit problème avec un PA d'HenryKiki (Celle-là) et je viens donc demander un peu d'aide.
En fait, voilà, quand je poste la PA dans la partie HTML et en iframe ensuite, ça marche niquel. Cependant, dès que je modifie ne serait-ce qu'un bout de texte, la PA entière se déforme x) Le bloc partenaires part totalement en cacahuètes, le texte grossit sans raison particulière, bref, je suis perdue ^^'
Les images parlent d'elles-même :
Avant : https://www.zupimages.net/up/15/39/rndg.jpg
Après : https://www.zupimages.net/up/15/39/n73u.jpg
Et j'ai pas touché au CSS ou au code, j'ai juste changé le texte.
C'est pour ce forum !
Voici le code HTML, au cas où ^^
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>PA grise/rose + scrollbar personnalisée.</title>
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<style>
body {
background: #e4e1e2;
}
#pa h1, #pa h2, #pa h3, #pa h4, #pa h5, #pa h6, #pa p {
margin: 0; padding: 0; font-weight: normal;
}
#pa {
width: 800px;
min-height: 400px;
border-radius: 10px;
background: #fff;
margin: 75px auto 20px;
position: relative;
padding-top: 50px;
font-family: "abeatbykai", sans-serif;
font-size: 12px;
letter-spacing: 1px;
color: gray;
}
#pa a {
color: darkgray;
text-decoration: none;
}
#pa a, #pa h2, .news p {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#pa a:hover {
color: #d74e77;
}
#pa h1 {
width: 347px;
height: 70px;
background: url("http://i39.servimg.com/u/f39/19/07/10/81/titre-10.png") no-repeat;
position: absolute;
top: -55px;
left: 50%;
margin-left: -173.5px;
text-indent: -9999px;
}
ul#ticker01, ul#concours, ul.groupes, ul#staff
{
list-style-type: none;
margin: 0;
padding: 0;
}
#pa h2 img {
position: absolute; top:0;
}
#pa table td {
min-height: 50px;
border-radius: 10px;
position: relative;
padding-top: 25px;
}
#pa table td.withbg {
background: #e4e1e2;
}
#pa h2 {
height: 34px;
position: absolute;
top: -12.5px;
z-index: 3;
font-size: 34px;
font-family: 'Covered By Your Grace', cursive;
}
#pa h2:hover {
color: rgba(209,42,97,1);
}
/* CONCEPT */
.concept {
height: 192px; max-height: 192px;
overflow-y: scroll;
padding: 1px;
}
.concept p {
margin-bottom: 20px !important;
padding-right: 20px !important;
}
.concept p:last-child {
margin-bottom: 0px !important;
}
/* GROUPES */
.groupes {
height: 60px; max-height: 60px;
text-align: center;
}
.groupes li {
display: inline-block;
margin: 0 10px;
}
/* NEWS */
.news {
height: 87px; max-height: 87px;
overflow-y: scroll;
}
.news strong {
color: #d74e77;
font-family: sans-serif;
text-transform: uppercase;
font-weight: normal;
}
.news p {
border-bottom: 1px solid lightgray;
padding: 2px 0 !important; margin: 2px 0 !important;
}
.news p:hover {
border-bottom: 1px solid lightgray;
padding: 2px 0 2px 20px !important; margin: 2px 0 !important;
}
/* CONCOURS */
ul#concours {
width: 280px;
height: 114px; max-height: 114px;
margin: 0px auto 0;
text-align: center;
}
ul#concours li {
width: 84px;
margin: 0 5px;
display: inline-block;
position: relative;
z-index: 4;
}
ul#concours li span {
display: none;
width: 150px;
padding: 10px;
position: absolute;
bottom: 60px; right: 50%; margin-right: -75px;
background: #fff;
color: #fff;
z-index: 5;
border-radius: 10px;
border-bottom: 1px solid #d74e77;
}
ul#concours li:hover span {
display: block;
}
ul#concours li span img {
max-width: 150px;
height: auto;
}
.fleche {
width: 26px;
height: 12px;
background: url("http://i39.servimg.com/u/f39/19/07/10/81/fleche11.png");
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -13px;
}
/* STAFF */
#staff img, ul#concours li img.mini {
-webkit-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-moz-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-ms-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-o-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
}
#staff li {
display: inline-block;
width: 80px; max-width: 80px;
}
#staff li:hover {
cursor: help;
}
.staff p {
padding: 10px 0 10px !important;
}
.staff{
text-align: center;
}
.staff .pseudo
{
display: inline-block;
color: #d74e77;
}
/* PARTENAIRES */
td.partenaires {
padding-top: 15px !important;
}
.tickercontainer { /* the outer div with the black border */
width: 750px;
height: 31px;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: relative;
z-index: 2;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 0px;
top: 0px;
width: 750px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
width: 88px;
margin: 0 2px;
padding: 0;
}
/* CREDITS */
#credits {
position: absolute;
padding: 0px 10px;
bottom: -20px;
right: 0px;
height: 20px;
line-height: 20px;
font-size: 8px;
color: gray;
text-transform: uppercase;
text-shadow: 1px 1px 0px #ffffff;
}
/* SCROLLBAR */
::-webkit-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-webkit-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-webkit-scrollbar-corner{background:none;}
::-moz-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-moz-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-moz-scrollbar-corner{background:none;}
::-ms-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-ms-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-ms-scrollbar-corner{background:none;}
::-o-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-o-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-o-scrollbar-corner{background:none;}
::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-scrollbar-corner{background:none;}
</style>
</head>
<body>
<div id="pa">
<h1>Bienvenue !</h1>
<table width="800px" cellspacing="15px" cellpadding="10px" id="contenu-general">
<tr>
<td rowspan="2" valign="top" class="withbg" width="300px">
<h2>Le concept</h2>
<div class="concept">
<p>Bien le bonjour</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, itaque, cum veniam vel sed dicta <a href="">quaerat modi</a> ab soluta molestias voluptas ipsam sit omnis. Nemo, natus facilis suscipit sequi ratione. Lorem ipsum dolor sit amet, consectetur adipisicing </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, ab, voluptates, porro totam omnis eos hic mollitia beatae quia dolores corrupti delectus sequi recusandae molestiae sit. Magni saepe repellendus voluptas.</p>
</div>
</td>
<td valign="top" width="450px">
<ul class="groupes">
<li><a href="" style="color: red;">groupe 1</a></li>
<li><a href="" style="color: green;">groupe 2</a></li>
<li><a href="" style="color: orange;">groupe 3</a></li>
<li><a href="" style="color: blue;">groupe 4</a></li>
<li><a href="" style="color: magenta;">groupe 5</a></li>
</ul>
</td>
</tr>
<tr>
<!-- <td>lol</td> on supprime cette ligne, car rowspan -->
<td valign="top" class="withbg">
<h2>Les nouveautés</h2>
<div class="news">
<p><strong>News 1 :</strong> <a href="">Les fourmis ont des pattes!</a></p>
<p><strong>News 2 :</strong> Quoi, une news sans lien ? </p>
<p><strong>News 3 :</strong> <a href="">Pas touche la mouche</a></p>
<p><strong>News 4 :</strong> <a href="">T'as pas pris ta douche</a></p>
<p><strong>News 5 :</strong> The style for news</p>
<p><strong>News 6 :</strong> The style for news</p>
<p><strong>News 7 :</strong> The style for news</p>
<p><strong>News 8 :</strong> The style for news</p>
</div>
</td>
</tr>
<tr>
<td valign="top" class="withbg">
<h2>Concours</h2>
<ul id="concours">
<li>
<img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
<div class="titre-concours">AOTM</div> <!-- titre concours -->
<span>
<img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
<div class="fleche"></div> <!-- tite fleche -->
</span>
</li>
<li>
<img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
<div class="titre-concours">AOTM</div> <!-- titre concours -->
<span>
<img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
<div class="fleche"></div> <!-- tite fleche -->
</span>
</li>
<!--
BLOC A DUPLIQUER SI 3 OU 4 CONCOURS :
<li>
<img src="staff.png" alt="AOTM" class="mini">
<div class="titre-concours">AOTM</div>
<span>
<img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="">
<div class="fleche"></div>
</span>
</li> -->
</ul>
</td>
<td valign="top" class="withbg">
<h2>Le staff</h2>
<ul id="staff">
<li onMouseOver="javascript:staff1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
<li onMouseOver="javascript:staff2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
<li onMouseOver="javascript:staff3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
<li onMouseOver="javascript:staff4()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
<li onMouseOver="javascript:staff5()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
</ul>
<div class="staff">
<div id="staff1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, sapiente, quos, qui corporis soluta optio aspernatur harum minus asperiores ipsum repudiandae placeat ipsam.</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
<div id="staff2" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aliquid, laudantium, neque eius nemo amet dolores velit esse voluptas dicta quisquam quos consequuntur provident</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
<div id="staff3" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, illo, assumenda, pariatur reprehenderit nam vero tempore nostrum laboriosam molestiae maxime incidunt.</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
<div id="staff4" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, dolor in quaerat quas quos pariatur iusto aliquid laudantium et ipsum nulla dignissimos.</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
<div id="staff5" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, voluptate rerum ipsam incidunt magni temporibus voluptatibus voluptas labore praesentium nemo deserunt.</p>
<div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
</div>
</div>
</td>
</tr>
<tr>
<td valign="top" colspan="2" class="withbg partenaires">
<h2>Partenaires</h2>
<ul id="ticker01">
<li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
<li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
<li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
<!-- eccetera -->
</ul>
</td>
</tr>
</table>
<div id="credits">
PA réalisée par Henrykiki sur <a href="http://www.never-utopia.com/t52871-henrykiki-pa-grise-rose-pale" target="_blank">Never-Utopia</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
/*!
* liScroll 1.0
* Examples and documentation at:
* http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
* 2007-2010 Gian Carlo Mingati
* Version: 1.0.2.1 (22-APRIL-2011)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires:
* jQuery v1.2.x or later
*
*/
jQuery.fn.liScroll = function(settings) {
settings = jQuery.extend({
travelocity: 0.07
}, settings);
return this.each(function(){
var $strip = jQuery(this);
$strip.addClass("newsticker")
var stripWidth = 1;
$strip.find("li").each(function(i){
stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
});
var $mask = $strip.wrap("<div class='mask'></div>");
var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
var containerWidth = $strip.parent().parent().width(); http://a.k.a. 'mask' width
$strip.width(stripWidth);
var totalTravel = stripWidth+containerWidth;
var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
});
};
</script>
<script>
$(function(){
$("#ticker01").liScroll();
});
function staff1() {
document.getElementById('staff1').style.display='block';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff2() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='block';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff3() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='block';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff4() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='block';
document.getElementById('staff5').style.display='none';}
function staff5() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='block';}
</script>
</body>
</html>
Et l'iframe :
- Code:
<iframe style="width: 850px; height: 650px;" scrolling="no" frameborder="0" src="http://fanbase-aventures.forumactif.org/h1-pa"></iframe>
Merci beaucoup à celui qui voudras bien m'aider
Bisouilles !
