Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2039 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Encadrement page web

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Encadrement page web

n°1641050
Vivemotion
Posté le 11-11-2007 à 17:19:15  profilanswer
 

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:

mood
Publicité
Posté le 11-11-2007 à 17:19:15  profilanswer
 

n°1641051
gatsu35
Blablaté par Harko
Posté le 11-11-2007 à 17:22:49  profilanswer
 

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


Message édité par gatsu35 le 11-11-2007 à 17:23:03
n°1641059
Vivemotion
Posté le 11-11-2007 à 17:29:48  profilanswer
 

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

n°1641062
Vivemotion
Posté le 11-11-2007 à 17:32:44  profilanswer
 

Si je veux mettre le code couleur FFFFFF ?

n°1641068
gatsu35
Blablaté par Harko
Posté le 11-11-2007 à 17:41:14  profilanswer
 

body {border:10px solid #FFFFFF}
 

n°1641072
Vivemotion
Posté le 11-11-2007 à 17:52:58  profilanswer
 

Merci beaucoup ;)

n°1670661
Vivemotion
Posté le 14-01-2008 à 11:20:43  profilanswer
 

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

n°1670708
mIRROR
Chevreuillobolchévik
Posté le 14-01-2008 à 12:44:49  profilanswer
 

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
n°1670710
Vivemotion
Posté le 14-01-2008 à 12:50:50  profilanswer
 

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

n°1671050
afbilou
pouet your life
Posté le 14-01-2008 à 18:51:53  profilanswer
 

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
mood
Publicité
Posté le 14-01-2008 à 18:51:53  profilanswer
 

n°1671078
afbilou
pouet your life
Posté le 14-01-2008 à 19:31:45  profilanswer
 

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
n°2152203
sield
Tueur de zombies !
Posté le 02-08-2012 à 12:53:10  profilanswer
 
n°2152268
noxno
Posté le 02-08-2012 à 15:33:15  profilanswer
 

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

n°2152385
genghis77
Graphiste
Posté le 02-08-2012 à 22:28:42  profilanswer
 


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

---------------
Genghis achat/vente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Encadrement page web

 

Sujets relatifs
administrer un routeur cisco sous windows via une page webdate de modification de page en javascript [résolu en php]
Comment appeler une page externe en php?Tester une page web
Quelle techno. utiliser pour dév. page web avec ongletsrecharger une partie de la page
Besoin d'avis pour organiser ma pageObtenir le code source d'une page externe
Se loguer automatiquement sur une page webincrementer un compteur a partie d une page xml ?
Plus de sujets relatifs à : Encadrement page web


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR