Be simple - Fiche de techniques
/!\ Cette section est présente pour vous aider avec vos problèmes de code. Je ne répondrais pas aux MPs que l'on m'enverra à ce sujet.
Bonjour à tous,
Voici mon deuxième CSS dans le cadre de mon projet "Be simple". Tout comme le précédant, celui-ci comporte quelques éléments nécessitant une mince connaissance en CSS pour mettre en place le message notamment concernant les titres (h1,h2,h3,h4) et les deux types de conteneurs. Utilisant ce design sur un forum RPG, j'ai pris la liberté de créer quelques classes supplémentaires pour la possibilité d'avoir deux fonds de couleurs différents ainsi que la possibilité de rendre un conteneur de texte à hauteur fixe avec défilement.
Un petit "merci" est toujours apprécié. Je rappel aussi qu'enlever le crédit est interdit.
Voici un aperçu de la fiche technique.
À noter que l'image utilisée dans le CSS n'est pas disponible dans le code.
À noter que l'image utilisée dans le CSS n'est pas disponible dans le code.
HTML simplifié (avec class)
- Code:
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Advent+Pro|Megrim" rel="stylesheet" /><div class="besimplenamida_containerp"><center><a href="http://www.never-utopia.com/">Crédits: Namida - Never-Utopia</a></center><img class="besimplenamida_containerp_img" src="IMAGE_ICI_LA_TAILLE_CHANGE_EN_FONCTION_DU_CONTENEUR" />
<div class="besimplenamida_ft_ctitre"><h1>TITRE DE LA FICHE</h1>
<h2 style="margin-left:125px;">SOUS_TITRE</h2></div>
<div class="besimplenamida_ft_cinventaires">
<div class="besimplenamida_ft_cp_left"><div class="besimplenamida_ft_lt">TITRE ZONE A</div>
TEXTE ZONE A</div><div class="besimplenamida_ft_cp_left besimplenamida_right"><div class="besimplenamida_ft_lt">TITRE ZONE B</div>
TEXTE ZONE B</div></div>
<h3>TITRE NORMAL</h3><div class="besimplenamida_ft_texte2">ZONE DE TEXTE A</div>
<h3>TITRE NORMAL 2</h3>
<h4>JE SUIS UN H4 CENTRÉ</h4><div class="besimplenamida_ft_texte">TEXTE CENTRER</div>
<h4>JE SUIS UN H4 CENTRÉ</h4><div class="besimplenamida_ft_texte">TEXTE CENTRER</div>
<h3>TITRE NORMAL</h3><div class="besimplenamida_ft_texte2 besimplenamida_overflow besimplenamida_ft_bg2">ZONE DE TEXTE AVEC UN DÉFILEMENT ET UN FOND DE COULEUR DIFFÉRENT.</div>
</div></div>
Il existe 2 types de titres, deux conteneurs et 2 variantes à ce code.
Premièrement, les titres. Le h3 représente le titre avec le fond de couleur. Le h4 représente le titre vert centré.
Deuxièmement, les deux conteneurs. Le premier possédant la class "besimplenamida_ft_texte2" représente celui sur fond vert de pleine longueur. Tandis que le second conteneur "besimplenamida_ft_texte" représente celui avec des bordures dont la longueur est plus petite que la fiche technique.
Pour finir, si vous désirez prendre le deuxième fond de couleurs pour un conteneur de texte, utiliser la class "besimplenamida_ft_bg2" après "besimplenamida_ft_texte" ou "besimplenamida_ft_texte2".
Pour mettre une hauteur fixe (texte trop long par exemple), simple ajouter la class "besimplenamida_overflow" à votre div ("besimplenamida_ft_texte" ou "besimplenamida_ft_texte2")
Premièrement, les titres. Le h3 représente le titre avec le fond de couleur. Le h4 représente le titre vert centré.
Deuxièmement, les deux conteneurs. Le premier possédant la class "besimplenamida_ft_texte2" représente celui sur fond vert de pleine longueur. Tandis que le second conteneur "besimplenamida_ft_texte" représente celui avec des bordures dont la longueur est plus petite que la fiche technique.
Pour finir, si vous désirez prendre le deuxième fond de couleurs pour un conteneur de texte, utiliser la class "besimplenamida_ft_bg2" après "besimplenamida_ft_texte" ou "besimplenamida_ft_texte2".
Pour mettre une hauteur fixe (texte trop long par exemple), simple ajouter la class "besimplenamida_overflow" à votre div ("besimplenamida_ft_texte" ou "besimplenamida_ft_texte2")
CSS relatif à ce post
- Code:
/*Be simple - fiche technique */
.besimplenamida_containerp {
padding: 10px 0px;
width: 95%;
max-width:640px;
font-family: 'Josefin Sans', sans-serif;
margin:auto;
background-color: #eaeaea;
border-left: 7px solid #619994;
border-right: 7px solid #619994;
box-shadow: 1px 1px 7px #7F7F7F;
}
/*Liens*/
.besimplenamida_containerp a {
text-align:center;
color:#619994;
text-decoration: none;
font-size: 12px;
}
/*Liens survolés*/
.besimplenamida_containerp a:hover {
font-weight: bold;
text-decoration: none;
}
/*Image du haut*/
.besimplenamida_containerp_img {
width:100%;
height:auto;
border-top: 2px solid #619994;
border-bottom: 2px solid #619994;
opacity:0.8;
}
/*Bloc titre haut*/
.besimplenamida_ft_ctitre {
max-height:50px;
width:95%;
margin-top:-80px;
color:#5c3520;
}
/*Titre haut*/
.besimplenamida_ft_ctitre h1 {
font-family: 'Megrim', cursive;
font-size:50px;
position:relative;
text-shadow:1px 1px 0px #27413d;
top:-25px;
margin-left:60px;
color:#71b3a9;
font-weight:normal;
}
/*Sous-titre*/
.besimplenamida_ft_ctitre h2 {
padding-left:25px;
font-size: 16px;
text-shadow: 0px 0px 5px #fff;
line-height: 2px;
color: #5c3520;
letter-spacing:3px;
font-variant: small-caps;
font-family: 'Advent Pro', sans-serif;
font-weight:normal;
margin-top: -52px;
text-transform:initial;
text-align:left;
}
/*2 blocs collés*/
.besimplenamida_ft_cinventaires {
height: 180px;
width: 100%;
}
/*Chaque bloc collé*/
.besimplenamida_ft_cp_left {
width: 45%;
height: 140px;
background-color: #fff;
overflow: auto;
text-align: justify;
font-size: 11px;
line-height: 11px;
padding: 6px;
float: left;
border-left: 7px solid #619994;
border-right: 7px solid #619994;
border-top: 1px solid #619994;
border-bottom: 1px solid #619994;
margin-left: 5%;
box-sizing: border-box;
}
/*Bloc collé de droite*/
.besimplenamida_right {
margin-left: 0%;
}
/*Titre des 2 blocs collés*/
.besimplenamida_ft_lt {
font-size: 11px;
color: #4a9288;
text-align: left;
font-variant: small-caps;
font-weight:bold;
}
/*Titre simple*/
.besimplenamida_containerp h3 {
padding: 10px 5px;
font-size: 20px;
font-family: 'Megrim', cursive;
color:#fff;
letter-spacing: 5px;
background-color: #67bdaf;
font-weight:normal;
margin: 0px;
}
/*Bloc de texte normal*/
.besimplenamida_ft_texte2 {
background-color: #94DBD1;
text-align: justify;
padding:10px;
}
/*Titre h4 centré*/
.besimplenamida_containerp h4 {
font-size:16px;
font-family: 'Advent Pro', sans-serif;
color:#4a9288;
letter-spacing: 5px;
font-weight:bold;
text-transform:uppercase;
font-size:16px;
font-weight:800;
text-align:center;
margin: 0px;
}
/*Blocs avec une bordure à droite et à gauche*/
.besimplenamida_ft_texte {
margin: 10px 10px 0px 10px;
background-color: #94DBD1;
text-align: justify;
padding: 10px;
border-left: 7px solid #619994;
border-right: 7px solid #619994;
}
/*Bloc de texte avec une hauteur fixe*/
.besimplenamida_overflow {
height:150px;
overflow:auto;
}
/*Couleur de fond du bloc de texte avec hauteur fixe*/
.besimplenamida_ft_bg2 {
background-color:#BED4D1;
}
/!\ Si vous utilisez plusieurs éléments (Fiche de liens, fiche technique ou contenu de RP) assurez-vous de ne pas répéter une class lorsque vous allez insérer le code CSS sur votre site.
Voilà! C'est tout pour ce code CSS
