La Documentation de JFGG

Diverses propriétées CSS

Exemples propriétées CSS

• Paramètres target dans les liens html balise <a href="...." target="..." >liens html </a>

Valeur : "_blank" Ouvre le document dans une nouvelle fenêtre (popup)
Valeur : "_self" Ouvre le document dans la même frame
Valeur : "_parent" Ouvre le document dans la fenêtre parent des frames
Valeur : "_top" Ouvre le document dans la même fenêtre 
Valeur : "TOTO" Ouvre le document dans le même onglet qui porte ce nom TOTO

• white-space permet de spécifier le formatage du texte

white-space : normal;     # affichage normal du texte
white-space : pre;        # affichage du texte tel qu'il a été écrit
white-space : pre-wrap;   # idem mais ajoute sauts de ligne pour ne pas sortir du bloc
white-space : pre-line;   # sup multi spaces et ajout sauts de ligne pour ne pas sortir du bloc
white-space : nowrap;     # pas de retour à la ligne 

• CSS pour texte

##&lt;<span style="font-size:16px;font-style:italic;font-weight:bold;text-decoration:underline;">claudel</span>&gt;##

##<claudel>##

• CSS pour balise <TABLE> et <TH>

<style type="text/css" >
TABLE {
        margin:0;
/*
        font-family: "Times New Roman",Georgia,Serif;
        font-weight:normal;
        width: 100%;
        max-width: 1200px;
*/
        font-family: "Arial";
        FONT-SIZE: x-small;

        border-width: 1px;
        border-spacing: 2px;
        border-style: outset;
        border-color: gray;
        border-collapse: separate;
/*         background-color: #ddd; */
        height: 400px;
        overflow: auto;
        white-space: pre-line;

}
table TH {
    align:CENTER;
    background-color: rgb(153, 153, 204);
    border-spacing: 2px;
}

table td {
vertical-align:top; #middle bottom
text-align: justify;
}

/* surlignage ligne tableau */
/*
table td:hover::after,
table tr:hover {
  background-color: #ffa;
}
*/

table tr:hover {
/*
    background-color: #fff;
*/
    background-color: rgb(109,109,249);

}

table tr:hover td {
    background-color: transparent; /* or #000 */
        font-family: 'Comic Sans MS';
        border-color: blue;
/*
        font-size: 115%;
*/


</style>

• CSS pour balise <pre> ou <textarea>

<pre style="
	border: 0px solid #000;
	background-color: #ddd;
	font-family: courier;
	line-height: 1.5em;
	font-size: 70%;
	width: 70%;
	height: auto;
	overflow: auto;
">
 test
 test
 test



<pre style="
     background-color:black;
     color:white;
     font-family: Courier,sans-serif;
     font-size: 10pt;
     font-style: normal;
     width:-moz-max-content;  # permet le !important 
">
 test
 test
 test


<pre style="
        border: 0px solid #000;
        background-color: #ddd;
        font-family: courier;
        line-height: 1.5em;
        font-size: 80%;
">


 $( iconv -f IBM-850 -t ISO8859-1 ${Cft_fname} )

</pre>

 test
 test
 test



Style ecran 3270 noir et blanc
<pre style="
     background-color:black;
     color:white;
">

## crée dans la liste des lancement un upr XX210AO prévu pour le 01/09/2012 à 23h00 et maximum le lendemain à 03h00

unix@unix:> uxadd FLA UPR=XX210A0 MU=M91QR USER=informix LSTART="(20120901,2300)" LEND="(20120902,0300)" PDATE=20120901



<textarea style="
	background-color:black;
	color:white;
	width:100%;
	height:100px;
	overflow: auto;
">

## crée dans la liste des lancement un upr XX210AO prévu pour le 01/09/2012 à 23h00 et maximum le lendemain à 03h00

unix@unix:> uxadd FLA UPR=XX210A0 MU=M91QR USER=informix LSTART="(20120901,2300)" LEND="(20120902,0300)" PDATE=20120901



 Largeur auto dans espace dispo 

<textarea style="
             height: 162px;
             overflow: auto;
             width: 100%;
             width: -moz-available;
             width: -webkit-fill-available;
">


<!-- Filter Model for the CFTUTIL DISPLAY command
CFTUTIL DISPLAY
                listcat-parameters
                + content= | STR                <- nothing means first available
                + fmodel = DSPCNF | STR         <- DSPCNF is system dependant : ex.: UNIX/Windows is DSPCNF an environment variable
                + mode   = ANY | column | line  <- ANY means use the model's
                + na     = ANY | STR            <- idem
                + empty  = ANY | STR            <- idem
                + help   = NONE | FIELDS | MODELS

<CFTDisplayFilter

• Generer des onglets dans une page

<style>

#menu
{
        border-bottom : 0px solid #9EA0A1;
        padding-bottom : 0px;
        height : auto;
}

#onglets
{
    font : bold 11px Batang, arial, serif;
    list-style-type : none;
    padding-bottom : 34px; /* ? modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    border-bottom : 1px solid #9EA0A1;
    margin-left : 0;
}

#onglets li
{
    float : left;
    height : 31px; /* ? modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: #F4F9FD;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #9EA0A1;
    list-style-type: none;
   border-radius: 4px 3px 6px / 2px 4px;
}

#onglets li.active
{
    border-bottom: 1px solid #fff;
    background-color: #fff
}

#onglets a
{
    display : block;
    color : #666;
/* -------href sans soulignement */
    text-decoration : none;
    padding : 4px;
}

#onglets a:hover
{
    background : #fff;
}


</style>

<!--  Dans le content -->

<div id="menu" >
<ul id="onglets">
<li><a href="#" onClick="activerMenu(this, 'Consultation'); return false;" >Consultation</a>
<li><a href="#" onClick="activerMenu(this, 'Resultats'); return false;" >Resultats</a>
</ul>
</div>

 Mettre un icone à l'onglet 

doivent être dans <head> ... </head>
<link rel="shortcut icon" href="http://999999999999:8888/image/logo.jpg" type="image/png"/>
<link rel="icon" href="http://999999999999:8888/image/logo.jpg" type="image/png"/>

• inherit = Ignore style précedent

 Ignore style précedent pour vertical-align et ajout class pour colonne tableau texte à droite

<style type="text/css" >

table td {
                vertical-align:inherit;
                text-align: justify;
}

.right-cell {
      text-align: right;
}


</style>

<table border=1>
  <COLGROUP>
  <COL width=170>
  <COL width=100>
  </COLGROUP>
  <TBODY>

<tr><th>Nom Action</th><th>Cotation</th></tr>
<tr><td>Col1</td><td class="right-cell">Col2</td></tr>

</tbody>
</table>

---