Comment colorer l'exterieur d'une page - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Comment colorer l'exterieur d'une page

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Comment colorer l'exterieur d'une page (Lu 975 fois)

Comment colorer l'exterieur d'une page
« sur: le 04-12-2008 a 16:36:27 »

kimble89
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Bonjour,
Je souhaiterais colorerl'extérieur de ma page (l'entourage) pour délimiter
et mieux faire ressortir l'interieur de ma page qui est blanche.
Je n'arrive pas à trouver comment faire ?
Ou alors comment faire une bordure couleur pour toute la page ?
Je pense que c'est à partir du MWD ?
(La largeur de ma page est en 950px)
Quel est la balise qu'il faut modifier ?
Merci de votre aide.
Kimble

Rapporter au modérateur

Re:Comment colorer l'exterieur d'une page
« Répondre #1 sur: le 04-12-2008 a 18:50:03 »

souifi
Membre récent

Hors-Ligne

Messages: 25

Je suis un lama!

Faut que tu utilise la propriété body en css

body {
   background-color:#000; /* #xxxxxx et le code hexadécimal de ta couleur */
   background-image:url('http://mon-image.png'); /* pour utiliser une image comme fond */
   background-repeat:repeat-x; /* repete l'image sur la largeur de la page */
   background-repeat:repeat-y; /* repete l'image sur la hauteur de la page */
}

pour une bordure il y a le sélecteur border

#id_de_mo_div {
   border: 1px solid #000;
}

http://www.cssdebutant.com/

Rapporter au modérateur

Re:Comment colorer l'exterieur d'une page
« Répondre #2 sur: le 04-12-2008 a 23:57:09 »

kimble89
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Bonsoir,
Merci de ta réponse. En effet ça marche , pour le fond comme pour les bordures
il y a juste une chose que je n'arrive pas à régler : c'est que mes balises Container , masthead,et Page content ont une largeur de 950px (width: 950px;)
J'ai aussi mis un width: 950px;sur ma balise body, mais en fait la bordure porte sur toute la largeur de l'écran et pas uniquement sur la largeur de 950px.
Comment faut-il faire?
Merci de votre aide
Kimble

Rapporter au modérateur

Re:Comment colorer l'exterieur d'une page
« Répondre #3 sur: le 05-12-2008 a 01:21:14 »

souifi
Membre récent

Hors-Ligne

Messages: 25

Je suis un lama!

C normal "body" définit toute la page, après pour des élément particulier il faut les définir.

Code:

#conteneur_1 {
border: 1px solid #CCC;
}

Dans l'exemple ci-dessus, on appliquera des bordures grise seulement au bloc avec pour ID "conteneur_1"

Code:

<div id="conteneur_1">
tout ce qui se trouve entre ces deux balises se trouverons a l'intérieur de nos bordures grise
</div>

On peut aussi definir des class

Code:

.style_1 {
color: red; // on peut aussi definir une couleur par son nom anglais
}

Dans l'exemple ci-dessus, on appliquera la couleur rouge a tout le text ayant la class "style_1"

Code:

<div id="conteneur_1">
tout ce qui se trouve entre ces deux balises se trouverons a l'intérieur de nos bordures grise <span class ="style_1">et ce text en rouge</span>
</div>

Tu peut aussi definir un aspect precis pour chacune de tes balise

Code:

a {
text-decoration:none;
}

Aura pour effet de ne pas souligner tout les lien de ta page....
Bon bref tout sa pour te donner une idée de toutes les possibilités du CSS

Pour en revenir a ton cas, supprime ton ajout barbare de body (width: 950px;) créer un conteneur général de ta page si tu en as pas avec les propriétés CSS adéquate.
cela devrais ressembler a sa.

Code:

<html>
<head>

<style type="text/css">

#MON_CONTENEUR_GENERAL {

/* Different style de bordure => dotted,groove,solid,double,ridge,inset,outset...
Voila un petit panache de différentes possibilités en donnant un style respectivement aux bords gauche, droit, bas, haut */

border-left: dotted;
border-right: groove;
border-bottom: 1px solid #EEE;
border-top: 4px inset #999

}

</style>
</head>

<body>


<div id="MON_CONTENEUR_GENERAL">

<div id="Container">
blablabla...
</div>

<div id="masthead">
blablabla...
</div>

<div id="Page">
blablabla...
</div>

</div>


</body>

</html>