Bonjour tout le monde,
Voici mon premier LS de PA suite à la demande de Lisou, faite ici.
Ce code-ci est à insérer dans une page html (PA>Modules>Pages HTML>Créer)
Une fois que tu as enregistré ta page web (copie/colle l'adresse internet de celle-ci quelque part, car tu vas en avoir besoin), il te suffit de te rendre sur ta page d'accueil, et de coller le code pour insérer une iframe, à savoir :
Et tu auras ainsi ta belle Page d'accueil toute fonctionnelle :)
LS ~ PA sobre et noire :
Voici mon premier LS de PA suite à la demande de Lisou, faite ici.
Découvrez un aperçu de cette PA en ligne:
www - et en image
www - et en image
La PA contient en elle-même :
- Une zone titre.
- Une navigation principale.
- Une zone "contexte" scrollable.
- Une zone "News Spéciale"
- Une zone "Choses à savoir" cachée par une image.
- Un espace membres du mois
- Un espace "news" scrollable.
- Un espace prédéfinis/recherches.
- Un espace Staff + liens profil & mp.
- Une zone partenaires, avec défilement possible.
Vos commentaires et remerciements envers le demandeur et le codeur sont toujours bienvenus ^^
Ce code-ci est à insérer dans une page html (PA>Modules>Pages HTML>Créer)
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Pa-Lisou</title>
<style>
/* ajustements personnels */
/* stylisation paragraphe contexte + choses à savoir : */
#pa {
font-family: sans-serif;
font-size: 12px;
position: relative;
}
/* stylisation titres */
#pa h2 {
font-family: sans-serif;
font-size: 14px;
text-transform: uppercase;
text-align: center;
font-style: italic;
margin-bottom: 10px !important; /* = espace sous les titres */
}
/* stylisation liens de toute la PA */
#pa a{
text-decoration: none;
color: gray;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#pa a:hover{
text-decoration: none;
color: black;
}
/* stylisation format date des news */
.date {
font-weight: bold;
color: gray;
font-size: 11px;
text-transform: uppercase;
}
/* stylisation liens menu */
ul#menu a {
text-decoration: none;
color: #000;
letter-spacing: 0px;
font-size: 16px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
ul#menu a:hover {
letter-spacing: 2px;
font-weight: bold;
}
/* stylisation pseudo "staff" */
.pseudo {
margin: 5px 0px;
font-weight: bold;
font-size: 110%;
}
/* normalize */
#pa h1,#pa h2,#pa h3,#pa h4,#pa h5,#pa h6, ul, p { margin: 0; padding: 0; font-weight: normal;}
/* GÉNÉRAL */
#pa {
width: 800px; margin: 0 auto;
border: 5px solid black;
}
#pa h1 {
width: 100%;
height: 50px; line-height: 50px;
text-align: center;
}
#container {
width: 780px; margin: 20px auto 10px;
overflow: hidden;
}
.left {
width: 620px;
float: left; margin-right: 10px;
min-height: 150px;
}
.right {
width: 126px; height: 421px;
border: 2px solid #000;
float: left;
padding: 10px;
}
/* MENU */
ul#menu {
width: 100%;
padding: 5px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
list-style-type: none;
text-align: center;
text-transform: uppercase;
}
ul#menu li{
display: inline-block;
margin: 0;
padding: 0 !important;
}
ul#menu li:after {
content: "—";
padding: 0 15px;
}
ul#menu li:last-child:after {
content: "";
padding: 0px;
}
/* contexte */
#contexte {
width: 596px; max-width: 596px;
height: 136px; max-height:136px;
padding: 10px; margin-bottom: 10px;
border: 2px solid black;
}
img.contexteimg {
width: 160px; height: 140px;
margin: 0 10px 0 0;
float: left;
}
.texte-contexte {
width: 410px; height: 140px;
padding-right: 15px; /* espace pour scrollbar */
float: left; text-align: justify;
overflow-y: auto; /* scrolling */
}
.texte-contexte p{ margin-bottom: 20px;}
.texte-contexte p:last-child{ margin-bottom: 0px;}
/* NEWS & CHOSES SE PASSANT */
.twocols {
float: left;
width: 281px; height: 81px;
border: 2px solid #000;
margin-right: 10px;
padding: 10px;
position: relative;
overflow: hidden;
}
.twocols:nth-child(even) {
margin-right: 0px;
}
.news img { width: 100%; height: auto;}
.choses img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 105px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
z-index: 1;
}
.choses:hover img {
/* Pour faire disparaitre l'image au survol */
position: absolute;
width: 100%; height: 0px;
top: 52.5px; left: 0;
}
.choses p {
/* Positionnement du texte sous l'image + scroll */
position: absolute; top: 0; left: 0;
padding: 10px;
width: 285px; height: 85px;
overflow-y: auto;
z-index: 0;
}
/* MEMBRES + NEWS + RECHERCHES */
.threecols {
float: left;
width: 156px; height: 136px;
border: 2px solid #000;
margin-right: 10px;
padding: 10px;
position: relative;
}
.threecols:nth-child(2) {
width: 216px;
}
.threecols:last-child {
margin-right: 0px;
}
.memberofthemonth {
width: 156px; height: 115px;
}
.mom {
float: left;
width: 75px;
margin-right: 6px;
text-align: center;
}
.mom .pseudo { font-weight: bold;}
.mom:nth-child(2), .research a:nth-child(odd) {
margin-right: 0px;
}
.mom img {
width: 100%; height: auto;
}
.newscontent {
height: 110px;
overflow-y: auto;
}
.nouvelle {
margin: 5px 0px;
border-bottom: 1px dotted #000;
padding-bottom: 5px;
}
.research {text-align: center;}
.research a {
display: inline-block;
width: 50px;
height: 50px;
background: orange;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
}
.research a img{
width: 50px; height: 50px;
}
/* STAFFS */
.contentstaff {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.contentstaff img {
width: 100%; height: auto;
}
/* PARTENAIRES */
#footer {
clear: both;
width: 100%;
padding-top: 10px !important;
}
#footer img {
width: 50px; height: 50px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#footer img:hover {
-webkit-animation-origin: center center;
-moz-animation-origin: center center;
-ms-animation-origin: center center;
-o-animation-origin: center center;
animation-origin: center center;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
#credits {
position: absolute;
bottom: -20px; right: 0;
}
</style>
</head>
<body>
<div id="pa">
<h1>Titre du forum</h1>
<ul id="menu">
<li><a href="">Lien 1</a></li>
<li><a href="">Lien 2</a></li>
<li><a href="">Lien 3</a></li>
<li><a href="">Lien 4</a></li>
<li><a href="">Lien 5</a></li>
<li><a href="">Lien 6</a></li>
</ul>
<div id="container">
<div class="left">
<!-- ESPACE CONTEXTE -->
<div id="contexte">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/imgcon10.png" alt="" class="contexteimg">
<div class="texte-contexte">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, in, nulla, pariatur tempore aut fuga consectetur asperiores error quisquam corporis a fugiat expedita itaque. Ea, debitis optio nisi quae eligendi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, minus, asperiores, ab quos omnis dolor nulla consequuntur vitae vel ipsa amet obcaecati dolorem possimus tempore quo corporis corrupti fugit incidunt?</p>
</div>
</div>
<!-- ESPACE NEWS ET CHOSES SE PASSANT -->
<div style="overflow: hidden; margin-bottom: 10px;">
<div class="twocols news">
NEWS
</div>
<div class="twocols choses">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/imgcho10.png" alt="Image Choses se passant" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, quasi placeat quo laborum odio deleniti expedita explicabo ipsa dignissimos nihil aspernatur alias velit ipsum amet consequuntur fuga atque. Quis, sed.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, quod, eaque asperiores ratione non minus labore debitis deserunt laborum at perspiciatis eveniet obcaecati laboriosam minima perferendis dignissimos commodi incidunt accusamus!</p>
</div>
</div>
<!-- ESPACE MEMBRES + NEWS + RECHERCHONS -->
<div style="overflow: hidden;">
<div class="threecols">
<h2>Membres du mois</h2>
<div class="memberofthemonth">
<p class="mom">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten12.png" alt="">
<span class="pseudo">Machin</span><br>
Rang
</p>
<p class="mom">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten12.png" alt="">
<span class="pseudo">Machin</span><br>
Rang
</p>
</div>
</div>
<div class="threecols">
<h2>Nouveautés</h2>
<div class="newscontent">
<div class="nouvelle">
<div class="date">xx-xx-xxxx :</div>
Lorem ipsum dolor sit amet.
</div>
<div class="nouvelle">
<div class="date">xx-xx-xxxx :</div>
Lorem ipsum dolor sit amet.
</div>
<div class="nouvelle">
<div class="date">xx-xx-xxxx :</div>
Lorem ipsum dolor sit amet.
</div>
<div class="nouvelle">
<div class="date">xx-xx-xxxx :</div>
Lorem ipsum dolor sit amet.
</div>
<div class="nouvelle">
<div class="date">xx-xx-xxxx :</div>
Lorem ipsum dolor sit amet.
</div>
<div class="nouvelle">
<div class="date">xx-xx-xxxx :</div>
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
<div class="threecols research">
<h2>Nous recherchons</h2>
<a href="">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt=""></a>
<a href="">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt=""></a>
<a href="">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt=""></a>
<a href="">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt=""></a>
</div>
</div>
</div> <!-- END COLONNE "LEFT" -->
<div class="right">
<h2>Staff</h2>
<div class="contentstaff">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/imgsta11.png" alt="">
<div class="pseudo">PSEUDO</div>
<a href="">MP</a> -
<a href="">PROFIL</a>
</div>
<div class="contentstaff">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/imgsta11.png" alt="">
<div class="pseudo">PSEUDO</div>
<a href="">MP</a> -
<a href="">PROFIL</a>
</div>
<div class="contentstaff">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/imgsta11.png" alt="">
<div class="pseudo">PSEUDO</div>
<a href="">MP</a> -
<a href="">PROFIL</a>
</div>
</div> <!-- END COLONNE "RIGHT" -->
<div id="footer" style="text-align: center;">
<!-- <marquee behavior="" direction="right" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="1"> -->
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<a href="Lien-Partenaires" target="_blank">
<img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
<!-- marquee -->
</div>
</div>
<div id="credits">
PA réalisée sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
</div>
</div>
</body>
</html>
Insertion sur la page d'accueil :
Une fois que tu as enregistré ta page web (copie/colle l'adresse internet de celle-ci quelque part, car tu vas en avoir besoin), il te suffit de te rendre sur ta page d'accueil, et de coller le code pour insérer une iframe, à savoir :
- Code:
<iframe style="width: 810px; height: 635px;" scrolling="no" frameborder="0" src="HTTP://ADRESSE-DE-TA-PAGE-HTML-RECEMMENT-CREE"></iframe>
Et tu auras ainsi ta belle Page d'accueil toute fonctionnelle :)
Les trucs personnalisables sont au début du code après les commentaires "stylisation".. Ne pas toucher aux largeurs/border/hauteur etc!
Merci de ne pas toucher aux crédits envers Never-Utopia.
Merci de ne pas toucher aux crédits envers Never-Utopia.
Une question ?
Je serai ravi de vous y répondre là-bas : problème avec votre code.
