Sujet Précédent Sujet Suivant

Difficile adaptation du CSS pour un degrade

Résolu/Fermé
new morning Messages postés 127 Date d'inscription lundi 13 août 2007 Statut Membre Dernière intervention 15 mai 2013 - 22 sept. 2008 à 23:36
new morning Messages postés 127 Date d'inscription lundi 13 août 2007 Statut Membre Dernière intervention 15 mai 2013 - 23 sept. 2008 à 17:28
Bonjour,

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="https://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&eacute;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>
A voir également:

1 réponse

Réponse 1 / 1
new morning Messages postés 127 Date d'inscription lundi 13 août 2007 Statut Membre Dernière intervention 15 mai 2013 19
23 sept. 2008 à 17:28
Au cas où ça intéresse qqun, la solution: 

<?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">
<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">



				#liens
				{
				   position: absolute;
					right: 7%; 
					Top: 8%;
				}
				
				#liens a
				{
					color: white;
					font-size: 1.2em;
					text-decoration:none;
				}
				
				#liens td
				{
					border: solid 2px white;
					text-align:center;
				}
				
				#liens a:hover
				{
					color: black;
					background-color: white;
					font-size: 1.5em;
				}

				
				#boite
				{
				   position: absolute;
				   border:solid 2px black;
					width: 255px;
					height:255px;
					right: 2%; 
					Top: 5%;
				}

				#couleurs	
				{
				position:relative;
				}
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="boite">
';

for ($j = 1; $j < 256; $j += 1) {
echo <<<HTML
<div id="d$j"><!-- --></div>

HTML;
}
echo <<<HTML
			</div>


	   <table id="liens">
				<tr><td><a href="https://survie.org/">Site de Survie</a></td></tr>
				<tr><td><a href="http://billetsdafrique.survie.org/">Billets d'Afrique</a></td></tr>
				<tr><td><a href="http://www.survie-media.info/spip/">Survie Media</a></td></tr>
				<tr><td><a href="http://bpem.survie.org/">BPEM</a></td></tr>
				<tr><td><a href="http://forum.survie.org/">Forum Survie</a></td></tr>
				<tr><td><a href="http://wiki.survie.org/">Wiki Survie</a></td></tr>
				<tr><td><a href="http://adherents.survie.org">Esp. adh&eacute;rents</a></td></tr>
				<tr><td><a href="http://interpellation.survie.org/">Esp. interpellation</a></td></tr>
		</table>

HTML;
?>
</body>
</html>
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
Dégradé moche
romain-1313 -
AnitaLeh -

16 réponses