Yo ! C'est parti pour les votes sur le défi des ronds. Je rappelle le concept: il s'agissait d'intégrer au mieux des ronds (trois minimums) dans une création . A votre souris !
Créaronds 1:
PA en action !
PA en action !
Les codes:
HTML:
Créaronds 3:
PA en action !
Créaronds 1:
PA en action !
- code:
- Code:
<html>
<head>
<meta charset="utf-8" />
<title>Page d'Accueil Ronds N.U.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Caesar+Dressing|Coming+Soon|Miniver' rel='stylesheet' type='text/css' />
</head>
<style text/css>
/*Scrollbar du forum*/
::-webkit-scrollbar {
width: 8px; /*largeur de la scrollbar verticale*/
height:0px;
}
::-webkit-scrollbar-track {
background-color: #FFFFFF /*couleur du fond de la scrollbar*/
}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
background-color: #e59f43 /*couleur de l'ascenseur*/;
}
.fond{
position:relative;
width:800px;
height:570px;
margin:auto;
background: url('http://zupimages.net/up/14/15/nn4p.png');
box-shadow:0px 0px 5px #cbc6cf;
overflow:hidden;
}
a{
font-family: 'Coming Soon', cursive;
color:#727bc4;
text-decoration:none;
transition:all ease 0.8s;
webkit-transition:all ease 0.8s;
}
a:hover{
color:#bdc654;
text-decoration:none !important;
transition:all ease 0.8s;
webkit-transition:all ease 0.8s;
}
.liens{
display:block;
position:relative;
top:52.5px;
width:75px;
height:25px;
margin-bottom:50px;
padding:5px;
background-color:#F6F6F6;
border-right:20px solid #e59f43;
border-radius: 0px 50px 50px 0px;
text-align:center;
color:#888888;
font-size:20px;
font-family: 'Caesar Dressing', cursive;
text-shadow:2px 1px 0px #FFFFFF;
text-transform:uppercase;
text-decoration:none;
transition:all ease 0.8s;
webkit-transition:all ease 0.8s;
}
.liens:hover{
width:120px;
color:#e59f43;
transition:all ease 0.6s;
webkit-transition:all ease 0.6s;
}
.contexte{
position:absolute;
top:40px;
left:190px;
width:200px;
height:200px;
background-color:#F6F6F6;
border:10px solid #d0dc4f;
border-radius:50%;
z-index:50;
}
.texte1{
position:absolute;
top:15px;
left:30px;
width:135px;
height:135px;
overflow:auto;
text-align:justify;
color:#888888;
font-size:14px;
font-family: 'Open Sans Condensed', sans-serif;
}
.infos{
position:absolute;
top:35px;
left:282px;
width:100px;
height:100px;
background-color:#F6F6F6;
border:10px solid #727bc4;
border-radius:50%;
z-index:1;
transition:all ease 0.7s;
webkit-transition:all ease 0.7s;
}
.infos:hover{
transform: translate(105px, -25px);
transition:all ease 0.7s;
webkit-transition:all ease 0.7s;
}
.texte2{
position:absolute;
top:10px;
left:10px;
width:80px;
height:80px;
overflow:auto;
text-align:justify;
color:#888888;
font-size:13px;
font-family: 'Open Sans Condensed', sans-serif;
}
.crédits{
position:absolute;
top:130px;
left:328px;
width:60px;
height:60px;
padding:12px;
background-color:#F6F6F6;
border:5px solid #e59f43;
border-radius:50%;
color:#888888;
font-size:10px;
font-family: 'Open Sans Condensed', sans-serif;
transition:all ease 0.7s;
webkit-transition:all ease 0.7s;
}
.crédits:hover{
transform: translate(75px, -10px);
transition:all ease 0.7s;
webkit-transition:all ease 0.7s;
}
.staff{
position:absolute;
top:40px;
left:510px;
width:200px;
height:200px;
border:10px solid #d0dc4f;
border-radius:50%;
}
#fonda{
position:absolute;
top:50px;
left:50px;
border-radius:50%;
z-index:9999;
opacity:1;
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.contenu{
position:absolute;
top:50px;
left:50px;
width:100px;
height:80px;
padding-top:20px;
background-color:#F6F6F6;
border-radius:50%;
text-align:center;
line-height:30px;
color:#888888;
font-size:14px;
font-family: 'Open Sans Condensed', sans-serif;
z-index:9999;
opacity:0;
transform: scale(0.4);
-webkit-transform: scale(0.4);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.contenu:hover{
opacity:1;
transform: scale(1);
-webkit-transform: scale(1);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.img1{
position:absolute;
z-index:10;
border-top-left-radius:100%;
}
.contenu1{
position:absolute;
width:90px;
height:70px;
padding-top:30px;
padding-left:5px;
background-color:#f6f6f6;
border-top-left-radius:100%;
border-right:5px solid #727bc4;
text-align:center;
line-height:30px;
color:#888888;
font-size:14px;
font-family: 'Open Sans Condensed', sans-serif;
z-index:9999;
opacity:0;
transform: scale(0.4);
-webkit-transform: scale(0.4);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.contenu1:hover{
opacity:1;
transform: scale(1);
-webkit-transform: scale(1);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.img2{
position:absolute;
left:100px;
z-index:10;
border-top-right-radius:100%;
}
.contenu2{
position:absolute;
left:100px;
width:95px;
height:65px;
padding-top:30px;
padding-right:5px;
background-color:#f6f6f6;
border-top-right-radius:100%;
border-bottom:5px solid #727bc4;
text-align:center;
line-height:30px;
color:#888888;
font-size:14px;
font-family: 'Open Sans Condensed', sans-serif;
z-index:9999;
opacity:0;
transform: scale(0.4);
-webkit-transform: scale(0.4);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.contenu2:hover{
opacity:1;
transform: scale(1);
-webkit-transform: scale(1);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.img3{
position:absolute;
top:100px;
left:100px;
z-index:10;
border-bottom-right-radius:100%;
}
.contenu3{
position:absolute;
top:100px;
left:100px;
width:85px;
height:95px;
padding-top:5px;
padding-right:10px;
background-color:#f6f6f6;
border-bottom-right-radius:100%;
border-left:5px solid #727bc4;
text-align:center;
line-height:30px;
color:#888888;
font-size:14px;
font-family: 'Open Sans Condensed', sans-serif;
z-index:9999;
opacity:0;
transform: scale(0.4);
-webkit-transform: scale(0.4);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.contenu3:hover{
opacity:1;
transform: scale(1);
-webkit-transform: scale(1);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.img4{
position:absolute;
top:100px;
z-index:10;
border-bottom-left-radius:100%;
}
.contenu4{
position:absolute;
top:100px;
width:85px;
height:90px;
padding-top:5px;
padding-left:15px;
background-color:#f6f6f6;
border-bottom-left-radius:100%;
border-top:5px solid #727bc4;
text-align:center;
line-height:30px;
color:#888888;
font-size:14px;
font-family: 'Open Sans Condensed', sans-serif;
z-index:9999;
opacity:0;
transform: scale(0.3);
-webkit-transform: scale(0.3);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.contenu4:hover{
opacity:1;
transform: scale(1);
-webkit-transform: scale(1);
transition:all ease 1s;
webkit-transition:all ease 1s;
}
.newparto{
position:absolute;
top:240px;
left:310px;
width:300px;
height:300px;
border-radius:50%;
background-color:#f6f6f6;
border-top:10px solid #e59f43;
border-bottom:10px solid #e59f43;
overflow:hidden;
}
.news{
position:absolute;
top:3px;
width:300px;
padding-top:34px;
height:113px;
overflow:auto;
}
.texte3{
width:300px;
margin-bottom:1px;
padding:5px;
background-color:#e3e3e3;
text-align:center;
color:#888888;
font-size:12px;
font-family: 'Open Sans Condensed', sans-serif;
}
.partenaires{
position:absolute;
top:153px;
left:55px;
width:190px;
height:125px;
overflow:auto;
}
</style>
<body>
<div class="fond">
<a href="#" class="liens" target="_blank">Lien</a><div class="demicercle"></div>
<a href="#" class="liens" target="_blank">Lien</a><div class="demicercle"></div>
<a href="#" class="liens" target="_blank">Lien</a><div class="demicercle"></div>
<a href="#" class="liens" target="_blank">Lien</a><div class="demicercle"></div>
<a href="#" class="liens" target="_blank">Lien</a><div class="demicercle"></div>
<a href="#" class="liens" target="_blank">Lien</a><div class="demicercle"></div>
<div class="contexte">
<p class="texte1">
Adolescebat autem obstinatum propositum erga haec et similia multa scrutanda, stimulos admovente regina, quae abrupte mariti fortunas trudebat in exitium praeceps, cum eum potius lenitate feminea ad veritatis humanitatisque viam reducere utilia suadendo deberet, ut in Gordianorum actibus factitasse Maximini truculenti illius imperatoris rettulimus coniugem.
</p>
</div>
<div class="infos">
<p class="texte2">
Optimisé sous Opera, Chrome, IE, Mozilla.<br />
</p>
</div>
<div class="crédits">
Réalisé par quelqu'un pour <a href="http://www.never-utopia.com" target="_blank">Never Utopia</a> avec humour.
</div>
<div class="staff">
<img src="http://www.zupimages.net/up/16/15/6l56.jpg" alt="fonda" id="fonda"/>
<div class="contenu">Pseudo<br/><a href="#" target="_blank">MP</a> | <a href="#" target="_blank">Profil</a></div>
<img src="http://zupimages.net/up/16/15/a4mg.png" alt="admin" class="img1"/>
<div class="contenu1">Pseudo<br/><a href="#" target="_blank">MP</a> | <a href="#" target="_blank">Profil</a></div>
<img src="http://zupimages.net/up/16/15/496x.png" alt="admin" class="img2"/>
<div class="contenu2">Pseudo<br/><a href="#" target="_blank">MP</a> | <a href="#" target="_blank">Profil</a></div>
<img src="http://zupimages.net/up/16/15/a4mg.png" alt="modo" class="img3"/>
<div class="contenu3">Pseudo<br/><a href="#" target="_blank">MP</a> | <a href="#" target="_blank">Profil</a></div>
<img src="http://zupimages.net/up/16/15/496x.png" alt="modo" class="img4"/>
<div class="contenu4">Pseudo<br/><a href="#" target="_blank">MP</a> | <a href="#" target="_blank">Profil</a></div>
</div>
<div class="newparto">
<div class="news">
<div class="texte3">00/00/0000: Texte</div>
<div class="texte3">00/00/0000: Texte</div>
<div class="texte3">00/00/0000: Texte</div>
<div class="texte3">00/00/0000: Texte</div>
<div class="texte3">00/00/0000: Texte</div>
<div class="texte3">00/00/0000: Texte</div>
</div>
<div class="partenaires">
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
<a href="URL" target="_blank"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom Parto"/></a>
</div>
</div>
</div>
</body>
</html>
PA en action !
Les codes:
HTML:
- html:
- Code:
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://testsconcours.forumgratuit.fr/10494.js"></script>
<!-- PA -->
<div id="corps_pa">
<!-- Titre -->
<h1 id="titre">Bienvenue sur "Nom du Forum" </h1>
<div id="titre_separation"></div>
<!--Navigation -->
<ul id="nav">
<div class="separation_nav" id="couleur_jaune"></div>
<li><a href="">Lien 1</a></li>
<div class="separation_nav" id="couleur_verte"></div>
<li><a href="">Lien 2</a></li>
<div class="separation_nav" id="couleur_bleu"></div>
<li><a href="">Lien 3</a></li>
<div class="separation_nav" id="couleur_jaune"></div>
<li><a href="">Lien 4</a></li>
<div class="separation_nav" id="couleur_verte"></div>
<li><a href="">Lien 5</a></li>
<div class="separation_nav" id="couleur_bleu"></div>
</ul>
<!-- Bloc Gauche-->
<div id="bloc_left">
<!-- Bloc Actualités avec effet Onglets Javascript-->
<div id="bloc_news">
<h3 class="titre_actu">Actualités</h3>
<div class="rond_actu"><img src="http://i86.servimg.com/u/f86/19/45/46/99/gemme_11.png" /></div>
<span class="onglet"> </span>
<div style="" class="bloc_texte" id="onglet1">
<p class="texte_actu">
<strong>xx/xx/xx :</strong> Diebus acciderat malum<br /> <strong>xx/xx/xx :</strong> Quod et Theophilum insontem<br /> <strong>xx/xx/xx :</strong> Atrox interceperat casus<br /> <strong>xx/xx/xx :</strong> Et Serenianus dignus<br /> <strong>xx/xx/xx :</strong> Exsecratione cunctorum innoxius<br /> <strong>xx/xx/xx :</strong> Modo non reclamante publico vigore<br /> <strong>xx/xx/xx :</strong> Discessit duplexque isdem<br /> <strong>xx/xx/xx :</strong> Diebus acciderat malum
</p></div>
<span class="onglet"> </span>
<div style="" class="navigation" name="1">
<div class="onglet_deco_news">
<p>News</p>
</div>
</div>
<span class="onglet"> </span>
<span class="onglet"> </span>
<div style="" class="bloc_texte" id="onglet2">
<p class="texte_actu">
<strong>Population :</strong> xx <br /> <strong>Hommes :</strong> xx<br /> <strong>Femmes :</strong> xx<br /><br /> <strong>Groupe 1 :</strong> xx<br /> <strong>Groupe 2 :</strong> xx<br /> <strong>Groupe 3 :</strong> xx
</p>
</div>
<span class="onglet"> </span>
<div style="" class="navigation" name="2">
<div class="onglet_deco_effectifs">
<p>Effectifs</p>
</div>
</div>
<span class="onglet"> </span>
<span class="onglet"> </span>
<div style="" class="bloc_texte" id="onglet3">
<p class="texte_actu">Diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus.<br /><br /> <strong>Intrigue 1 :</strong> Et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.<br /><br /> <strong>Event 1 :</strong> Duplexque isdem diebus acciderat malum.
</p>
</div>
<span class="onglet"> </span>
<div style="" class="navigation" name="3">
<div class="onglet_deco_activites">
<p>Activités </p>
</div>
</div>
<span class="onglet"> </span>
</div>
<!-- Bloc Partenaires -->
<div id="bloc_partenaires">
<h3 class="titre_partenaires">Partenaires </h3>
<div class="rond_partenaires"> <img src="http://i86.servimg.com/u/f86/19/45/46/99/gemme_10.png" />
</div>
<div class="bouton_partenaire"> <a href="#"><img class="separation_partenaire" src="http://i86.servimg.com/u/f86/19/45/46/99/bouton10.jpg" alt="bouton partenaire" /></a><a href="#"><img class="separation_partenaire" src="http://i86.servimg.com/u/f86/19/45/46/99/bouton10.jpg" alt="bouton partenaire" /></a><a href="#"><img class="separation_partenaire" src="http://i86.servimg.com/u/f86/19/45/46/99/bouton10.jpg" alt="bouton partenaire" /></a>
</div> <br />
<div class="bouton_partenaire"><a href="#"><img class="separation_partenaire" src="http://i86.servimg.com/u/f86/19/45/46/99/bouton10.jpg" alt="bouton partenaire" /></a><a href="#"><img class="separation_partenaire" src="http://i86.servimg.com/u/f86/19/45/46/99/bouton10.jpg" alt="bouton partenaire" /></a><a href="#"><img class="separation_partenaire" src="http://i86.servimg.com/u/f86/19/45/46/99/bouton10.jpg" alt="bouton partenaire" /></a>
</div>
</div>
</div>
<!-- Bloc Centre-->
<div id="bloc_center">
<!--Bloc Prédéfs Haut-->
<div id="bloc_predefs_H">
<div class="rond_predef">
<p class="pseudo_predef">Prédef</p>
</div>
<div class="rond_predef">
<p class="pseudo_predef">Prédef </p>
</div>
</div>
<!-- Bloc Contexte -->
<div id="bloc_contexte">
<h3 class="titre_contexte">Contexte</h3>
<div class="bloc_ronds_deco_contexte">
<div class="rond_deco_contexte" id="couleur_jaune">
</div>
<div class="rond_deco_contexte" id="couleur_verte">
</div>
<div class="rond_deco_contexte" id="couleur_bleu">
</div>
</div>
<p class="texte_contexte"> Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit. Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non.
</p>
</div>
<!-- Bloc Prédéfs Bas -->
<div id="bloc_predefs_B">
<div class="rond_predef">
<p class="pseudo_predef">Prédef</p>
</div>
<div class="rond_predef">
<p class="pseudo_predef">Prédef</p>
</div>
</div>
</div>
<!-- Bloc Droite -->
<div id="bloc_right">
<!-- Bloc Liens Utiles -->
<div id="bloc_liens">
<h3 class="titre_liens">Liens Utiles</h3>
<div class="rond_liens"><img src="http://i86.servimg.com/u/f86/19/45/46/99/gemme_12.png" />
</div>
<ul class="liste_liens">
<li> <a href="#"><span class="position_rond_lien_G"></span></a>
<div style="" class="rond_deco_lien" id="couleur_jaune">
</div>
<a href="#"><span class="position_rond_lien_G"></span> Lien 1 <span class="position_rond_lien_D"></span></a>
<div style="" class="rond_deco_lien" id="couleur_jaune">
</div><a href="#"><span class="position_rond_lien_D"></span> </a>
</li>
<li> <a href="#"><span class="position_rond_lien_G"></span></a>
<div style="" class="rond_deco_lien" id="couleur_verte">
</div>
<a href="#"><span class="position_rond_lien_G"></span> Lien 2 <span class="position_rond_lien_D"></span></a>
<div style="" class="rond_deco_lien" id="couleur_verte">
</div><a href="#"><span class="position_rond_lien_D"></span> </a>
</li>
<li> <a href="#"><span class="position_rond_lien_G"></span></a>
<div style="" class="rond_deco_lien" id="couleur_bleu">
</div><a href="#"><span class="position_rond_lien_G"></span> Lien 3 <span class="position_rond_lien_D"></span></a>
<div style="" class="rond_deco_lien" id="couleur_bleu">
</div><a href="#"><span class="position_rond_lien_D"></span> </a>
</li>
<li><a href="#"><span class="position_rond_lien_G"></span></a>
<div style="" class="rond_deco_lien" id="couleur_jaune">
</div><a href="#"><span class="position_rond_lien_G"></span> Lien 4 <span class="position_rond_lien_D"></span></a>
<div style="" class="rond_deco_lien" id="couleur_jaune">
</div><a href="#"><span class="position_rond_lien_D"></span> </a>
</li>
<li> <a href="#"><span class="position_rond_lien_G"></span></a>
<div style="" class="rond_deco_lien" id="couleur_verte">
</div><a href="#"><span class="position_rond_lien_G"></span> Lien 5 <span class="position_rond_lien_D"></span></a>
<div style="" class="rond_deco_lien" id="couleur_verte">
</div><a href="#"><span class="position_rond_lien_D"></span> </a>
</li>
<li><a href="#"><span class="position_rond_lien_G"></span></a>
<div style="" class="rond_deco_lien" id="couleur_jaune">
</div><a href="#"><span class="position_rond_lien_G"></span> Lien 6 <span class="position_rond_lien_D"></span></a>
<div style="" class="rond_deco_lien" id="couleur_jaune">
</div><a href="#"><span class="position_rond_lien_D"></span> </a>
</li>
</ul>
</div>
<!-- Bloc Staff -->
<div id="bloc_staff">
<h3 class="titre_staff">Staff</h3>
<div class="rond_staff"><img src="http://i86.servimg.com/u/f86/19/45/46/99/gemme_13.png" />
</div>
<div class="bloc_icones">
<div class="icone_staff">
<p class="pseudo_staff">Pseudo </p>
</div>
<div class="icone_staff">
<p class="pseudo_staff">Pseudo</p>
</div>
<div class="icone_staff">
<p class="pseudo_staff">Pseudo</p>
</div>
<div class="icone_staff">
<p class="pseudo_staff">Pseudo</p>
</div>
</div>
</div>
</div>
<!-- Fin PA -->
</div>
- css:
- Code:
<style>
/**** PA *****/
/**** Divers réglages Mise En Page ****/
#corps_pa h3
{
color : black;
font-variant: small-caps;
font-style: Arial;
font-weight: normal;
font-size: 17px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#corps_pa p
{
display: inline-block;
vertical-align: top;
font-family: verdana;
font-size: 11px;
text-align: left;
color: black;
}
#corps_pa li
{
list-style-type: none;
font-size: 15px;
font-variant: small-caps;
}
#corps_pa a
{
text-decoration: none;
color: black;
}
#corps_pa li a:hover, a:active, a:focus
{
text-decoration: none !important;
color: #CF6D56 !important;
}
#corps_pa a:link
{
color: black;
}
/***** Mise en forme des textes *****/
.texte_actu
{
margin-top: -43px;
height: 96px;
overflow-y: auto;
width: 269px;
margin-left: -115px;
}
.texte_contexte
{
margin-left: 5px;
margin-right: 5px;
position: relative;
}
.liste_liens
{
margin-top: -55px;
width: 178px;
margin-left: auto;
margin-right: auto;
}
#corps_pa .titre_actu
{
background-color: #ecb980;
border: 2px solid #c69c6d;
}
#corps_pa .titre_partenaires
{
background-color: #99b7c5;
border: 2px solid #548195;
}
#corps_pa .titre_liens
{
background-color: #ec9480;
border: 2px solid #cf6d56;
}
#corps_pa .titre_staff
{
background-color: #5caa7b;
border: 2px solid #406618;
}
/***** Mise en forme des Ronds Prédefs *****/
.rond_predef
{
width: 60px;
height: 60px;
background-color: #D9D9D9;
display: inline-block;
border-radius: 30px;
margin-left: 14px;
margin-right: 24px;
}
#corps_pa .pseudo_predef
{
position: relative;
top: 35px;
right: 2px;
width: 57px;
background-color: #EDB1A3;
text-align: center;
transform: rotate(9deg);
color: white;
}
/******* Mise en forme des ronds Blocs ******/
.rond_actu
{
width: 60px;
height: 60px;
background-color: #ffd6a8;
border: 2px solid white;
display: inline-block;
border-radius: 30px;
position: relative;
bottom: 47px;
right: 123px;
}
.rond_actu img
{
position: absolute;
bottom: -8px;
right: -6px;
}
.rond_partenaires
{
width: 60px;
height: 60px;
background-color: #7399aa;
border: 2px solid white;
display: inline-block;
border-radius: 30px;
position: relative;
bottom: 47px;
right: 123px;
}
.rond_partenaires img
{
position: absolute;
bottom: -7px;
right: -9px;
}
.rond_liens
{
width: 60px;
height: 60px;
background-color: #ffb9a8;
border: 2px solid white;
display: inline-block;
border-radius: 30px;
position: relative;
bottom: 47px;
right: 117px;
}
.rond_liens img
{
position: absolute;
bottom: -8px;
right: -8px;
}
.rond_staff
{
width: 60px;
height: 60px;
background-color: #7dbe98;
border: 2px solid white;
display: inline-block;
border-radius: 30px;
position: relative;
bottom: 47px;
right: 117px;
}
.rond_staff img
{
position: absolute;
bottom: -7px;
right: -9px;
}
/******* Mise en forme Bloc Actualité ******/
.bloc_texte
{
position: absolute;
width: 70px;
height: 0px;
background-color: #ffd6a8;
border-radius: 0 0 20px 20px;
left: 64px;
}
span.onglet
{
float: left;
}
.navigation
{
left: -26px;
top: 62px;
position: relative;
}
#onglet1
{
color: black;
position: relative;
bottom: 5px;
left: 18px;
}
#onglet2
{
color: black;
position: relative;
bottom: 5px;
left: 18px;
}
#onglet3
{
color: black;
position: relative;
bottom: 5px;
left: 18px;
}
.onglet_deco_news
{
position: absolute;
width: 70px;
height: 26px;
background-color: #ffd6a8;
border-radius: 0 0 20px 20px;
left: 63px;
}
#corps_pa .onglet_deco_news p
{
display: inline;
background-color: #FFD6A8;
color: black;
position: relative;
top: 5px;
cursor: default;
}
.onglet_deco_news p:hover
{
font-weight: bold;
font-style: italic;
}
.onglet_deco_effectifs
{
position: absolute;
width: 70px;
height: 26px;
background-color: #ffd6a8;
border-radius: 0 0 20px 20px;
left: 137px;
}
#corps_pa .onglet_deco_effectifs p
{
display: inline;
background-color: #FFD6A8;
color: black;
position: relative;
top: 5px;
cursor: default;
}
.onglet_deco_effectifs p:hover
{
font-weight: bold;
font-style: italic;
}
.onglet_deco_activites
{
position: absolute;
width: 70px;
height: 26px;
background-color: #ffd6a8;
border-radius: 0 0 20px 20px;
left: 211px;
}
#corps_pa .onglet_deco_activites p
{
display: inline;
background-color: #FFD6A8;
color: black;
position: relative;
top: 5px;
cursor: default;
}
.onglet_deco_activites p:hover
{
font-weight: bold;
font-style: italic;
}
/****** Mise en Forme Ronds Pseudos Staff *****/
.bloc_icones
{
position: relative;
bottom: 52px;
left: 3px;
}
.icone_staff
{
width: 60px;
height: 60px;
background-color: #7dbe98;
border: 2px solid white;
display: inline-block;
border-radius: 30px;
}
#corps_pa .pseudo_staff
{
position: relative;
top: 36px;
width: 57px;
background-color: #5CAA7B;
text-align: center;
transform: rotate(9deg);
color: white;
}
/***** Mise en forme Boutons Partenaires ******/
.bouton_partenaire
{
position: relative;
left: 5px;
bottom: 47px;
vertical-align: top;
margin-bottom: -8px;
}
.separation_partenaire
{
margin-right: 5px;
}
.separation_partenaire:hover
{
margin-right: 5px;
filter: brightness(120%);
-webkit-filter: brightness(120%);
-moz-filter: brightness(120%);
-o-filter: brightness(120%);
-ms-filter: brightness(120%);
}
/****** Ronds de séparation Bloc Contexte ****/
.bloc_ronds_deco_contexte
{
width: 19px;
margin-left: auto;
margin-right: auto;
display: inline;
position: relative;
top: 5px;
}
.rond_deco_contexte
{
width: 10px;
height: 10px;
background-color: grey;
display: inline-block;
border-radius: 30px;
display: inline-block;
}
/******* Ronds de décoration Bloc Liens *****/
.rond_deco_lien
{
width: 10px;
height: 10px;
background-color: grey;
display: inline-block;
border-radius: 30px;
margin-right: 25px;
margin-left: 25px;
}
.position_rond_lien_G
{
position: relative;
right: 20px;
}
.position_rond_lien_D
{
position: relative;
left: 20px;
}
#couleur_jaune
{
background-color: #FFD6A8;
}
#couleur_verte
{
background-color: #7DBE98;
}
#couleur_bleu
{
background-color: #7399AA;
}
/**** Corps PA ****/
#corps_pa
{
background-color: white;
width: 880px;
height: 485px;
padding: 0;
}
/**** En Tête PA ****/
#titre
{
text-align: center;
color: black;
font-family: 'Indie Flower', cursive;
font-size: 33px;
height: 29px;
}
#titre_separation
{
display: block;
width: 523px;
border-top: 2px dotted black;
margin-left: 24px;
}
#nav
{
background-color: white;
margin-left: auto;
margin-right: auto;
width: 536px;
margin-bottom: 35px;
}
#nav a
{
color: black;
}
#nav li
{
display: inline-block;
background-color: white;
margin: 0px 8px;
}
.separation_nav
{
width: 10px;
height: 10px;
background-color: grey;
display: inline-block;
border-radius: 30px;
}
/**** Les trois blocs de séparation ***/
#bloc_left
{
background-color: white;
height: 354px;
width: 295px;
display: inline-block;
}
#bloc_center
{
background-color: white;
display: inline-block;
width: 280px;
vertical-align: top;
height: 354px;
}
#bloc_right
{
background-color: white;
height: 354px;
width: 295px;
display: inline-block;
vertical-align: top;
}
/**** Bloc Gauche ****/
#bloc_news
{
background-color: white;
height: 150px;
width: 275px;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px;
}
#bloc_partenaires
{
background-color: white;
height: 130px;
width: 275px;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
margin-top: 40px;
border-radius: 15px;
}
/***** Bloc Centre *****/
#bloc_predefs_H
{
background-color: white;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 11px;
}
#corps_pa #bloc_contexte
{
background-color: white;
height: 190px;
border: 1px solid black;
}
#bloc_predefs_B
{
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: -4px;
}
/**** Bloc Droite *****/
#bloc_liens
{
background-color: white;
height: 157px;
width: 275px;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px;
}
#bloc_staff
{
background-color: white;
height: 130px;
width: 275px;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
margin-top: 35px;
border-radius: 15px;
}
</style>
- javascript:
- Code:
jQuery() .ready(function() {
$(".bloc_texte").hide();
$("#onglet1").show();
var lastChoice = 1;
$(".navigation").click(function(){
var info_element = $(this).attr('name');
if(info_element){
$('#onglet'+info_element+'').css({display:'block'});
$('#onglet'+lastChoice+'').css({display:'none'});
lastChoice = info_element;
} else {
return;
}
});
});
Créaronds 3:
PA en action !
- js:
[code:1:29da]/*
* verify if coord is not used.
* @param {type} coord
* @param {type} arr
* @returns {Boolean} true if not used, false else
*/
function isNotIn(coord, radius, arr){
for(var i=0;i<arr.length ;i++){
if(( (coord+radius) > arr[i][0])
&& ((coord-radius) < arr[i][1])){
console.log(coord, "is in ",arr[i][0],arr[i][1]);
return false;
}
console.log(coord, "is out ",arr[i][0],arr[i][1], "radius", radius);
}
return true;
}
/*
* gen a random int in randge [0 - dimansion]
* @param {type} dimension a number, higth borne to random
* @returns {Number} int in randge [0 - dimansion]
*/
function genRandomInCanvas(dimension){
return Math.floor(Math.random() * dimension);
}
function placeFree(coord, radius,x,y,maxX,maxY){
if( isNotIn(coord.x, radius, x)){
if ( isNotIn(coord.y, radius, y)){
return coord;
}else{
coord.y= (coord.x*1.75)%maxY;
}
}else{
coord.x= (coord.x*1.75)%maxX;
}
}
/*