Community Of Gamers
Bienvenue sur le forum !
Nous vous souhaitons un agréable moment parmi nous en espérant que vous, vous y plairez !

Cordialement, Le Staff !



 
Accueil  S'enregistrer  Connexion  Adminstration  
Derniers sujets

Partagez
 

 [Page d'acceuille] En trois colonne.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Iron CrazeK
Fondateur du Forum.
Fondateur du Forum.
Iron CrazeK

Messages : 108
Jeton de Gameurs : 1112224287
Réputation : 4
Date d'inscription : 12/09/2014

[Page d'acceuille] En trois colonne. Empty
MessageSujet: [Page d'acceuille] En trois colonne.   [Page d'acceuille] En trois colonne. EmptyLun 3 Nov - 16:31

CODE

Vous devez poster un message à la suite pour afficher le code


PRÉAMBULE



Le code est en trois parties : 


  1. la première qui correspond à un codage HTML est à placer en tant que page d'accueil (Affichage > Page d'accueil > Généralité)

  2. la seconde partie (le CSS) est à placer dans la feuille de style CSS (Affichage > Couleurs > Feuille de style CSS).

  3. et enfin un code simple et court à placer dans la template overall_header (Affichage > Templates > overall_header).

[size]


Les # sont à remplacer par vos liens. 
Les couleurs sont personnalisables à conditions de conserver le crédit -of course- et si vous vous y connaissez un minimum, histoire de ne pas déformer le code. 


[/size]

PREMIÈRE PARTIE • HTML

[size]

Code:Sélectionner le contenuSélectionner le contenu
<div class="center">
    <br />
    <div class="point"></div>
    <a href="#">
        <span class="menu">règlement</span>
    </a> 
    <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351879218-878748748.png" class="space" /> 
    <a href="#">
        <span class="menu">présentation</span>
    </a> 
    <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351879218-878748748.png" class="space" />
    <a href="#">
        <span class="menu">partenariat</span>
    </a>
    <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351879218-878748748.png" class="space" /> 
    <a href="#">
        <span class="menu">infos</span>
    </a>
    <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351879218-878748748.png" class="space" /> 
    <a href="#">
        <span class="menu">autre ?</span>
    </a>
    <br /><br />

    <table>
        <tr>
            <td>
                <div class="blocstaff">
                    <div class="center">
                        <div class="yoo">
                            <span class="titrepa">Le Staff</span>
                        </div>
                    </div><br />

                    <div class="center">
                        <img src="Publicités , Interdites Merci!://25.media.tumblr.Publicités , Interdites Merci!/tumblr_mbsavepfqc1rga9u7o1_250.gif" class="staff" /><br />
                        pseudo  <a href= "lien profil">profil</a> • <a href="lien mp">contacter</a><br />
                        
                        <img src="Publicités , Interdites Merci!://24.media.tumblr.Publicités , Interdites Merci!/tumblr_mbsavepfqc1rga9u7o4_250.gif" class="staff" /><br />
                        pseudo  <a href="lien profil">profil</a> • <a href="lien mp">contacter</a>
                    </div>
                </div>
            </td>

            <td>
                <div class="blocb">
                    <div class="center">
                        <div class="yoo">
                            <span class="titrepa">Bienvenue !</span>
                        </div><br />

                        <div class="textepa">
                            texte de bienvenue ici
                        </div><br />
                    </div>
                </div>
            </td>

            <td>
                <div class="blocpoto">
                    <div class="center">
                        <div class="yoo">
                            <span class="titrepa">Partenariat</span>
                        </div><br />

                        <div class="cpart">
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
                            </a>
                        </div>
                        <a href="#">les autres</a> • <a href="#">demande</a>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <div class="blocredit">
                    <div class="center">
                        <div class="yoo">
                            <span class="titrepa">Crédits</span>
                        </div>
                    </div><br />
                    <span class="textc">Crédit ici<br />
                    Et ici aussi (ne pas retirer le logo du forum et mon pseudo svp)<br />
                    Page d'accueil réalisée par ABSOLUTE.SUNSHINE</span><br />

                    <div class="center">
                        <a href="Publicités , Interdites Merci!://www.css-actif.Publicités , Interdites Merci!/"><img src="Publicités , Interdites Merci!://files.cssactif.Publicités , Interdites Merci!/logos/css-actif-8831.gif" border="0" /></a>
                    </div>
                </div>
            </td>

            <td>
                <div class="blocnews">
                    <div class="center">
                        <div class="yoo">
                            <span class="titrepa">Nouveautés</span>
                        </div>
                    </div>
                    00/00/00 • nouveauté ici<br />
                    00/00/00 • nouveauté ici<br />
                    00/00/00 • nouveauté ici<br />
                    00/00/00 • nouveauté ici<br />
                    00/00/00 • nouveauté ici<br />
                    00/00/00 • nouveauté ici<br />
                    <br />
                </div>
            </td>

            <td>
                <div class="bloctop">
                    <div class="center">
                        <div class="yoo">
                            <span class="titrepa">Top sites</span>
                        </div>

                        <div class="ctop">
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
                            </a> 
                            <a href="#">
                                <img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
                            </a>
                        </div>un vote toutes les deux heures ~
                    </div>
                </div>
            </td>
        </tr>
    </table>



[/size]

SECONDE PARTIE • CSS

[size]

Code:Sélectionner le contenuSélectionner le contenu
/* espace pour le menu*/
.space {
  width:6px;
  height:2px;
}
/* fin espace menu* /

/* staff presenté de manière simple avec uniquement une bordure */
.staff {
  width:200px;
  height:70px;
  padding:2px;
  border:1px solid #CABCAB;
}
/* fin staff */

/* top sites aux formes automatiquement arrondis */
.tops {
  width:60px;
  height:60px;
  border:2px solid #E4DED6;
  opacity:0.8;
  -webkit-border-radius: 120px;
  -moz-border-radius: 120px;
  border-radius: 120px;
  -webkit-transform: rotate(2deg) ;
  -moz-transform: rotate(2deg) ;
  -o-transform: rotate(2deg) ;
  -ms-transform: rotate(2deg) ;
  transform: rotate(2deg) ;
}
/* fin top sites */

/* propriétés communes aux blocs */
.blocstaff,
.blocb,
.blocpoto,
.blocredit,
.blocnews,
.bloctop {
  text-align:justify;
  font-family : Verdana;
  font-size:11px;
  color:#858585;
  letter-spacing: 1px;
  padding:3px;
  background-color:#ECEAE8;  
  border-left:3px solid #B7A49B;
  border-right:3px solid #B7A49B;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow:white 1px 1px 0,0 0 3px #E4DED6;
  -webkit-box-shadow:white 1px 1px 0,0 0 3px #E4DED6;
  box-shadow:1px 1px 0 white,0 0 3px #E4DED6;
}
/* fin propriétés communes */

/* bloc staff */
.blocstaff{
  width:230px;
  height:240px;
}
/* fin bloc staff */

/* bloc bienvenue*/
.blocb{
  width:340px;
  height:240px;  
}
/* fin bloc bienvenue */

/* bloc partenariat*/
.blocpoto{
  width:190px;
  height:240px;

}
/* fin bloc partenariat */

/* centre les logos partenaires */
.cpart {
  width:98%;
  height:150px;
  overflow:auto;
}
/* fin logo partenaires */

/* bloc crédit  */
.blocredit{
  width:230px;
  height:200px;
}
/* fin bloc crédit */

/* crédit texte */
.textc {
  font-size:10px;
}
/* fin crédit texte */

/* bloc nouveauté */
.blocnews {
  width:340px;
  height:200px;
}
/* fin bloc nouveauté  */

/* bloc topsites */
.bloctop {
  width:190px;
  height:200px;
}
/* fin bloc topsites */

/* centre logo tops*/
.ctop{
  width:98%;
  height:135px;
  overflow:auto;
}
/* fin centre logo tops */

/* les titres avec pour police Kite One */
.titrepa {
  font-family: 'Kite One', sans-serif;
  font-size:27px;
  color:#B7A49B;
}
/* fin titre */

/* petits points sous les titres */
.yoo {
  border-bottom:1px dotted white;
}
/* fin points sous titres */

/* les liens rapides tout n haut de la PA */
.menu {
  color:#F8F7F6;
  letter-spacing: 1px;
  font-variant:small-caps;
  font-size:11px; 
  padding:2px;
  padding-left:4px;
  padding-right:4px;
  background-color:#CABCAB;
  border-left:3px solid #F2F2F2;
  border-right:3px solid #F2F2F2;  
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
}
/* fin liens rapides */

/* les pointillés dérrière le menu à peut-être adapter selon le forum */
.point {
  border-top:8px dotted #F2F2F2;
  margin-bottom:-10px;
}
/* fin pointillés */

/* simple texte qui se trouve dans les tables pour ne pas deborder */
.textepa {
  width:90%;
  height:180px;
  overflow:auto;
}
/* fin texte */

/* les logos des partenaires dont l'opacité augmente au survol de la souris */
.potos {
  width:88px;
  height:31px;  
  opacity:0.5;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
}

.potos:hover {
  opacity:0.7;
}
/* fin logos partenaires */


[/size]

DERNIÈRE PARTIE • TEMPLATE

[size]

Enfin, pour cette partie, modifiez donc votre template overall_header en repérant les lignes suivantes :
Code:Sélectionner le contenuSélectionner le contenu
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />

Placer le code suivant au-dessus de 
[/size]
Code:
{T_HEAD_STYLESHEET}
[size]
 :
Code:Sélectionner le contenuSélectionner le contenu
 <link href='Publicités , Interdites Merci!://fonts.googleapis.Publicités , Interdites Merci!/css?family=Kite+One' rel='stylesheet' type='text/css' />


[/size]

_________________
Fondateur du Forum!

[Page d'acceuille] En trois colonne. Rank-admin
Revenir en haut Aller en bas
https://jeux-games.forumactif.com
 

[Page d'acceuille] En trois colonne.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Colonne vertébrale
» presentation
» Votre Beauté
» Le Havre - Rue de l'Épine des Trois Pierres > Gustave Brindeau
» Geneanet : disparition de l'affichage des tableaux de parentés sur une même page !

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Community Of Gamers :: Apprentissage :: Apprentissage des Languages Html :: Le Language [ Css]-