Modèles CSS

Titre niveau 1 <h1><span>affichage light</span>

<p class="chapo1">

  • #content article h1=margin:20px 0 15px ;font-family :’Gotham Medium’, Arial ;font-size : 1.8em ;background :#e70334 ;padding:5px 20px ;display:block ;clear:both ;float:left ; color :#ffffff ;
  • #content article h1 span=font-family :’Gotham Light’, Arial ;color :#ffffff ;
  • #content article .chapo1=margin:0 0 10px 20px ;border-left:1px solid #e70334 ;color :#5a5a5a ;font-size:1em ;padding:5px 0 5px 15px ;font-family:Arial ;clear:both ;float:none ;

Titre niveau 2 <h2>

<p class="chapo2">

  • #content article h2=display:block ;padding:10px 0 10px ;font-family :’Gotham Medium’, Arial ;font-size : 1.8em ;clear:both ;color :#e70334 ;margin:10px 0 0 20px ;
  • #content article .chapo2=margin:0 0 10px 20px ;border-left:1px solid #e70334 ;color :#5a5a5a ;font-size:1em ;padding:5px 0 5px 15px ;font-family:Arial ;clear:both ;float:none ;

Titre niveau 3 <h3>

<p class="chapo3">

  • #content article h3=display:block ;padding:10px 0 10px 20px ;font-family :’Gotham Medium’, Arial ;font-size : 1.5em ;clear:both ;color :#e67300 ;margin:0px ;
  • #content article .chapo3=margin:0 0 10px 20px ;border-left:1px solid #e67300 ;color :#5a5a5a ;font-size:1em ;padding:5px 0 5px 15px ;font-family:Arial ;clear:both ;

Titre niveau 4 <h4>

<p class="chapo4">

  • #content article h4=padding:5px 0 5px ;font-family :’Gotham Medium’, Arial ;font-size : 1.1em ;clear:both ;color :#445a6a ;margin-left:35px ;
  • #content article .chapo4=margin:0 0 10px 35px ;border-left:1px solid #445a6a ;color :#5a5a5a ;font-size:1em ;padding:5px 0 5px 15px ;font-family:Arial ;clear:both ;
Titre niveau 5 <h5>
  • #content article h5=margin:10px 0 ;font-family :’Gotham Medium’, Arial ;font-size : 1.1em ;clear:both ;color :#e70334 ;margin-left:35px ;
Titre niveau 6 <h6>
  • #content article h6=margin:10px 0 ;font-family :’Gotham Medium’, Arial ;font-size : 1em ;clear:both ;color :#e70334 ;margin-left:35px ;

Textes

<p>Texte normal dans le corps de l’article : Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis.</p>

  • #content article p=margin:0 0 7px 35px ;font-size : 1em ;

 

<p><font class="textSmall">Petit texte dans le corps de l’article : Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis.</font></p>

  • #content article .textSmall=font-size:0.8em ;

Listes

ul=margin : 0 ; padding : 0 ;list-style-type : none ;
li=margin : 0 ; padding : 0 ;

  • type liste « orange »  <ul><li>
    #content article ul=margin:7px 0 7px 55px ;clear:both ;
    #content article ul li=background:url(../img/bg/puce_list.png) 0 4px no-repeat ;padding:0px 5px 5px 10px ;
    • sous-liste <ul><li><ul><li>
      #content article ul ul=margin:7px 0 7px 5px ;
      #content article ul ul li=background:url(../img/bg/puce_list_simple.png) 0 4px no-repeat ;padding:0px 5px 5px 10px ;
  • item 2
  • item 3

 

  • type liste « rouge » <ul class="pucesRed"><li>
    #content article ul.pucesRed=margin:7px 0 7px 55px ;clear:both ;
    #content article ul.pucesRed li=background:url(../img/bg/puce_list_ssnav3red.png) 0 4px no-repeat ;padding:0px 5px 5px 10px ;
    • sous-liste <ul><li><ul>
      #content article ul.pucesRed ul li=background:url(../img/bg/puce_list_simplered.png) 0 4px no-repeat ;padding:0px 5px 5px 10px ;
  • item 2
  • item 3

Deux colonnes

<div class="largeur50">
Colonne 1
</div>

<div class="largeur50">
Colonne 2
</div>

  • #content #contentLeft article .largeur50 =display:block ;margin:10px 1% 0px 0 ;padding:0 ;width:48.9% ;float:left ;

Trois colonnes

<div class="largeur33">
Colonne 1
</div>

<div class="largeur33">
Colonne 2
</div>

<div class="largeur33">
Colonne 3
</div>

  • #content #contentLeft article .largeur33=display:block ;margin:10px 1% 0px 0 ;padding:0 ;width:31.9% ;float:left ;

Quatre colonnes

<div class="largeur25">
Colonne 1
</div>

<div class="largeur25">
Colonne 2
</div>

<div class="largeur25">
Colonne 3
</div>

<div class="largeur25">
Colonne 4
</div>

  • #content #contentLeft article .largeur25=display:block ;margin:10px 1% 0px 0 ;padding:0 ;width:23.9% ;float:left ;

3/4 de colonne

<div class="largeur75">
Colonne 3/4
</div>

<div class="largeur25">
Colonne 1/4
</div>

  • #content #contentLeft article .largeur75=display:block ;margin:10px 1% 0px 0 ;padding:0 ;width:73.9% ;float:left ;

Autres formats de colonne

Mise en page utilisée pour la présentation de certaines formations
Ex : novancia.fr/MS-Finance-entrepreneuriale

<div class="formaColonne">

Class formaColonne
Colonne 1

</div>

<div class="formaColonne">

Class formaColonne
Colonne 2

</div>

<div class="formaInfoColonne">

class formaInfoColonne

<p class="times">
class Times
</p>

<p class="cash">
class Cash
</p>

<p class="dates">
class dates texte
</p>

<p class="public">
<strong>

class public Strong
</strong>
class public texte
</p>

</div>

  • #content #contentLeft article .formaColonne=display:block ;margin:10px 0 0 3.5% ;padding:0 ;width:35.9% ;float:left ;
  • #content #contentLeft article .formaInfoColonne=display:block ;margin:10px 0 0 2% ;padding:0 ;width:18.9% ;float:left ;

Classes spécifiques aux liens

Téléchargement

<p><a class="telecharger" href="#">Téléchargement 1 ligne</a></p>

<p><a class="telecharger2" href="#">
Téléchargement 2 lignes</a></p>

  • #content article .telecharger,#content article .telecharger2=background : url("../img/bg/telecharger.png") no-repeat scroll 0 0 transparent ;clear : both ;cursor : pointer ;float : left ;margin : 0 ;padding : 19px 10px 0px 45px ;text-decoration:none ;font-weight:bold ;font-size:1em ;height:26px ;
  • #content article .telecharger2=padding : 10px 10px 10px 45px ;

En savoir plus

<p><a class="savoirPlus" href="#">En savoir plus</a></p>

  • #content article .savoirPlus=text-decoration:none ;margin:0 ;font-family:Arial ;font-size : 1em ;color :#ffffff ;padding:0 5px ;background :#E67300 ;
  • #content article .savoirPlus:hover=text-decoration:none ;margin:0px ;font-family:Arial ;font-size : 1em ;background :#e70334 ;clear:none ;color :#ffffff ;

Les encarts

textBkg

<div class="textBkg">

<p class="titleTextBkg">Titre

<p>texte</p>

</div>

textBkg couleur1

<div class="textBkg couleur1">

<p class="titleTextBkg">Titre

<p>texte</p>

</div>

textBkg couleur2 encart

<div class="textBkg couleur2 encart">

<p class="titleTextBkg">Titre

<p>texte</p>

</div>
<p>
Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.</p>

<p>Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.</p>

  • #content article .textBkg=display:block ;clear:both ;padding:0px 0px 15px 0 ;color :#5a5a5a ;font-size:1em ;margin:10px 0 10px 35px ;background :#e3e6e9 ;overflow:hidden ;
  • #content article .encart=float:left ;margin-right:15px ;
  • #content article .couleur1=background :#f9e1c7 ;
  • #content article .couleur2=background :#E67300 ;
    #content article .textBkg.couleur2 .titleTextBkg=color :#ffffff ;background:transparent ;
    #content article .couleur2 p=color :#ffffff ;
    #content article .couleur2 a=color :#ffffff ;
    #content article .couleur2 a:hover=color :#FCDBBB ;

Images : <p><img src="..." />...<br/>...</p>

Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet ?
Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes.

 

Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet ?
Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes.

  • #content article img=margin:0 0 7px 35px ;
  • #content article p img=float:left ;margin:0 10px 7px 0px ;display:block ;

Vidéos

Les vidéos sont affichées à partir de notre chaîne You-Tube par iframe

Largeur 616px

<p><iframe allowfullscreen="" frameborder="0" width="616 height="347" src="lien embed de You-tube"></iframe></p>

Note : la balise <p> permet d’aligner la vidéo sur le texte.

Largeur 50

<div class="largeur50"><p>...</p></div><div class="largeur50"><p><iframe allowfullscreen="" frameborder="0" width="293" height="165" src="lien embed de You-tube"></iframe></p><p>...</p></div>

Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.

Post quorum necem nihilo

Les tableaux

<table class="pairImpair">
<thead class="bkgCouleur1">
<tr><th>...</th><th>...</th>...</tr>
</thead>
<tbody>
<tr><td>...</td><td>...</td>...</tr>
</tbody>
</table>

  • La class pairImpair permet d’assigner automatiquement une couleur aux lignes paires et une couleur aux lignes impaires.
  • La class bkgCouleur1 permet d’assigner la couleur orange à la ligne d’en-tête thead.
Entête 1 Entête 2 Entête 2
texte texte texte
texte texte texte
texte texte texte
  • #content article table=float:left ;margin:20px 0 20px 35px ;overflow:hidden ;border:1px solid #dadada ;
  • #content article table thead tr th=padding:8px 5px ;
  • #content article table tr td=padding:8px 5px ;
  • #content article table tr td p=margin:0 ;
  • #content article table tr:hover=background :#f9e1c7 ;
  • #content article table ul, #content article table ul.pucesRed=margin:0 ;
  • #content article table thead.bkgCouleur1 tr:first-child=background :#E67300 ;color :#fff ;
  • #content article table.pairImpair=float:left ;margin:20px 0 20px 35px ;overflow:hidden ;border:1px solid #dadada ;border-collapse : separate ;width:615px ;
  • #content article table.pairImpair tr.pair=background :#f3f3f3 ;
  • #content article table.pairImpair tr td=padding:8px 5px ;border:none ;
  • #content article table.pairImpair tr:hover=background :#f9e1c7 ;