 |
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX new! Cours de JavaScript Liste de discussion Forums CountUs myCircle Referencement Créat. de bannière HTML / CSS PHP / MySQL Réferencement Graph / Présentation Toutes les astuces Ajouter un article
 
Hebergement web Referencement Sites webmasters XHTML - CSS2 PHP Affiliation - Pub FAI Annuaire webmaster Kits graphiques Comparateur de prix Foire aux questions Les membres Devenir annonceur Faire un lien Contact Hebergement gratuit Le PHP facile Horoscope Comscripts WebmasterClub L'écriteau Faro-dessing Activeartanima... Le village de ... Images gifs an... Netsources Easy-script.com Création de site Créer son site... K i s s design Les autres Votre site ici
? |
Article posté par : krucial Date de mise en ligne : 20-04-2004 Niveau : Assez facile >> Ajouter un article  Cadre aux coins arrondis
1 - Des images pour faire les coins.
Ouvrez votre logiciel graphique preferé, et créez 4 images comme celle-ci :     Le technique pour créer ses images est assez simple. tracez, à l'aide de l'outil de sélection, un rond placé dans le coin de votre image. Avec le pot de peinture remplissez l'interieur de ce rond de la couleur de votre cadre. Ensuite, recadrez l'image pour ne garder qu'un coin. Repetez l'operation pour chaque coin. Créez aussi une image .gif transparente de 1x1 pixels. 2 - On place tout dans un tableau
Il ne vous reste plus qu'a créer un tableau pour y inserer vos images et votre texte. Voici un exemple de code HTML :
<table width="300" cellpadding="0" cellspacing="0" border="0"> <tr> <td width=10><img src="../img/truc4.gif" border="0" width="10" height="10" /></td> <td width=280 bgcolor=#FFB400><img src="../img/transparent.gif" border="0" width="1" height="1" /></td> <td width=10><img src="../img/truc3.gif" border="0" width="10" height="10" /></td> </tr> <tr> <td width="10" bgcolor="#FFB400"><img src="../img/transparent.gif" border="0" width="1" height="1"></td> <td width="280" bgcolor="#FFB400" align="center"><B>Et voila le resultat !<br />Vous en pensez quoi?</b></td> <td width="10" bgcolor="#FFB400"><img src="../img/transparent.gif" border="0" width="1" height="1"></td> </tr> <tr> <td width="10"><img src="../img/truc1.gif" border="0" width="10" height="10"></td> <td width="280" bgcolor="#FFB400"><img src="../img/transparent.gif" border="0" width="1" height="1"></td> <td width="10"><img src="../img/truc2.gif" border="0" width="10" height="10"></td> </tr> </table> L'exemple donne ce résultat (seule les bordures du tableau ont été modifiées pour bien visualiser sa construction)
Pourquoi des images transparentes ? Elles servent à preciser au navigateur que la cellule n'est pas vide et qu'il faut donc bien lui donner sa couleur de fond. Les images transaprentes sont aussi tres utiles pour dimensionner au pixel pres des petites cellules. 3 - resulat final
Annotations des visiteurs :
>> Poster une annotation sur cette astuce
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
De 
 |
 |
 |
La mini-astuce "PHP / mySQL" du jour par @Rano Lorsque vous voulez faire une recherche sur les fonctions PHP, allez simplement à l'url : http://fr.php.net/fonction_que_vous_cherchez (par exemple http://fr.php.net/mail) Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 12/05/2008 07:56:43 | Design by Studcrea | Gen. en 0.489 sec.
|
 |