28172 sujets

CSS et mise en forme, CSS3

Un background différent pour chaque page.

Bonjour,

Je viens de réaliser mon tout premier site.
Je possède donc plusieurs pages html.
Je suis en train de créer ma page css.
Le pb est que je cherche à mettre une fond pour chaque page html.
J'ai bien réussi à mettre un fond pour la première page mais comment faire pour les autres?
Dois-je créer plusieurs feuilles de style?

Merci à vous
Salut,

Non, inutile de multiplier les feuilles de style, leur intérêt principal étant de centraliser l'information de mise en forme pour éviter une plus lourde maintenance.

Il te suffit tout simplement de donner un identifiant au body de chacune de tes pages html, et d'appliquer un background différent pour chaque identifiant dans ta feuille de style. Smiley cligne
Salut,

Merci pour le réponse.
Alors , je possède 2 pages
accueil.html
page1.html

j'ai effectué ce css :

/* page css*/

body {
 background-image: url("Images/U.jpg");
 background-repeat: no-repeat ; /*pas de répition de l'image*/
 background-attachment: fixed ;
}

#page1
{	
 background-image: url("Images/E.jpg");
 background-repeat: no-repeat ; /*pas de répition de l'image*/
 background-attachment: fixed ;
 }


le pb est que j'ai le même fond pour les 2 pages Smiley ohwell
bon je débute Smiley confused désolée si je ne comprends pas de suite


je viens de rajouter ceci dans ma page html j'avais pas calé en fait mais ça ne fonctionne toujours pas.. ai-je commis une erreur?

img src="Images/E.jpg" id="page1" width="50" height="30" alt="page1">

Modifié par senderia (03 Jan 2010 - 12:58)
Salut,

Donc :

accueil.html

<body id="accueil">
...
</body>


page1.html

<body id="page1">
...
</body>


et dans le css

body#accueil {background-image: url("Images/accueil.jpg");} 
body#page1 {background-image: url("Images/page1.jpg");}
Hello,

Si ça ne marche toujours pas, peux-tu nous montrer le code de tes deux pages, ainsi que ton CSS ?
oui oui bien sûr.
Merci Smiley smile

page d'accueil : 

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-stict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title> Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
</head>
	<body id="accueil">
 		<h1> <font color="blue"><b><center> <span style="border:4px solid black;">Accueil </span> </center> </h1>
<font color="black"><b>
<br>

Bonjour, <br>
Voici mon site web<br>
<br>
Vous y trouverez :<br>
<br>
-  une page de présentation <br>

</b></font><br>

<img src="Images\point.gif"> <a href="http://localhost/CV/page1.html"target="_blank">1ère page><br />

</body>
</html>




page 1 :

 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-stict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title> page 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
</head>
	<body id="page1">
 		<h1> <font color="blue"><b><center> <span style="border:4px solid black;">1ère page </span> </center> </h1>
<font color="black"><b>
<br>

Bonjour, <br>
Sur cette premère page vous trouverez une présentation des données.....<br>


</b></font><br>

</body>
</html>



style.css :


/* page css*/

body#index{background-image: url("Images/U.jpg");}

body#cv{background-image: url("Images/D.jpg");}



voilà bon je débuten, je commence à peine... il n'y a encore rien dans mes pages, enfon pratiquement rien...
voilà.

merci
Alors, ta page 1 a l'id page1. Or dans le CSS, tu styles l'id CV...

Change ça :

<body id="page1">


par ça :

<body id="cv">


Et ça devrait fonctionner Smiley cligne

Sinon, si je peux me permettre quelques petites remarques :


<a href="http://localhost/CV/page1.html" target="_blank">


Il est à la fois inutile et très énervant pour l'internaute, et surtout pas du tout accessible, d'ouvrir les pages dans une nouvelle fenêtre.

<h1> <font color="blue"><b><center> <span style="border:4px solid black;">Accueil </span> </center> </h1>


Il est très fortement conseillé de séparer complètement le fond de la forme. En clair, ne pas mettre les déclarations CSS dans les pages HTML.

Donc tout ce qui commence par "<style=", est à supprimer et à mettre dans la feuille CSS.

<center>, de même, est à supprimer, utilise le CSS pour centrer tes éléments. En plus cette balise est dépréciée et invalide en xHTML strict.

Pour <b>, même chose Smiley cligne
Modifié par mistike (03 Jan 2010 - 13:51)
merci pour ta réponse.
Je viens de changer l'id mais ça ne fonctionne toujours pas. Smiley decu

Pour les autres remarques merci! je vais revoir tout ça.
alors, ce qui est bizarre c'est que j'ai recrée une 3 èeme page pour voir et là j'arrive à mettre un fond..
mais sur ma page 1 pas possible :s
re,
excuse-moi de la réponse tardive j'étais en train de travailler sur mes pages html..
en fait c'est tout bon.. j'ai tout repris et tout fonctionne bien Smiley smile

merci encore pour toute l'aide apportée.


Par contre, j'ai juste une petite questions. Pour les caractère comme
'
""
é


j'ai utilisé les codes spéciaux comme &quot;,....

sous ff tout est bien écrit mais sous IE il me met &quot; par exemple..
y'a qqchose que je n'ai pas mis?

merci Smiley smile
bizzz
Sujet clos
Aller à