Sujets similaires

Dernière édition par Merry le Sam 29 Sep 2012, 13:19, édité 2 fois

Sujet: Re: Question page d'accueil -Problème résolu Ven 21 Sep 2012, 20:18

Salut!

Comme stipulé dans l'article d'aide, on ne peut pas t'aider juste avec des explications comme ça. Des codes, ça parle bien plus Wink

Donc CSS, HTML, et un lien vers ton forum, des croquis si tu en as pourraient être utiles aussi si tu en as.

Sujet: Re: Question page d'accueil -Problème résolu Sam 22 Sep 2012, 02:37

Voici le CSS:

Code:: /* PAGE D'ACCUEIL PAR ORANGE DE CSSACTIF (http://css-actif.com/)
MERCI DE NE PAS RETIRER CETTE MENTION, PAR RESPECT. */
/* Mise en forme générale */
.cssactif_pa_main {
width: 800px;
padding: 30px;
margin: 0 auto;
}

.cssactif_pa_main h1 { /* Titre principal (Bienvenue sur...) */
font-family: "Courier New", Courier, monospace; /* Police de caractère */
text-align: center; /* Alignement du texte */
text-transform: uppercase; /* Transformation: met le texte en majuscules */
font-weight: normal; /* Épaisseur normale */
letter-spacing: 16px; /* Espacemement des caractères en PX */
font-size: 32px; /* Grosseur du texte */
color: #870000; /* Couleur du texte */
text-shadow: 0px 3px 3px #000000; /* Ombre du texte */
}

.cssactif_pa_main h2 { /* Titre des colonnes (Contexte, Nouveautés etc.) */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
font-weight: normal; /* Épaisseur normale */
color: #FFFFFF; /* Couleur du texte */
text-transform: uppercase; /* Transformation: met le texte en majuscules */
text-shadow: 1px 1px 1px #000000; /* Ombre du texte */
font-size: 18px; /* Grosseur du texte */
margin:0;
}

.cssactif_pa_colonne { /* Style général des colonnes */
float: left; /* Place les colonnes un à côté de l'autre */
width: 33%; /* Donne la grandeur des colonnes */
background-color: #FFFFFF; /* Couleur de fond */
height: 400px; /* Hauteur des colonnes: doit être fixe */
color: #777777; /* Couleur du texte */

opacity: 0.9; /* Opacité des colonnes */

/* Transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

/*Ombre porté */
-webkit-box-shadow: 0px 0px 1px 0px #CCCCCC;
box-shadow: 0px 0px 1px 0px #CCCCCC;}

.cssactif_pa_colonne p { /* Paragraphe des colonnes */
padding: 0 10px; /* Padding */
text-indent: 10px; /* Alinéa */
text-align: justify; /* Alignement du texte */
}
.cssactif_pa_colonne:hover { /* Colonne au survol */
/* Effet de grossissement */
-moz-transform: scale(1.05) translate(0px, -20px) ;
-webkit-transform: scale(1.05) translate(0px, -20px) ;
-o-transform: scale(1.05) translate(0px, -20px) ;
-ms-transform: scale(1.05) translate(0px, -20px);
transform: scale(1.05) translate(0px, -20px) ;

opacity: 1; /* Opacité */

/* Nouvelle ombre portée */
-webkit-box-shadow: 0px 5px 10px 0px #CCCCCC;
box-shadow: 0px 5px 10px 0px #CCCCCC;
z-index: 999;}

.cssactif_pa_header { /* Style commun des header de couleur */
padding: 10px;
height: 80px;
}

.cssactif_pa_header p { /* Style du description dans les headers */
margin: 5px; /* Marge */
padding: 0; /* Padding */
color: #FFFFFF; /* Couleur du texte */
text-shadow: 1px 1px 1px #000000; /* Ombre portée */
font-style: italic; /* Style italic */
opacity: 0.8; /* Opacity du texte */
}

.colgauche .cssactif_pa_header {background-color: #01c6d9;} /* Colonne de gauche, couleur du header */
.colcentre .cssactif_pa_header {background-color: #d9015d;}/* Colonne du centre, couleur du header */
.coldroite .cssactif_pa_header {background-color: #7fbf33; } /* Colonne de droite, couleur du header */

/* Contenu des colonnes */

.new {
margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
padding: 5px; /* Padding */
border-bottom: 1px solid #d9015d; /* Bordure du séparateur */

text-align: justify; /* Alignement du texte */
}

.new em { /* Dates */
color: #d9015d; /* Couleur du texte */
text-transform: uppercase; /* Transformation du texte en majuscule */
font-style: normal; /* Enlève le italic par défaut de la balise em */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
}

.new em:after {
content: " ►"; /* Ajoute la flèche après les dates */
}

.pers { /* Cadre des personnages */
border: 1px solid #7fbf33; /* Bordure des personnages */
margin: 10px; /* marge externe */

/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

padding: 3px; /* Marge interne */
text-align: center; /* Alignement du texte */}

.pers img { /* Image des personnages */
float: left; /* Place à gauche du texte */
width: 50px; /* Grandeur de l'image */
height: 50px; /* Grandeur de l'image */
border: 3px solid #7fbf33; /* Bordure de l'image */

/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* Transformation */
-moz-transform: rotate(-12deg) translate(0px, -5px) ;
-webkit-transform: rotate(-12deg) translate(0px, -5px) ;
-o-transform: rotate(-12deg) translate(0px, -5px) ;
-ms-transform: rotate(-12deg) translate(0px,-5px) ;
transform: rotate(-12deg) translate(0px, -5px); }

.pers:first-line { /* Première ligne:contient le nom du personnage */
color: #7fbf33;/* Couleur du texte */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
text-transform: uppercase; /* Transformation du texte */
}

Et le HTML:

Code:: <div class="cssactif_pa_main">
<h1>Bienvenue sur</br>Night in the City</h1><div><div class="cssactif_pa_colonne colgauche">
<div class="cssactif_pa_header">
<h2>Concept</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. Donec sed velit ac turpis sagittis consectetur. Morbi lacinia auctor lectus vel lacinia. Nullam quis mauris sem, non laoreet est. Aenean pretium adipiscing tellus vel porttitor. Nam sit amet mi enim. In nulla turpis, dapibus in iaculis non, mollis ac lorem.</p>
<p> Ut sollicitudin sem vel ligula pulvinar vehicula. Aliquam sagittis risus adipiscing nisi placerat ac bibendum nisi tincidunt. Maecenas imperdiet, dolor eu elementum dapibus, leo elit dapibus orci, ut ornare purus purus at nisl. Praesent consectetur tincidunt neque id vulputate.</p>
</div>
<div class="cssactif_pa_colonne colcentre">

<div class="cssactif_pa_header">
<h2>Nouveautés</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
</div>
<div class="new"><em>14/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>05/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>23/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>21/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
</div>
<div class="cssactif_pa_colonne coldroite">

<div class="cssactif_pa_header">
<h2>Staff</h2>
<p>Voici les personnes qui sont responsables du forum et de son bon fonctionnement.</p>
</div>
<div class="pers">
<img src="http://img15.hostingpics.net/pics/741622Merry.png">
Merry Pumpkins<br>
Fondatrice<br>
<a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=1">MP</a> / <a href="http://nightinthecity.keuf.net/u1">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
S. Castiel Lockhart<br>
Administratrice<br>
<a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=2">MP</a> / <a href="http://nightinthecity.keuf.net/u2">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
James Moore<br>
Modérateur<br>
<a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=7">MP</a> / <a href="http://nightinthecity.keuf.net/u7">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="#pv1">MP</a> / <a href="#pv1">Profil</a>
</div>

</div>

</div>
</div><div><div class="cssactif_pa_colonne colgauche">
<div class="cssactif_pa_header">
<h2>Concept</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. Donec sed velit ac turpis sagittis consectetur. Morbi lacinia auctor lectus vel lacinia. Nullam quis mauris sem, non laoreet est. Aenean pretium adipiscing tellus vel porttitor. Nam sit amet mi enim. In nulla turpis, dapibus in iaculis non, mollis ac lorem.</p>
<p> Ut sollicitudin sem vel ligula pulvinar vehicula. Aliquam sagittis risus adipiscing nisi placerat ac bibendum nisi tincidunt. Maecenas imperdiet, dolor eu elementum dapibus, leo elit dapibus orci, ut ornare purus purus at nisl. Praesent consectetur tincidunt neque id vulputate.</p>
</div>
<div class="cssactif_pa_colonne colcentre">

<div class="cssactif_pa_header">
<h2>Nouveautés</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
</div>
<div class="new"><em>14/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>05/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>23/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>21/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
</div>
<div class="cssactif_pa_colonne coldroite">

<div class="cssactif_pa_header">
<h2>Staff</h2>
<p>Voici les personnes qui sont responsables du forum et de son bon fonctionnement.</p>
</div>
<div class="pers">
<img src="http://img15.hostingpics.net/pics/741622Merry.png">
Merry Pumpkins<br>
Fondatrice<br>
<a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=1">MP</a> / <a href="http://nightinthecity.keuf.net/u1">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
S. Castiel Lockhart<br>
Administratrice<br>
<a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=2">MP</a> / <a href="http://nightinthecity.keuf.net/u2">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
James Moore<br>
Modérateur<br>
<a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=7">MP</a> / <a href="http://nightinthecity.keuf.net/u7">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="#pv1">MP</a> / <a href="#pv1">Profil</a>
</div>

</div>

</div>
</div>

Je ne sais pas quelles sont les class que je dois modifier pour me charger des 3 colonnes de la deuxième lignes x) J'avais remplacé .pers par .staff, mais... Rien à faire xD

Sujet: Re: Question page d'accueil -Problème résolu Mer 26 Sep 2012, 10:19

Ta question n'est pas claire : modifier le contenu des 3 colonnes ? Concrètement, pour moi là, le contenu c'est le texte qui est à l'intérieur...

Je pars donc du principe que tu souhaites simplement faire une deuxième rangée alignée en dessous Smile

Hmmmm au jugé j'imagine que tu as du copier/coller le code en dessous... Puis tu t'es rendu compte que le titre était répété, alors tu l'as supprimé purement et simplement...
Mais comme tu n'as pas bien regardé le code que tu as copié/collé, tu as eu la main un peu lourde et tu as créé la nouvelle rangée au pif... en fermant une balise de trop Question page d'accueil -Problème résolu 1616978029

Question page d'accueil -Problème résolu 1616978029

Les colonnes doivent être contenues dans <div class="cssactif_pa_main">, or tu as fermé cette balise avant de créer ta deuxième rangée.
Je te conseille donc d'indenter ton code. Ca permet de mieux s'y repérer et de ne pas se faire avoir par des petites balises traitres comme celles-ci !

Voici ce que ça donnerait donc, pour l'instant :

Code:: <div class="cssactif_pa_main">
<h1>Bienvenue sur</br>Night in the City</h1>
<div>
   <div class="cssactif_pa_colonne colgauche">
      <div class="cssactif_pa_header">
         <h2>Concept</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. Donec sed velit ac turpis sagittis consectetur. Morbi lacinia auctor lectus vel lacinia. Nullam quis mauris sem, non laoreet est. Aenean pretium adipiscing tellus vel porttitor. Nam sit amet mi enim. In nulla turpis, dapibus in iaculis non, mollis ac lorem.</p>
      <p> Ut sollicitudin sem vel ligula pulvinar vehicula. Aliquam sagittis risus adipiscing nisi placerat ac bibendum nisi tincidunt. Maecenas imperdiet, dolor eu elementum dapibus, leo elit dapibus orci, ut ornare purus purus at nisl. Praesent consectetur tincidunt neque id vulputate.</p>
   </div>

   <div class="cssactif_pa_colonne colcentre">
      <div class="cssactif_pa_header">
         <h2>Nouveautés</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
      </div>
      <div class="new"><em>14/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
      <div class="new"><em>05/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
      <div class="new"><em>23/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
      <div class="new"><em>21/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
   </div>

   <div class="cssactif_pa_colonne coldroite">
      <div class="cssactif_pa_header">
         <h2>Staff</h2>
         <p>Voici les personnes qui sont responsables du forum et de son bon fonctionnement.</p>
      </div>
      <div class="pers">
         <img src="http://img15.hostingpics.net/pics/741622Merry.png">
         Merry Pumpkins<br>
         Fondatrice<br>
         <a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=1">MP</a> / <a href="http://nightinthecity.keuf.net/u1">Profil</a>
      </div>
      <div class="pers">
         <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
         S. Castiel Lockhart<br>
         Administratrice<br>
         <a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=2">MP</a> / <a href="http://nightinthecity.keuf.net/u2">Profil</a>
      </div>
      <div class="pers">
         <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
         James Moore<br>
         Modérateur<br>
         <a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=7">MP</a> / <a href="http://nightinthecity.keuf.net/u7">Profil</a>
      </div>
      <div class="pers">
         <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
         Prénom & nom<br>
         Groupe<br>
         <a href="#pv1">MP</a> / <a href="#pv1">Profil</a>
      </div>
   </div>
</div>

<div>
   <div class="cssactif_pa_colonne colgauche">
      <div class="cssactif_pa_header">
         <h2>Concept</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. Donec sed velit ac turpis sagittis consectetur. Morbi lacinia auctor lectus vel lacinia. Nullam quis mauris sem, non laoreet est. Aenean pretium adipiscing tellus vel porttitor. Nam sit amet mi enim. In nulla turpis, dapibus in iaculis non, mollis ac lorem.</p>
      <p> Ut sollicitudin sem vel ligula pulvinar vehicula. Aliquam sagittis risus adipiscing nisi placerat ac bibendum nisi tincidunt. Maecenas imperdiet, dolor eu elementum dapibus, leo elit dapibus orci, ut ornare purus purus at nisl. Praesent consectetur tincidunt neque id vulputate.</p>
   </div>

   <div class="cssactif_pa_colonne colcentre">
      <div class="cssactif_pa_header">
         <h2>Nouveautés</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
      </div>
      <div class="new"><em>14/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
      <div class="new"><em>05/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
      <div class="new"><em>23/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
      <div class="new"><em>21/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
   </div>

   <div class="cssactif_pa_colonne coldroite">
      <div class="cssactif_pa_header">
         <h2>Staff</h2>
         <p>Voici les personnes qui sont responsables du forum et de son bon fonctionnement.</p>
      </div>
      <div class="pers">
         <img src="http://img15.hostingpics.net/pics/741622Merry.png">
         Merry Pumpkins<br>
         Fondatrice<br>
         <a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=1">MP</a> / <a href="http://nightinthecity.keuf.net/u1">Profil</a>
      </div>
      <div class="pers">
         <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
         S. Castiel Lockhart<br>
         Administratrice<br>
         <a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=2">MP</a> / <a href="http://nightinthecity.keuf.net/u2">Profil</a>
      </div>
      <div class="pers">
         <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
         James Moore<br>
         Modérateur<br>
         <a href="http://nightinthecity.keuf.net/privmsg?mode=post&u=7">MP</a> / <a href="http://nightinthecity.keuf.net/u7">Profil</a>
      </div>
      <div class="pers">
         <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
         Prénom & nom<br>
         Groupe<br>
         <a href="#pv1">MP</a> / <a href="#pv1">Profil</a>
      </div>
   </div>
</div>
</div>

Sujet: Re: Question page d'accueil -Problème résolu Sam 29 Sep 2012, 13:02

D'accord, mais dois-je modifier les ID pour pouvoir modifier le reste ?
Exemple: remplacer un .pers (de la deuxième ligne) pour .quelquechose ?
Où ce n'est pas possible à cause des autres balises ? x___x

Et merci, je ne savais pas que cette div servait de "conteneur". x)

Edit. Merci de m'avoir aidé =3 J'ai trouvé comment modifier ^w^ Calins

Sujet: Re: Question page d'accueil -Problème résolu Sam 29 Sep 2012, 14:12

Hello (:
Dans un premier temps, merci d'avoir signalé que ton problème était résolu Question page d'accueil -Problème résolu 926145

Cependant peut-être que tu peux nous fournir ta solution afin d'aider éventuellement d'autres membres avec le même problème (:
Merci d'avance Question page d'accueil -Problème résolu 926145

Sujet: Re: Question page d'accueil -Problème résolu Lun 01 Oct 2012, 04:31

Css:

Code:: /* PAGE D'ACCUEIL PAR ORANGE DE CSSACTIF (http://css-actif.com/)
MERCI DE NE PAS RETIRER CETTE MENTION, PAR RESPECT. */
/* Mise en forme générale */
.cssactif_pa_main {
width: 800px;
padding: 30px;
margin: 0 auto;
}

.cssactif_pa_main h1 { /* Titre principal (Bienvenue sur...) */
font-family: "Courier New", Courier, monospace; /* Police de caractère */
text-align: center; /* Alignement du texte */
text-transform: uppercase; /* Transformation: met le texte en majuscules */
font-weight: normal; /* Épaisseur normale */
letter-spacing: 16px; /* Espacemement des caractères en PX */
font-size: 32px; /* Grosseur du texte */
color: #870000; /* Couleur du texte */
text-shadow: 0px 3px 3px #000000; /* Ombre du texte */
}

.cssactif_pa_main h2 { /* Titre des colonnes (Contexte, Nouveautés etc.) */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
font-weight: normal; /* Épaisseur normale */
color: #FFFFFF; /* Couleur du texte */
text-transform: uppercase; /* Transformation: met le texte en majuscules */
text-shadow: 0px 2px 2px #000000; /* Ombre du texte */
font-size: 18px; /* Grosseur du texte */
margin:0;
}

.cssactif_pa_colonne { /* Style général des colonnes */
float: left; /* Place les colonnes un à côté de l'autre */
width: 33%; /* Donne la grandeur des colonnes */
background-color: #FFFFFF; /* Couleur de fond */
height: 400px; /* Hauteur des colonnes: doit être fixe */
color: #777777; /* Couleur du texte */

opacity: 0.9; /* Opacité des colonnes */

/* Transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

/*Ombre porté */
-webkit-box-shadow: 0px 0px 1px 0px #CCCCCC;
box-shadow: 0px 0px 1px 0px #CCCCCC;}

.cssactif_pa_colonne p { /* Paragraphe des colonnes */
padding: 0 10px; /* Padding */
text-indent: 10px; /* Alinéa */
text-align: justify; /* Alignement du texte */
}
.cssactif_pa_colonne:hover { /* Colonne au survol */
/* Effet de grossissement */
-moz-transform: scale(1.05) translate(0px, -20px) ;
-webkit-transform: scale(1.05) translate(0px, -20px) ;
-o-transform: scale(1.05) translate(0px, -20px) ;
-ms-transform: scale(1.05) translate(0px, -20px);
transform: scale(1.05) translate(0px, -20px) ;

opacity: 1; /* Opacité */

/* Nouvelle ombre portée */
-webkit-box-shadow: 0px 5px 10px 0px #000000;
box-shadow: 0px 5px 10px 0px #000000;
z-index: 999;}

.cssactif_pa_header { /* Style commun des header de couleur */
padding: 10px;
height: 80px;
}

.cssactif_pa_header p { /* Style du description dans les headers */
margin: 5px; /* Marge */
padding: 0; /* Padding */
color: #FFFFFF; /* Couleur du texte */
text-shadow: 1px 1px 1px #000000; /* Ombre portée */
font-style: italic; /* Style italic */
opacity: 0.8; /* Opacity du texte */
}

.colgauche .cssactif_pa_header {background-color: #B60808;} /* Colonne de gauche, couleur du header */
.colcentre .cssactif_pa_header {background-color: #5D0000;}/* Colonne du centre, couleur du header */
.coldroite .cssactif_pa_header {background-color: #B60808; } /* Colonne de droite, couleur du header */
.col2gauche .cssactif_pa_header {background-color: #5D0000;} /* Colonne de gauche, couleur du header */
.col2centre .cssactif_pa_header {background-color: #440000;}/* Colonne du centre, couleur du header */
.col2droite .cssactif_pa_header {background-color: #5D0000; } /* Colonne de droite, couleur du header */

/* Contenu des colonnes */

.new {
margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
padding: 5px; /* Padding */
border-bottom: 1px solid #d9015d; /* Bordure du séparateur */

text-align: justify; /* Alignement du texte */
}

.new em { /* Dates */
color: #d9015d; /* Couleur du texte */
text-transform: uppercase; /* Transformation du texte en majuscule */
font-style: normal; /* Enlève le italic par défaut de la balise em */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
}

.new em:after {
content: " †"; /* Ajoute la flèche après les dates */
}

.lien {
margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
padding: 5px; /* Padding */
border-bottom: 1px solid #B60808; /* Bordure du séparateur */

text-align: justify; /* Alignement du texte */
}

.lien em { /* Dates */
color: #B60808; /* Couleur du texte */
text-transform: uppercase; /* Transformation du texte en majuscule */
font-style: normal; /* Enlève le italic par défaut de la balise em */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
}

.lien em:after {
content: " :"; /* Ajoute la flèche après les dates */
}

.pers { /* Cadre des personnages */
border: 1px solid #A60000; /* Bordure des personnages */
margin: 10px; /* marge externe */

/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

padding: 3px; /* Marge interne */
text-align: center; /* Alignement du texte */}

.pers img { /* Image des personnages */
float: left; /* Place à gauche du texte */
width: 50px; /* Grandeur de l'image */
height: 50px; /* Grandeur de l'image */
border: 3px solid #B60808; /* Bordure de l'image */

/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* Transformation */
-moz-transform: rotate(-12deg) translate(0px, -5px) ;
-webkit-transform: rotate(-12deg) translate(0px, -5px) ;
-o-transform: rotate(-12deg) translate(0px, -5px) ;
-ms-transform: rotate(-12deg) translate(0px,-5px) ;
transform: rotate(-12deg) translate(0px, -5px); }

.pers:first-line { /* Première ligne:contient le nom du personnage */
color: #AD3030;/* Couleur du texte */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
text-transform: uppercase; /* Transformation du texte */
}

.perso { /* Cadre des personnages */
border: 1px solid #000000; /* Bordure des personnages */
margin: 10px; /* marge externe */

/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

padding: 3px; /* Marge interne */
text-align: center; /* Alignement du texte */}

.perso img { /* Image des personnages */
float: left; /* Place à gauche du texte */
width: 50px; /* Grandeur de l'image */
height: 50px; /* Grandeur de l'image */
border: 3px solid #000000; /* Bordure de l'image */

/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* Transformation */
-moz-transform: rotate(-12deg) translate(0px, -5px) ;
-webkit-transform: rotate(-12deg) translate(0px, -5px) ;
-o-transform: rotate(-12deg) translate(0px, -5px) ;
-ms-transform: rotate(-12deg) translate(0px,-5px) ;
transform: rotate(-12deg) translate(0px, -5px); }

.perso:first-line { /* Première ligne:contient le nom du personnage */
color: #130000;/* Couleur du texte */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
text-transform: uppercase; /* Transformation du texte */
}

Html:

Code:: <div class="cssactif_pa_main">
<h1>Bienvenue sur</br>Night in the City</h1>
<div>
<div class="cssactif_pa_colonne colgauche">
<div class="cssactif_pa_header">
<h2>Liens importants</h2>
<p>Voici les endroits où vous devriez primordialement passer afin de comprendre le mode de fonctionnement du forum. </p>
</div>
<div class="lien"><em>Règlements</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="lien"><em>Registres</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="lien"><em>Présentation</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="lien"><em>Aide</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
</div>

<div class="cssactif_pa_colonne colcentre">
<div class="cssactif_pa_header">
<h2>Concept</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. Donec sed velit ac turpis sagittis consectetur. Morbi lacinia auctor lectus vel lacinia. Nullam quis mauris sem, non laoreet est. Aenean pretium adipiscing tellus vel porttitor. Nam sit amet mi enim. In nulla turpis, dapibus in iaculis non, mollis ac lorem.</p>
<p> Ut sollicitudin sem vel ligula pulvinar vehicula. Aliquam sagittis risus adipiscing nisi placerat ac bibendum nisi tincidunt. Maecenas imperdiet, dolor eu elementum dapibus, leo elit dapibus orci, ut ornare purus purus at nisl. Praesent consectetur tincidunt neque id vulputate.</p></div>

<div class="cssactif_pa_colonne coldroite">
<div class="cssactif_pa_header">
<h2>Staff</h2>
<p>Voici les personnes qui sont responsables du forum et de son bon fonctionnement.</p>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="#pv1">MP</a> / <a href="#pv1">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="#pv1">MP</a> / <a href="#pv1">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="#pv1">MP</a> / <a href="#pv1">Profil</a>
</div>
<div class="pers">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="#pv1">MP</a> / <a href="#pv1">Profil</a>
</div>
</div>
</div>

<div>
<div class="cssactif_pa_colonne col2gauche">
<div class="cssactif_pa_header">
<h2>Information</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. Donec sed velit ac turpis sagittis consectetur. Morbi lacinia auctor lectus vel lacinia. Nullam quis mauris sem, non laoreet est. Aenean pretium adipiscing tellus vel porttitor. Nam sit amet mi enim. In nulla turpis, dapibus in iaculis non, mollis ac lorem.</p>
<p> Ut sollicitudin sem vel ligula pulvinar vehicula. Aliquam sagittis risus adipiscing nisi placerat ac bibendum nisi tincidunt. Maecenas imperdiet, dolor eu elementum dapibus, leo elit dapibus orci, ut ornare purus purus at nisl. Praesent consectetur tincidunt neque id vulputate.</p>
</div>

<div class="cssactif_pa_colonne col2centre">
<div class="cssactif_pa_header">
<h2>Personnages libres</h2>
<p>Prédéfinis qui sont disponibles.</p>
</div>
<div class="perso">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="LIENPRÉDÉFINIS">Lien du prédéfinis</a>
</div>
<div class="perso">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="LIENPRÉDÉFINIS">Lien du prédéfinis</a>
</div>
<div class="perso">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="LIENPRÉDÉFINIS">Lien du prédéfinis</a>
</div>
<div class="perso">
<img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
Prénom & nom<br>
Groupe<br>
<a href="LIENPRÉDÉFINIS">Lien du prédéfinis</a>
</div></div>

<div class="cssactif_pa_colonne col2droite">
<div class="cssactif_pa_header">
<h2>Nouveautés</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
</div>
<div class="new"><em>14/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>05/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>23/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
<div class="new"><em>21/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
</div>
</div>
</div>
</div>

J'ai modifié le html afin de ne pas mettre les informations de mon forum qui est en construction xD Mais c'est ça =3

J'ai simplement modifié les class du html de la deuxième lignes (pour les parties que j'avais de besoin) et je copié/collé le CSS de base de ces parties pour ensuite changer leur disposition ainsi que la class à laquelle la colonne en question était relié.
Ex: class> .pers changé pour .perso
Le même principe peut être appliqué sur les autres colonnes. =)

Sujet: Re: Question page d'accueil -Problème résolu Lun 01 Oct 2012, 12:46

Bonjour,

Merci pour le partage de ta solution. Question page d'accueil -Problème résolu 510527

J'espère que ça servira à d'autres. Je peux déplacer ? =)

Sujet: Re: Question page d'accueil -Problème résolu Mer 03 Oct 2012, 06:53

Oui =3

Sujet: Re: Question page d'accueil -Problème résolu Mer 03 Oct 2012, 08:07

Yop !
Je déplace alors ! Merci de ta réponse Question page d'accueil -Problème résolu 926145

Question page d'accueil -Problème résolu

Question page d'accueil -Problème résolu

Sujets similaires

Sujets similaires

Partenaires Or