J'essaie de réadapter un code de PHP / html / CSS récupéré ici : http://www.designdetector.com/2005/09/css-gradients-demo.php
Je voudrais faire un carré dégradé en haut à droite de l'écran avec une série de liens à l'intérieur.
En pratique le dégradé est généré par un code PHP qui crée une succession de 255 id en position: relative
J'ai mis le tout dans une id=boite en position : absolute mais...
1) je n'arrive pas placer cette "boite" à droite de l'écran sans "partir" de la gauche (margin left ou left), tout ce qui est "right" n'est pas pris en compte comme je le voudrais.
2) je n'arrive pas à insérer mes liens à l'intérieur de cette boite, peut-être à cause du dégradé qui est en relatif. Pourtant j'aurais cru pouvoir placer une div par dessus une autre, non ?
Merci de votre aide :)
PS: au cas où, voici un lien vers la page de test : http://francafrique.shadow-corp.org/test/index.php
et voici le code source :
<?php
header('Content-Type: text/html; charset=utf-8');
echo <<<HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>block de liens</title>
HTML;
/******************************************************************************************************************/
//paramétrages de la couleur du haut (0 à 255)
$red1 = '0'; //valeur du rouge
$green1 = '0'; // valeur du vert
$blue1 = '255'; // valeur du bleu
//paramétrages du bas (0 à 255)
$red2 = '255'; //valeur du rouge
$green2 = '0'; // valeur du vert
$blue2 = '0'; // valeur du bleu
/******************************************************************************************************************/
if ($red1 == '') {$red1 = 255;}
if ($red1 > 255) {$red1 = 255;}
if ($red1 < 0) {$red1 = 0;}
$red = $red1; //preserve original
if ($green1 == '') {$green1 = 255;}
if ($green1 > 255) {$green1 = 255;}
if ($green1 < 0) {$green1 = 0;}
$green = $green1;
if ($blue1 == '') {$blue1 = 0;}
if ($blue1 > 255) {$blue1 = 255;}
if ($blue1 < 0) {$blue1 = 0;}
$blue = $blue1;
if ($red2 == '') {$red2 = 255;}
if ($red2 > 255) {$red2 = 255;}
if ($red2 < 0) {$red2 = 0;}
if ($green2 == '') {$green2 = 255;}
if ($green2 > 255) {$green2 = 255;}
if ($green2 < 0) {$green2 = 0;}
if ($blue2 == '') {$blue2 = 255;}
if ($blue2 > 255) {$blue2 = 255;}
if ($blue2 < 0) {$blue2 = 0;}
/************************ début de la section de design*********************************/
echo <<<HTML
<style type="text/css">
html, body, #boite{
width : 255px;
}
html, body, #boite, #liens {
position: absolute;
top: 1%;
right: 1%;
}
HTML;
/************************ Fin de la section de design*********************************/
$red_dif = ($red1 - $red2);
if ($red_dif > -1) {// result not negative
$math_red = -1;
$step_red = $red_dif/255;
}
if ($red_dif < 0) {// result negative
$red_dif = ($red2 - $red1);
$math_red = 1;
$step_red = $red_dif/255;
}
$green_dif = ($green1 - $green2);
if ($green_dif > -1) {
$math_green = -1;
$step_green = $green_dif/255;
}
if ($green_dif < 0) {
$green_dif = ($green2 - $green1);
$math_green = 1;
$step_green = $green_dif/255;
}
$blue_dif = ($blue1 - $blue2);
if ($blue_dif > -1) {
$math_blue = -1;
$step_blue = $blue_dif/255;
}
if ($blue_dif < 0) {
$blue_dif = ($blue2 - $blue1);
$math_blue = 1;
$step_blue = $blue_dif/255;
}
for ($i = 1; $i < 256; $i += 1) {
//round values for CSS
$red_round = round($red,0);
$green_round = round($green,0);
$blue_round = round($blue,0);
echo <<<HTML
#d$i {background-color:rgb($red_round,$green_round,$blue_round); position: relative; height:1px;}
HTML;
if ($math_red == -1) {$red -= $step_red;} //check whether to add or subtract
if ($math_red == 1) {$red += $step_red;}
if ($math_green == -1) {$green -= $step_green;}
if ($math_green == 1) {$green += $step_green;}
if ($math_blue == -1) {$blue -= $step_blue;}
if ($math_blue == 1) {$blue += $step_blue;}
}
echo '</style>
</head>
<body>
<div id="degrade">
';
for ($j = 1; $j < 256; $j += 1) {
echo <<<HTML
<div id="d$j"><!-- --></div>
HTML;
}
echo <<<HTML
<table id="bandeau">
<tr><td><a href="http://survie.org/">Site de Survie</a></tr></td>
<tr><td><a href="http://billetsdafrique.survie.org/">Billets d'Afrique</a></tr></td>
<tr><td><a href="http://www.survie-media.info/spip/">Survie Media</a></tr></td>
<tr><td><a href="http://bpem.survie.org/">BPEM</a></tr></td>
<tr><td><a href="http://forum.survie.org/">Forum Survie</a></tr></td>
<tr><td><a href="http://wiki.survie.org/">Wiki Survie</a></tr></td>
<tr><td><a href="http://adherents.survie.org">Esp. adhérents</a></tr></td>
<tr><td><a href="http://interpellation.survie.org/">Esp. interpellation</a></tr></td>
</table>
</div>
HTML;
$datemod = date("j F Y", getlastmod());
?>
</body>
</html>
