Encadrement page web

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Encadrement page web

Vivemotion

Bonjour,

Je voudrais savoir comment je pouvais faire pour avoir un cadre tout autour d'une page. Comme ceci :

Comment puis-je le faire ?

Merci :jap:

Publicité

gatsu35

Blablaté par Harko

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

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

Vivemotion

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

Vivemotion

Si je veux mettre le code couleur FFFFFF ?

gatsu35

Blablaté par Harko

body {border:10px solid #FFFFFF}

Vivemotion

Merci beaucoup

Vivemotion

Bonjour,

Je souhaiterais mettre ceci tout autour d'une page :

Comment faire ?

:jap:

mIRROR

Chevreuillobolchévik

suicide toi
de rien :jap:

Message cité 1 fois

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

Vivemotion

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

afbilou

pouet your life

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test</title>
<meta name="title" content="Test" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-image: url(coeur.gif);
}
body {
padding: 10px;
background-color: pink;
position: absolute;
top: 16px;
bottom: 16px;
left: 16px;
right: 16px;
}
</style>
</head>
<body>
<h1>Test</h1>
<p>
Blabla Coincoin ...
</p>
</body>
</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

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

Publicité

afbilou

pouet your life

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test</title>
<meta name="title" content="Test" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
position: relative;
background-color: pink;
}
body {
background-image: url(coeur.gif);
width: 640px; /*multiple de 16 car ton coeur fait 16x16*/
height: 480px; /*multiple de 16 car ton coeur fait 16x16*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -240px;
margin-left: -320px;
}
#cadre {
background-color: pink;
position: absolute;
top: 16px;
bottom: 16px;
left: 16px;
right: 16px;
}
</style>
</head>
<body>
<div id="cadre">
<h1>Test</h1>
<p>
Blabla Coincoin ...
</p>
</div>
</body>
</html>

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

sield

Tueur de zombies !

mIRROR a écrit :

suicide toi
de rien :jap:

[:power600]

Message cité 1 fois

noxno

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

genghis77

-_-'

sield a écrit :

[:power600]

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

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

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

FORUM HardWare.fr

Programmation

HTML/CSS

Encadrement page web

Sujets relatifs
administrer un routeur cisco sous windows via une page web	date 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 onglets	recharger une partie de la page
Besoin d'avis pour organiser ma page	Obtenir le code source d'une page externe
Se loguer automatiquement sur une page web	incrementer un compteur a partie d une page xml ?
Plus de sujets relatifs à : Encadrement page web

Page générée en 0.073 secondes