201 lines
15 KiB
PHP
Executable File
201 lines
15 KiB
PHP
Executable File
<?php
|
||
$nomFicAppelant = basename(__FILE__);
|
||
// -----------------------------------------------------
|
||
// SECTION Positionnement
|
||
// -----------------------------------------------------
|
||
echo '<div valign="top" align="left" id="sectionPos" style="display:none; width:100%;" >';
|
||
|
||
// -----------------------------------------------------
|
||
// boite position
|
||
// -----------------------------------------------------
|
||
echo '<div class="boiteCss" >';
|
||
echo '<span class="boiteCssTitre" style="color:red">Positionnement</span>';
|
||
// -----------------------------------------------------
|
||
// Position
|
||
// -----------------------------------------------------
|
||
|
||
// static Default value. Elements render in order, as they appear in the document flow
|
||
// absolute The element is positioned relative to its first positioned (not static) ancestor element
|
||
// fixed The element is positioned relative to the browser window
|
||
// relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
|
||
// sticky The element is positioned based on the user's scroll position
|
||
// A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
|
||
|
||
// Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.
|
||
// initial Sets this property to its default value. Read about initial
|
||
// inherit Inherits this property from its parent element. Read about inherit
|
||
|
||
echo ' <i class="icoStyle fad fa-crosshairs"></i>';
|
||
echo '<span class="itemReglage">Type de positionnement : </span>  ';
|
||
$theTitle='';
|
||
echo '<select class="selectWbm" id="positionCss" name="positionCss" onChange="editMonForm(\'positionCss\',0);" >';
|
||
if ($cssPosition[$theNumCss]=="-") {echo '<option value="-" selected>Aucune</option>';} else {echo '<option value="-" >Aucune</option>';}
|
||
if ($cssPosition[$theNumCss]=="inherit") {echo '<option value="inherit" selected>Hérité</option>';} else {echo '<option value="inherit" >Hérité</option>';}
|
||
if ($cssPosition[$theNumCss]=="initial") {echo '<option value="initial" selected>Défaut</option>';} else {echo '<option value="initial" >Défaut</option>';}
|
||
if ($cssPosition[$theNumCss]=="static") {echo '<option value="static" selected>Statique</option>';} else {echo '<option value="static" >Statique</option>';}
|
||
if ($cssPosition[$theNumCss]=="relative") {echo '<option value="relative" selected>Relative</option>';} else {echo '<option value="relative">Relative</option>';}
|
||
if ($cssPosition[$theNumCss]=="absolute") {echo '<option value="absolute" selected>Absolue</option>';}else {echo '<option value="absolute">Absolue</option>';}
|
||
if ($cssPosition[$theNumCss]=="fixed") {echo '<option value="fixed" selected>Fixe</option>';} else {echo '<option value="fixed">Fixe</option>';}
|
||
if ($cssPosition[$theNumCss]=="sticky") {echo '<option value="sticky" selected>Collante</option>';} else {echo '<option value="sticky">Collante</option>';}
|
||
echo '</select>';
|
||
|
||
// -----------------------------------------------------
|
||
// Top
|
||
// -----------------------------------------------------
|
||
echo '<br>';
|
||
echo ' <i class="icoStyle fad fa-arrow-to-top" ></i>';
|
||
echo '<span class="itemReglage">Position haute : </span>  ';
|
||
if (empty($cssTop[$theNumCss])) $cssTop[$theNumCss]="-";
|
||
$theTitle='Position par rapport au haut';
|
||
echo '<input class="inputWebmaster" style="width:60px;" onChange="editMonForm(\'topCss\',0);" size="4" name="topCss" id="topCss" value="' .$cssTop[$theNumCss]. '" title="' .$theTitle. '"/>';
|
||
switch (substr($cssTop[$theNumCss],-2)) {
|
||
case 'px':
|
||
$topUnite='px';
|
||
break;
|
||
// case 'em':
|
||
// $topUnite='em';
|
||
// break;
|
||
default:
|
||
break;
|
||
}
|
||
if (substr($cssTop[$theNumCss],-1)=='%' ) {$topUnite='%';}
|
||
echo '<select onChange="editMonForm(\'widthCss\',0);" class="selectWbm" id="topUnite" name="topUnite" style="width:90px;" >';
|
||
if ($topUnite=="" || $topUnite=="-" ) {echo '<option value="-" selected>Aucune</option>';} else {echo '<option value="-">Aucune</option>';}
|
||
if ($topUnite=="%") {echo '<option value="%" selected >Pourcent</option>';} else {echo '<option value="%" >Pourcent</option>';}
|
||
if ($topUnite=="px") {echo '<option value="px" selected >Pixels</option>';} else {echo '<option value="px" >Pixels</option>';}
|
||
// if ($topUnite=="em") {echo '<option value="em" selected >em</option>';} else {echo '<option value="em" >em</option>';}
|
||
echo '</select>';
|
||
|
||
// -----------------------------------------------------
|
||
// Bottom
|
||
// -----------------------------------------------------
|
||
// echo '<br>';
|
||
// -----------------------------------------------------
|
||
echo ' <i class="icoStyle fad fa-arrow-to-bottom" ></i>';
|
||
echo '<span class="itemReglage">Position basse : </span>  ';
|
||
$theTitle='Position par rapport au bas';
|
||
if (empty($cssBottom[$theNumCss])) $cssBottom[$theNumCss]="-";
|
||
echo '<input class="inputWebmaster" style="width:60px;" onChange="editMonForm(\'bottomCss\',0);" size="4" name="bottomCss" id="bottomCss" value="' .$cssBottom[$theNumCss]. '" title="' .$theTitle. '"/>';
|
||
switch (substr($cssBottom[$theNumCss],-2))
|
||
{
|
||
case 'px':
|
||
$bottomUnite='px';
|
||
break;
|
||
// case 'em':
|
||
// $bottomUnite='em';
|
||
// break;
|
||
default:
|
||
break;
|
||
}
|
||
if (substr($cssBottom[$theNumCss],-1)=='%' ) {$bottomUnite='%';}
|
||
echo '<select onChange="editMonForm(\'widthCss\',0);" class="selectWbm" id="bottomUnite" name="bottomUnite" style="width:90px" >';
|
||
if ($bottomUnite=="" || $bottomUnite=="-" ) {echo '<option value="-" selected>Aucune</option>';} else {echo '<option value="-">Aucune</option>';}
|
||
if ($bottomUnite=="%") {echo '<option value="%" selected >Pourcent</option>';} else {echo '<option value="%" >Pourcent</option>';}
|
||
if ($bottomUnite=="px") {echo '<option value="px" selected >Pixels</option>';} else {echo '<option value="px" >Pixels</option>';}
|
||
// if ($bottomUnite=="em") {echo '<option value="em" selected >em</option>';} else {echo '<option value="em" >em</option>';}
|
||
echo '</select>';
|
||
|
||
// -----------------------------------------------------
|
||
// Right
|
||
// -----------------------------------------------------
|
||
echo '<br>';
|
||
echo ' <i class="icoStyle fad fa-arrow-to-right" ></i>';
|
||
echo '<span class="itemReglage">Position droite : </span>';
|
||
$theTitle='Position par rapport à la droite';
|
||
if (empty($cssRight[$theNumCss])) $cssRight[$theNumCss]="-";
|
||
echo '<input style="width:50px;" class="inputWebmaster" onChange="editMonForm(\'rightCss\',0);" size="4" name="rightCss" id="rightCss" value="' .$cssRight[$theNumCss]. '" title="' .$theTitle. '"/>';
|
||
switch (substr($cssRight[$theNumCss],-2))
|
||
{
|
||
case 'px':
|
||
$rightUnite='px';
|
||
break;
|
||
// case 'em':
|
||
// $rightUnite='em';
|
||
// break;
|
||
default:
|
||
break;
|
||
}
|
||
if (substr($cssRight[$theNumCss],-1)=='%' ) {$rightUnite='%';}
|
||
echo '<select onChange="editMonForm(\'widthCss\',0);" class="selectWbm" id="rightUnite" name="rightUnite" style="width:90px" >';
|
||
if ($rightUnite=="" || $rightUnite=="-" ) {echo '<option value="-" selected>Aucune</option>';} else {echo '<option value="-">Aucune</option>';} if ($rightUnite=="%") {echo '<option value="%" selected >Pourcent</option>';} else {echo '<option value="%" >Pourcent</option>';}
|
||
if ($rightUnite=="px") {echo '<option value="px" selected >Pixels</option>';} else {echo '<option value="px" >Pixels</option>';}
|
||
// if ($rightUnite=="em") {echo '<option value="em" selected >em</option>';} else {echo '<option value="em" >em</option>';}
|
||
echo '</select>';
|
||
|
||
// -----------------------------------------------------
|
||
// left
|
||
// -----------------------------------------------------
|
||
echo ' <i class="icoStyle fad fa-arrow-to-left" ></i>';
|
||
echo '<span class="itemReglage">Position gauche : </span>';
|
||
$theTitle='Position par rapport à la gauche';
|
||
if (empty($cssLeft[$theNumCss])) $cssLeft[$theNumCss]="-";
|
||
echo '<input style="width:50px;" class="inputWebmaster" onChange="editMonForm(\'leftCss\',0);" size="4" name="leftCss" id="leftCss" value="' .$cssLeft[$theNumCss]. '" title="' .$theTitle. '"/>';
|
||
switch (substr($cssLeft[$theNumCss],-2)) {
|
||
case 'px':
|
||
$leftUnite='px';
|
||
break;
|
||
// case 'em':
|
||
// $leftUnite='em';
|
||
// break;
|
||
default:
|
||
break;
|
||
}
|
||
if (substr($cssLeft[$theNumCss],-1)=='%' ) {$leftUnite='%';}
|
||
echo '<select onChange="editMonForm(\'widthCss\',0);" class="selectWbm" id="leftUnite" name="leftUnite" style="width:90px" >';
|
||
if ($leftUnite=="" || $leftUnite=="-" ) {echo '<option value="-" selected>Aucune</option>';} else {echo '<option value="-">Aucune</option>';}
|
||
if ($leftUnite=="%") {echo '<option value="%" selected >Pourcent</option>';} else {echo '<option value="%" >Pourcent</option>';}
|
||
if ($leftUnite=="px") {echo '<option value="px" selected >Pixels</option>';} else {echo '<option value="px" >Pixels</option>';}
|
||
// if ($leftUnite=="em") {echo '<option value="em" selected >em</option>';} else {echo '<option value="em" >em</option>';}
|
||
echo '</select>';
|
||
echo '</div>';
|
||
|
||
// -----------------------------------------------------
|
||
// boite alignement
|
||
// -----------------------------------------------------
|
||
echo '<div class="boiteCss" >';
|
||
echo '<br>';
|
||
echo '<span class="boiteCssTitre" style="color:red">Alignement</span>';
|
||
// -----------------------------------------------------
|
||
// Float
|
||
// -----------------------------------------------------
|
||
echo ' <i class="icoStyle fad fa-exchange" ></i>';
|
||
// La propriété float va retirer un élément du flux normal de la page puis le placer contre un bord de son élément parent (ou élément conteneur) ou contre le bord d’un élément flottant le précédant.
|
||
// Cette propriété va également impacter les éléments environnants puisque le texte et les éléments inline suivants un élément possédant un float différent de none vont essayer de venir se placer à ses côtés.
|
||
// La propriété float était à l’origine principalement utilisée pour incruster des images dans du texte en les faisant flotter. L’utilisation « normale » de float est donc d’appliquer le float (de faire flotter) des éléments inline dans la page et de laisser les textes se positionner autour.
|
||
// En effet, les éléments de type block suivants un élément flottant vont également se placer sur la même ligne que l’élément flottant mais continuer à prendre tout l’espace disponible dans la ligne. La partie des éléments block chevauchant un flottant va être cachée derrière le flottant.
|
||
// On va cependant également tout à fait pouvoir faire flotter un élément block même si généralement nous utiliserons plutôt un display : inline-block pour placer deux éléments de type block côte-à-côte.
|
||
// Notez que si vous voulez faire flotter un élément block sans contenu, alors il faudra lui donner une largeur et une hauteur explicites avec les propriétés width et height car dans le cas contraire les valeurs calculées seront égales à 0.
|
||
// echo '<style type="text/css">span[title]{width:700px;}</style>';
|
||
$theTitle='Détermine de quel côté un élément ne doit pas avoir d\'espace dans le flux. Le bord externe gauche d\'un élément flottant à gauche ne peut pas se trouver au-delà du bord gauche de bloc conteneur. Les règles sont inversées pour les éléments flottant à droite. ';
|
||
// Pour un élément donné flottant à gauche, celle-ci suivant dans la source un élément ayant déjà généré un autre élément flottant à gauche, le bord externe gauche de cet élément doit venir à droite du bord externe droit de la boîte précédente, ou, sinon, son sommet doit venir en dessous du bas de la boîte précédente. Les règles sont inversées pour les éléments flottant à droite.
|
||
|
||
echo '<span title="' .$theTitle. '" class="itemReglage">Flottement : </span>  ';
|
||
echo '<select class="selectWbm" id="floatCss" name="floatCss" onChange="editMonForm(\'floatCss\',0);" >';
|
||
if ($cssFloat[$theNumCss]=="-") {echo '<option value="-" selected>Aucun</option>';} else {echo '<option value="-" >Aucun</option>';}
|
||
if ($cssFloat[$theNumCss]=="inherit") {echo '<option value="inherit" selected>Hérité</option>';} else {echo '<option value="inherit" >Hérité</option>';}
|
||
if ($cssFloat[$theNumCss]=="initial") {echo '<option value="initial" selected>Défaut</option>';} else {echo '<option value="initial" >Défaut</option>';}
|
||
if ($cssFloat[$theNumCss]=="left") {echo '<option value="left" selected>Gauche</option>';} else {echo '<option value="left" >Gauche</option>';}
|
||
if ($cssFloat[$theNumCss]=="right") {echo '<option value="right" selected>Droit</option>';}else {echo '<option value="right">Droit</option>';}
|
||
if ($cssFloat[$theNumCss]=="none") {echo '<option value="none" selected>Aucun</option>';} else {echo '<option value="none">Aucun</option>';}
|
||
echo '</select>';
|
||
|
||
// -----------------------------------------------------
|
||
// Clear :
|
||
// -----------------------------------------------------
|
||
echo ' <i class="icoStyle fad fa-hand-sparkles" ></i>';
|
||
$theTitle='Permet aux éléments qui suivent un élément flottant de reprendre leur place comme si l\'élément était positionné sans flottement';
|
||
echo '<span title="' .$theTitle. '" class="itemReglage">Clear : </span>';
|
||
$title="Rétablit le flux. ";
|
||
echo '<select class="selectWbm" id="clearCss" name="clearCss" onChange="editMonForm(\'clearCss\',\'0\');" title="' .$title. '" >';
|
||
if ($cssClear[$theNumCss]=="-") {echo '<option value="-" selected>Aucune</option>';} else {echo '<option value="-" >Aucune</option>';}
|
||
if ($cssClear[$theNumCss]=="inherit") {echo '<option value="inherit" selected>Hérité</option>';} else {echo '<option value="inherit" >Hérité</option>';}
|
||
if ($cssClear[$theNumCss]=="initial") {echo '<option value="initial" selected>Défaut</option>';} else {echo '<option value="initial" >Défaut</option>';}
|
||
if ($cssClear[$theNumCss]=="left") {echo '<option value="left" selected >Gauche</option>';} else {echo '<option value="left" >Gauche</option>';}
|
||
if ($cssClear[$theNumCss]=="right") {echo '<option value="right" selected >Droite</option>';} else {echo '<option value="right" >Droite</option>';}
|
||
if ($cssClear[$theNumCss]=="both") {echo '<option value="both" selected >Les deux</option>';} else {echo '<option value="both" >Les deux</option>';}
|
||
if ($cssClear[$theNumCss]=="none" ) {echo '<option value="none" selected >Aucun</option>';} else {echo '<option value="none" >Aucune</option>';}
|
||
echo '</select>';
|
||
|
||
echo '</div>';
|
||
echo '</div>';
|
||
?>
|