Encadrement page web

Encadrement page web - HTML/CSS - Programmation

Marsh Posté le 11-11-2007 à 17:19:15    

Bonjour,
 
Je voudrais savoir comment je pouvais faire pour avoir un cadre tout autour d'une page. Comme ceci :
 
http://img128.imageshack.us/img128/5033/cadreqn0.jpg
 
Comment puis-je le faire ?
 
Merci :jap:

Reply

Marsh Posté le 11-11-2007 à 17:19:15   

Reply

Marsh Posté le 11-11-2007 à 17:22:49    

En CSS :
body {border:10px solid red}


Message édité par gatsu35 le 11-11-2007 à 17:23:03
Reply

Marsh Posté le 11-11-2007 à 17:29:48    

Ok, c'est si simple que ça ? Je vais essayer ! Et pour des autres couleurs ?
Merci !

Reply

Marsh Posté le 11-11-2007 à 17:32:44    

Si je veux mettre le code couleur FFFFFF ?

Reply

Marsh Posté le 11-11-2007 à 17:41:14    

body {border:10px solid #FFFFFF}
 

Reply

Marsh Posté le 11-11-2007 à 17:52:58    

Merci beaucoup ;)

Reply

Marsh Posté le 14-01-2008 à 11:20:43    

Bonjour,
 
Je souhaiterais mettre ceci tout autour d'une page : http://img155.imageshack.us/img155/2886/lignecoeurs007fr6.gif
 
Comment faire ?
 
 :jap:

Reply

Marsh Posté le 14-01-2008 à 12:44:49    

suicide toi
de rien :jap:


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-01-2008 à 12:50:50    

T'es d'un drôle. Je suis plié en 15...

Reply

Marsh Posté le 14-01-2008 à 18:51:53    

Mettre une bande d'image sur le contour d'une page n'est pas encore possible en CSS. En tout cas en CSS2 que supporte les navigateurs actuels.
 
On peut cependant faire un petit bricolage pour arriver a se rapprocher de l'effet souhaité sans que cela soit lourd au niveau du code.
 
Une solution possible pourrait etre :
1. de définir le coeur comme background de l'élément html du document
2. définir des marges de 16 pixels pour que l'element body soit a 16 pixels (c'est la taille de ton image coeur) du bord de l'element html.
3. appliquer a l'element body un background-color blanc par exemple pour ne pas voir le background de coeur qui se trouve derriere.
 
ca donnerai ca rapidement :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4. <title>Test</title>
  5. <meta name="title"      content="Test" />
  6. <meta http-equiv="Content-Type"     content="application/xhtml+xml; charset=utf-8" />
  7. <meta http-equiv="Content-Language" content="fr" />
  8. <style type="text/css">
  9.  * {
  10.   margin:    0;
  11.   padding:   0;
  12.  }
  13.  html {
  14.   background-image: url(coeur.gif);
  15.  }
  16.  body {
  17.   padding:   10px;
  18.   background-color: pink;
  19.   position:   absolute;
  20.   top:    16px;
  21.   bottom:    16px;
  22.   left:    16px;
  23.   right:    16px;
  24.  }
  25. </style>
  26. </head>
  27. <body>
  28. <h1>Test</h1>
  29. <p>
  30.  Blabla Coincoin ...
  31. </p>
  32. </body>
  33. </html>


 
Ca c'est la maniere propre de le faire ... mais qui malheureusement est un a peu pres.
Pour que le resultat visuel soit exactement ce que tu attends tu vas devoir jouer avec des divs par exemple que tu palceras en absolute. Enfin je te laisse chercher : tu as encore le temps, la saint valentin est dans un mois :p


Message édité par afbilou le 14-01-2008 à 18:53:57
Reply

Marsh Posté le 14-01-2008 à 18:51:53   

Reply

Marsh Posté le 14-01-2008 à 19:31:45    

Tu peux également faire un truc comme ca :
 
Creer une zone d'affichage centrée a l'ecran (le body). Cette zone d'affichage aura une taille fixe.
Tu appliques le background de coeur a cette zone.
Tu crées ensuite une zone de texte a l'interieur de cette premiere zone d'affichage. Ce sera un div.
Ce div sera placé a 16 pixels des bord de la zone d'affichage dans laquelle il se trouve.
 
Pour que l'effet soit beau, il va etre necessaire de refaire ton gif ! Il faudra que ton gif commence par un coeur entier. Actuellement ton premier coeur est coupé en deux ! Une fois que tu auras fait ton nouveau coeur de 16x16 entier et animé tu pourras le mettre en fond pour que l'effet soit, esperons le, celui que tu recherches.
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4. <title>Test</title>
  5. <meta name="title"      content="Test" />
  6. <meta http-equiv="Content-Type"     content="application/xhtml+xml; charset=utf-8" />
  7. <meta http-equiv="Content-Language" content="fr" />
  8. <style type="text/css">
  9.  * {
  10.   margin:    0;
  11.   padding:   0;
  12.  }
  13.  html {
  14.   position:   relative;
  15.   background-color: pink;
  16.  }
  17.  body {
  18.   background-image: url(coeur.gif);
  19.   width:    640px; /*multiple de 16 car ton coeur fait 16x16*/
  20.   height:    480px; /*multiple de 16 car ton coeur fait 16x16*/
  21.   position:   absolute;
  22.   top:    50%;
  23.   left:    50%;
  24.   margin-top:   -240px;
  25.   margin-left:  -320px;
  26.  }
  27.  #cadre {
  28.   background-color: pink;
  29.   position:   absolute;
  30.   top:    16px;
  31.   bottom:    16px;
  32.   left:    16px;
  33.   right:    16px;
  34.  }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="cadre">
  39.  <h1>Test</h1>
  40.  <p>
  41.   Blabla Coincoin ...
  42.  </p>
  43. </div>
  44. </body>
  45. </html>


Message édité par afbilou le 14-01-2008 à 19:34:06
Reply

Marsh Posté le 02-08-2012 à 12:53:10    

Reply

Marsh Posté le 02-08-2012 à 15:33:15    

Pour faire des bordure simple  :http://www.w3schools.com/css/css_border.asp
 
Pour les images :  background-image: url(nomdelimage.format) sans oublier le chemin de l'image :D

Reply

Marsh Posté le 02-08-2012 à 22:28:42    


moi ce que je trouve drole c'est ta reaction 4 ans apres :o


Message édité par genghis77 le 02-08-2012 à 22:28:56

---------------
Je sais que je plais pas à tout le monde... mais quand je vois à qui je plais pas... je me demande si ça me dérange vraiment
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed