18073 sujets

Questions générales et questions de débutants

[RESOLU]Changer la couleur de la bordure du conteneur selon la page

Bonjour,

j'ai utilisé le tuto du site en 5 étapes et j'aimerais en fait changer la couleur de la bordure de la div "conteneur" dans chaque page qu'ouvre le menu.

exemple de menu :

Accueil -- Truc1 -- Truc2

la bordure en bleu sur la page d'accueil, la bordure en rouge quand on clique sur Truc1......

Merci d'avance, je sais que je m'adresse à des professionnels ! Smiley biggrin
Modifié par Oook (18 May 2006 - 15:34)
Salut Oook

Pourrais-tu préciser de quel tuto tu parles, car là, on peut dire que ton explication est quand même un peu vague !

Sinon, de prime abord, je te conseillerai d'employer des classes pour lesquelles tu indiques à chaque fois une couleur de bordure différente.
 
.bleu{border-color : blue}
.rouge{border-color : red}


Par exemple ...
A plus Smiley cligne
C'est vrai que je suis un peu vague.

J'ai utilisé le tuto de la construction d'un site sans frame en 5 étapes

le code css de ma div conteneur et de mes div menu chacune d'une couleur différente :
		
div#conteneur
{
width: 60% ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #0099CC;
}

ul#menu1
{
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(images/bg_menu.gif) repeat-x 0 -10px ;
list-style-type: none ;
}

ul#menu2
{
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(images/bg_menu2.gif) repeat-x 0 -10px ;
list-style-type: none ;
}

ul#menu3
{
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(images/bg_menu3.gif) repeat-x 0 -10px ;
list-style-type: none ;
}



Chaque case de menu à une image de fond de couleur différente, et j'aimerais donc que lorsque je clic sur une des cases la bordure du conteneur change.

J'espere etre plus clair !

Je vais essayer les classes merci de ton aide !
Bonjour,



Première chose à faire Oook ajouter des ID à BODY dans le balisage :
Page accueil : <body id="accueil">
Page truc1 :   <body id="truc1">
Page truc2 :   <body id="truc2">
Page truc3 :   <body id="truc3">
...

Dans la partie CSS, on va modifier la bordure du conteneur en fonction de l'ID de body :
#conteneur {
   width: 60% ;
   margin: 0 auto ;
   text-align: left ;
   }

body#accueil #conteneur {border: 2px solid #couleur1;}
body#truc1 #conteneur   {border: 2px solid #couleur2;}
body#truc2 #conteneur   {border: 2px solid #couleur3;}
body#truc3 #conteneur   {border: 2px solid #couleur4;}


Ici on se sert du conteneur, mais on peut utiliser n'importequoi, comme un lien (un élément LI, etc.) - à condition de lui attribuer au préalable un ID (différent de celui du body !) : 

BALISAGE :
<body id="accueil">
<a id="accueilNav" href="..." title="" >bla bla bla</a>

CSS :
body#accueil a#accueilNav {(comportement...)}


a écrit :
Chaque case de menu à une image de fond de couleur différente
Si l'image se compose d'un fond uni, pas besoin d'image pour avoir ça.
cool merci pour les infos je teste ça !

par contre, l'image de fond est de couleur uni mais c'est la technique utilisée dans le tuto alors je n'ai pas modifié...en plus ça marche nickel...lol

je te tiens au courant !

Smiley edit
Ca marche nickel, merci beaucoup ça me fait avancer !
Modifié par Oook (18 May 2006 - 15:05)
Sujet clos
Aller à