PA LS: https://www.never-utopia.com/t52963-pa-gris-rose-infobulles-staff-news-partenaires-defilants
Catégorie associer: https://www.never-utopia.com/t53795-categories-gris-rose
Forum: http://intersect-in-space.kiffmylife.com/
Bonjour ^^
je viens vers vous avec ce nouveau topic car j'ai juste un petit problème... avec le code de la PA que je suis entrain de personnalisé.
C'est a propos de l'image de "Bienvenue" j'aurais aimer mettre comme pour les catégories et donc personnalisé le titre de la PA et j'ai eu beau traficoté le css H1 j'ai l'impression que mes modifs ne font absolument rien...:/ donc bhe je viens vers vous pour m'aider :/
Catégorie associer: https://www.never-utopia.com/t53795-categories-gris-rose
Forum: http://intersect-in-space.kiffmylife.com/
Bonjour ^^
je viens vers vous avec ce nouveau topic car j'ai juste un petit problème... avec le code de la PA que je suis entrain de personnalisé.
C'est a propos de l'image de "Bienvenue" j'aurais aimer mettre comme pour les catégories et donc personnalisé le titre de la PA et j'ai eu beau traficoté le css H1 j'ai l'impression que mes modifs ne font absolument rien...:/ donc bhe je viens vers vous pour m'aider :/
- 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|Dancing+Script' rel='stylesheet' type='text/css'>
<style>
body {
}
#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: 30px;
position: absolute;
top: -25px;
z-index: 3;
font-size: 34px;
font-family: 'Covered By Your Grace', cursive;
}
#pa h2:hover {
color: rgba(209,42,97,1);
}
#pa h3 {
height: 30px;
position: relative;
top: -55px;
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 {USERNAME}!</h1>
<table width="800px" cellspacing="15px" cellpadding="10px" id="contenu-general">
<tr>
<td rowspan="2" valign="top" class="withbg" width="300px">
<h2>Le Contexte</h2>
<div class="concept">
<p>Nous sommes en 2010 dans une petite ville des États-Unis appeler Burbank non loin de la ville de Los Angeles. Nous y trouvons un banal magasin d'electro ménagé nommé Buymore dans lequel travail un dénommé Chuck Bartowsky et son ami de toujours Morgan Grimes. Mais ce que ce dernier ne sait pas c'est que Chuck est en réalité un agent secret doté d'une capacité très spécial. Son nom d'agent : Carmichael. Le nom du projet: Intersecret. Ce projet était en fait à la base un projet gouvernemental créer par son propre père et qui en vérité, devait créer un genre d'ordinateur ultra-performant qu'on pourrait implanter instantanément dans un cerveau humain. </p>
<p>Et on peut dire que cela fut une franche réussite car la CIA et la NSA regroupèrent tout leur secret en un seul point stratégique dans un seul serveur. Mais il fut piraté par un ancien de la cia qui n'était autre qu'un ami d'université de Chuck et qui ne trouva d'autre moyen que le lui envoyer par mail pour éviter de se faire prendre avec. Il fut tuer lors de l'opération. Chuck lui ouvrit le mail et toutes les données se téléchargèrent directement dans son cerveau. Le projet Intersecret est né. Depuis Chuck se sert de cet ordinateur pour apprendre rapidement des donnés sensibles pour les enquêtes qu'il doit mener. Il est pour cela supervisé par le général Beckman et l'agent Casey de la NSA mais aussi l'agent Walker de la CIA.
<p><a href="http://intersect-in-space.kiffmylife.com/t39-le-contexte-du-forum">En Savoir Plus....</a></p>
</div>
</td>
<td valign="top" width="450px">
<ul class="groupes">
<li><a href="" ><h3>Règlement</h3></a></li>
<li><a href="http://intersect-in-space.kiffmylife.com/t39-le-contexte-du-forum" ><h3>Contexte</h3></a></li>
<li><a href="http://intersect-in-space.kiffmylife.com/f4-postes-vacant-et-scenarii" ><h3>Postes Vacant</h3></a></li>
<li><a href="http://intersect-in-space.kiffmylife.com/t5-fiche-de-presentation" ><h3>Se présenter</h3></a></li>
<li><a href="http://intersect-in-space.kiffmylife.com/t36-pour-devenir-partenaire" ><h3>Partenaires</h3></a></li>
</ul>
</td>
</tr>
<tr>
<!-- <td>lol</td> on supprime cette ligne, car rowspan -->
<td valign="top" class="withbg">
<h2>Les News du Forum</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>Nous les attendons!</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>
<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>
Dernière édition par Angie Beber-Davison le Lun 23 Mar 2015 - 15:52, édité 1 fois
