begin process at 2012 05 28 10:52:43
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > DE JOLIES TABLEAUX

DE JOLIES TABLEAUX


 Information sur la source

Note :
1 / 10 - par 1 personne
1,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Niveau :Initié Date de création :23/12/2003 Vu :10 529

Auteur : XSimpson

Ecrire un message privé
Site perso
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 Description

Comment faire un tableau avec des angles bien ronds ??
Sa se complique, vous avez pu remarqué que j'aime faire simple, mais il est tellement plus simple de faire compliqué alors voilà pour vous une petite astuce simpathique.
Sachez que j'utilise ce script pour mon site perso que vous pouvez voir sur
http://www.chez.com/beerman

Pour faire simple ;-), créé un répertoire du nom de Tableau, comme sa vous comprendrez, ensuite créé un autre Répertoire Images, il faut respecter les minuscules et les MAJUSCULES. Dans ce répertoire vous mettrez 6 images différentes en bmp de tailles qui sont identiques 8x8 pixels.

Les images seront nommés comme suite:
bordhautgauche.bmp
bordhaut.bmp
bordhautdro it.bmp
bordbasgauche.bmp
bordbas.bmp
bordbasdroit. bmp
Chaque image doit faire exactement 8x8 pixels. Une fois ceci fait, il faut créer un autre fichier dans le répertoire Tableau, le nom du fichier est index.htm

Source

  • <img src="Images/bordhautgauche.bmp" align="left" hspace=0>
  • <script language="javascript" type="text/javascript">
  • <!--
  • var a, b, c;
  • a="480"; //doit être égal à la largeur du tableau
  • b=(a/8)-2;
  • c=0;
  • while(c<b){
  • document.write("<img src='Images/bordhaut.bmp' align='left' hspace='0'>");
  • c++
  • }
  • //-->
  • </script>
  • <img src="Images/bordhautdroit.bmp" hspace=0><BR>
  • <table bgcolor="white" width="480" style="border-left:thin ridge black; border-right:thin ridge black"> // width="480", c'est la largeur du tableau
  • <tr>
  • <td>
  • Ici votre texte qui est dans le tableau
  • </td>
  • </tr>
  • </table>
  • <img src="Images/bordbasgauche.bmp" align="left" hspace=0>
  • <script language="javascript" type="text/javascript">
  • <!--
  • var a, b, c;
  • a="480"; //doit être égal à la largeur du tableau
  • b=(a/8)-2;
  • c=0;
  • while(c<b){
  • document.write("<img src='Images/bordbas.bmp' align='left' hspace='0'>");
  • c++
  • }
  • //-->
  • </script>
  • <img src="Images/bordbasdroit.bmp" hspace=0>
<img src="Images/bordhautgauche.bmp" align="left" hspace=0>
<script language="javascript" type="text/javascript">
<!--
var a, b, c;
a="480"; //doit être égal à la largeur du tableau
b=(a/8)-2;
c=0;
while(c<b){
document.write("<img src='Images/bordhaut.bmp' align='left' hspace='0'>");
c++
}
//-->
</script>
<img src="Images/bordhautdroit.bmp" hspace=0><BR>
<table bgcolor="white" width="480" style="border-left:thin ridge black; border-right:thin ridge black"> // width="480", c'est la largeur du tableau
	<tr>
		<td>
                                Ici votre texte qui est dans le tableau
		</td>

	</tr>
</table>
<img src="Images/bordbasgauche.bmp" align="left" hspace=0>
<script language="javascript" type="text/javascript">
<!--
var a, b, c;
a="480"; //doit être égal à la largeur du tableau
b=(a/8)-2;
c=0;
while(c<b){
document.write("<img src='Images/bordbas.bmp' align='left' hspace='0'>");
c++
}
//-->
</script>
<img src="Images/bordbasdroit.bmp" hspace=0>

 Conclusion

A LIRE ATTENTIVEMENT !!
Les fichiers :
bordhautgauche.bmp
bordhaut.bmp
bordhautdroit.bm p
bordbasgauche.bmp
bordbas.bmp
bordbasdroit.bmp
D oivent être fais en niveau de gris, sinon il faut changer la couleur du tableau:
<table bgcolor="white" width="480" style="border-left:thin ridge couleurachanger; border-right:thin ridge black">
Pour changer la taille du tableau, enfin la largeur il faut changer plusieurs éléments tout d'abord dans les script il faut changer les valeurs de a:
a="480"; // Il faut changer cette valeur
Dans Table il y a width="480", c'est la largeur du tableau.

Je n'ai pas fais de script, peut-être que j'aurais dû ...


 Sources du même auteur

SUPPRIMER LA NOUVELLE PUB DE CHEZ.COM
Source avec Zip CONTREPÉTRIE
ENLEVER LA PUB SUR CHEZ.COM
EFFET D'OMBRE SUR UN TEXTE
DERNIÈRE MISE À JOUR

 Sources de la même categorie

Source avec Zip Source avec une capture SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth
Source avec Zip INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

Commentaires et avis

Commentaire de XSimpson le 23/12/2003 22:49:39

La dernière phrase, je me suis trompé c'est je n'ai pas fait de zip, peut-être que j'aurais du. Voilà

Commentaire de McPeter le 24/12/2003 01:58:37

ton script est extrémement compliqué pour faire ce que tu annonces ..
heureusement les CSS existent et sont bcp plus puissant pour ce genre de chose...
De plus pourquoi répéter ton image comme tu le fais ??
il suffit simplement de jouer sur la largeur de l'image ...
pour ton : bordhaut.bmp et bordbas.bmp
tu fais une image de 8px de haut apr 1px de largeur et ensuite il suffit de l'afficher comme ceci :
&lt;img src="images/bordhaut.bmp" width="480" height="8" /&gt;

Commentaire de XSimpson le 27/12/2003 20:27:30

T uas raison c'est sur que c'est plus simple comme tu le dis, mais je n'y avait pas penser, les feuilles de style CSS, je ne connais pas trop le CSS, donc j'ai résolu le problème comme je le pouvais.

Merci de ton aide

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,510 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales