 |
|
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX Cours de JavaScript Liste de discussion Forums CountUs myCircle ClickInText XooIt 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 Kit graphique Foire aux questions Les membres Devenir annonceur Faire un lien Contact Compteur live Créer un forum Le PHP facile Comscripts Liens sponsorisés Page Rank Gifs animés, f... Le village de ... Easy-script.com Poésie et cita... Les kits graph... La cuisine de ... Azote.org - no... Web creation ... Créer son site... Electroniq... 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 "Graphisme / Présentation" du jour par feidakin Vous désirez centrer votre animation Flash, malheusement cela modifie souvent l'aspect de la page . il suffit de mettres les balises <center></center> entre les paramètres de l'animation, et le tour est joué. Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2010 EJS - Tous droits réservés | CNIL N° 844440 | 13/03/2010 12:38:21 | Design by | Gen. en 0.479 sec.
|
 |