Web

Display, une propriété pour contrôler l'affichage

display:none

L'élément auxquel s'applique cet directive n'est pas affiché.

Pour supprimer de l'affichage sans effet sur la mise en forme, on utilisera plutôt la propriété visibility:

visibility:hidden → visible

display:inline

La valeur par défaut. L'élément est affiché dans le flot, sans retour à la ligne.

Si on assigne à la balise li la propriété inline, les éléments d'une liste s'afficheront l'un après l'autre et non l'un au dessous de l'autre. li à par défaut la propriété display:list-item.

expl : <form method="GET" action="maPage.html" style="display: inline;">

display:list-item

Affichage sous forme de liste, avec retour à la ligne après l'élément et une puce avant. La puce et l'élément sont en succession inline.

display:block

Un retour à la ligne est généré avant l'affichage de l'élément, et après. L'élément fonctionne comme une boite.

Ainsi si l'on place dedans par exemple une balise dont le style est clear:both, la séparation ne s'applique qu'aux éléments contenus, tandis qu'en mode inline, elle s'applique aux élément de la page entière.

display:inline-block

(Ne fonctionne pas sur les versions anciennes d'Internet Explorer).

L'élément est une boite, mais lui-même est inséré dans le flot en mode inline, sans retour à la ligne.

display:table

(Ne fonctionne pas sur les versions anciennes d'Internet Explorer).

Affiche les éléments sous un mode tabulaire. On peut assigner aux éléments contenu le style des composantes d'une table: table-column, table-row, table-cell, etc. Voir documentation plus bas.

Ce mode convient plutôt lorsque le style s'applique à un conteneur dont les éléments sont organisés en table avec les styles appropriés.

display:inherit

Le mode d'affichage sera le même que celui du conteneur.

Masquer/afficher

document.getElementById('monElement').style.display = "none";

"block";

Masquer/afficher un div

Dans le header :

<script language="JavaScript">

function show_hide_div(nomdiv){

var lediv = document.getElementById(nomdiv);

if(lediv.style.display=="block")

lediv.style.display="none";

else

lediv.style.display="block";

}

</script>

Dans le corps :

<fieldset>

<legend>

Ma Zone <a onClick="show_hide_div('id1')"> [+] </a>

</legend>

<div id="id1">

Mais ce que tu veu cahcer et faire apparaitre

</div>

</fieldset>

Masquer/afficher un élement

<img src='Image\Patienter.gif' id='toto'>

[...]

<script language="JavaScript" type="text/javascript">

document.getElementById('toto').style.display = "none";

</script>

Modifier contenu d'un div

Par appel d'un Script Javascript :

Dans le Header :

Message d'attente

Dans header :

<% Response.Buffer=true %>

Dans le corp (avant traitement) :

<div id="msgAttente" align='center'> Mon Message </div>

<% Response.Flush %>

A la fin du traitement :

<script language="JavaScript" type="text/javascript">

document.getElementById('msgAttente').innerHTML = ' ';

</script>

Javascript : Traitement selon Combobox

<script language="JavaScript" type="text/javascript">

function traitementSelonChoixSelect() {

select = document.getElementById("obj1");

choixId = select.selectedIndex;

choixTxt=select.options[choixId].text;

if (choixTxt=="maValeur") {

document.getElementById('obj2').innerHTML = 'texte2';

} else {

document.getElementById('obj2').innerHTML = ' ';

}

}

</script>

Changer les valeurs du Select (Liste Déroulante)

<script language="JavaScript" type="text/javascript">

function traitementSelonChoixSelect() {

var monSelect= document.getElementById('nomElement');

var opts = monSelect.getElementsByTagName('option');

opts[0].innerHTML = 'val1';

opts[1].innerHTML = 'val1';

}

</script>

Javascript : Changer action d'une formulaire (lien)

<script language="JavaScript" type="text/javascript">

function modifierLienFormulaire() {

document.forms['nomForm'].action = "test2.asp?val=true";

document.forms['nomForm'].submit();

}

</script>

DANS LE CORPS

<form action="test2.php" method=POST name="NewsLetter">

Votre email: <input type=text name=mail><br>

<input type=submit value="valider" name="Vbutton">

</form>

<a href="javascript: fonct()">lien</a>

Zone de texte

<DIV >

id="nom"

Align={center|left|right|justify}

style=

background-color: #0000FF;

color:#fff;

font-family:"century gothic", arial, tahoma;

font-size:12px;

font-style:{normal|italic|oblique};

font-weight: {normal|bold|bolder|lighter|nombre entre 100-700};

text-align:right;

text-transform:{uppercase|lowercase|capitalize};

line-height:2em;

left:170px;

top:300px;

width:289px; /* Largeur du bloc */

height:99px; /* Hauteur du bloc */

padding:5px; /* Marges intérieures */

border:1px dashed gray; /* bordure en pointillé, d'un pixel et en gris */

border-top :0px solid #228B22;

margin:1px

margin-top:-1px;

position:absolute;

visibility: visible;

z-index:1;

DUR="5" *Durée d'affichage*

BEGIN="5" *temp avant l'affichage de la balise html*

REPEATCOUNT ="5" *nombre de répétition de la séquence*

Modèle CSS

<style type="text/css">

body{

font-size: 12px;

font-family:Arial,tahoma;

}

table {

border-spacing : 0;

border-collapse:collapse;

empty-cells:show;

background-color: transparent;

}

th {

color: #000;

padding-right: 15px;

padding-left: 15px;

font-size: 12px;

}

td {

color: #000;

padding-right: 2px;

padding-left: 2px;

font-size: 12px;

}

#global{

background: url(./Image/Filigrane_Duplicata_500x250.png) repeat left top;

}

</style>

Espacement ajout d'une marge en bas margin-bottom:30px;