Proposer une idée voici des mise en forme utile !!

Une question que peut se poser le lecteur, ou plus générale, qui amène l'explication qui suivra.

HTML:

Code:: <div class="question"><span class="icone_question"></span>Contenu Texte ici</div>

CSS:

Code:: .question {
background: #211e19;
border: 2px solid #6bcc76;
color: #e9ead8;
margin: 20px auto;
min-height: 10px;
padding: 10px;
width: 70%;
}

.icone_question {
display: inline-block;
position: absolute;
width: 60px;
height: 60px;
background-image: url(http://img4.hostingpics.net/pics/145579cursusquestion.png);
background-size: cover;
margin-left: -45px;
margin-top: -45px;
}

Une information complémentaire importante pour la suite, une précision, le signalement d'une donnée à retenir.

HTML:

Code:: <div class="information"><span class="icone_information"></span>Contenu</div>

CSS:

Code:: .information {
background: #211e19;
border: 2px solid #efd474;
color: #e9ead8;
margin: 20px auto;
min-height: 10px;
padding: 10px;
width: 70%;
}

.icone_information {
display: inline-block;
position: absolute;
width: 60px;
height: 60px;
background-image: url(http://img4.hostingpics.net/pics/244728cursusinfo.png);
background-size: cover;
margin-left: -45px;
margin-top: -45px;
}

Le signalement de quelque chose de très important, une donnée dont il faut se méfier, une erreur courante, une erreur à éviter à tout prix, un avertissement...

HTML:

Code:: <div class="attention"><span class="icone_attention"></span>Contenu</div>

CSS:

Code:: .attention {
background: #211e19;
border: 2px solid #e44016;
color: #e9ead8;
margin: 20px auto;
min-height: 10px;
padding: 10px;
width: 70%;
}

.icone_attention {
display: inline-block;
position: absolute;
width: 60px;
height: 60px;
background-image: url(http://img4.hostingpics.net/pics/295843cursusattention2.png);
background-size: cover;
margin-left: -45px;
margin-top: -45px;
}

Le résumé des points importants qui ont été vu précédemment, ce qu'il y a à retenir, ou la conclusion.

HTML:

Code:: <div class="resume"><span class="icone_resume"></span>Contenu Texte</div>

CSS:

Code:: .resume {
background: #211e19;
border: 2px solid #e9ead8;
color: #e9ead8;
margin: 20px auto;
min-height: 100px;
padding: 10px;
width: 90%;
}

.icone_resume {
display: inline-block;
width: 100px;
height: 100px;
margin-left: -45px;
margin-top: -45px;
position: absolute;
background-image: url(http://img4.hostingpics.net/pics/650945cursusresume2.png);
background-size: cover;
}

Lien utile 1 Lien utile 2 Lien utile 3

HTML:

Code:: <div class="bloc_liens"><span class="icone_liens"></span>
<a href="#">Lien utile 1</a><a href="#">Lien utile 2</a><a href="#">Lien utile 3</a>
</div>

CSS:

Code:: .bloc_liens {
background: #211e19;
border: 2px solid #43615b;
color: #e9ead8;
float: center;
margin: 20px;
min-height: 60px;
padding: 10px;
width: 15%;
}

.icone_liens {
background-image: url(http://img4.hostingpics.net/pics/244071cursusliens.png);
background-size: cover;
display: inline-block;
height: 60px;
margin-left: -30px;
margin-top: -40px;
position: absolute;
width: 60px;
}

.bloc_liens a {
color: #608a82;
display: block;
font-weight: bold;
text-shadow: 1px 1px 0 #161511;
}

.bloc_liens a:hover
{
color: #ffffff;
}

Ce cadre contient les explications de l'élément abordé juste avant. Généralement, il sera utilisé après un bloc "code" classique (balises bbcode) pour en détailler/expliquer certains points. Il peut cependant être utilisé pour autre chose, une manipulation en graphisme par exemple...

HTML:

Code:: <div class="explication_code"><span class="icone_explication"></span>Contenu.</div>

CSS:

Code:: .explication_code {
background: #211e19;
border: 2px solid #98958a;
color: #e9ead8;
margin: 10px auto;
min-height: 100px;
padding: 10px;
width: 70%;
}

.icone_explication {
background-image: url(http://img4.hostingpics.net/pics/890841cursusexplication.png);
background-size: cover;
display: inline-block;
height: 100px;
margin-left: -45px;
margin-top: -45px;
position: absolute;
width: 100px;
}

Ceci est un exemple illustrant les propos donnés.

HTML:

Code:: <div class="exemple">Ceci est un exemple illustrant les propos donnés.</div>

CSS:

Code:: .exemple {
background: #211e19;
border: 2px solid #604f39;
color: #98958a;
margin: 10px auto;
min-height: 20px;
padding: 10px;
width: 90%;
}

Dernier petit code Razz

Précédent
Suivant

HTML:

Code:: <a href="#" class="paginleft">Précédent</a>
<a href="#" class="paginright">Suivant</a>

Voilà fini pour Aujourd'hui

» Mise en forme des sujets (forme 1)