[RESOLU]Coloriser les zones non remplies d'un site de taille fixe

Bonjour,

Voila j'ai créer un site internet de taille fixe et je voudrais coloriser les marges gauches et droites comme le fait piwmania par exemple.
Savez-vous comment il faut faire?

Merci de vos réponses!
Cordialement.
Modifié par benj91 (26 Aug 2009 - 17:12)

Salut,

C'est pas très clair, as-tu un lien ou une image, sinon mais essaie :

body{background-color:#ff0000;}

Modifié par pfoofen (22 Aug 2009 - 11:00)

Bonsoir benj91,

Premièrement, l'url du site que tu mentionnes en l'occurrence, "piwmania", ne serais-ce pas plutôt "pixmania" ?

Ensuite, tu nous dis vouloir colorier les marges gauche et droite comme ce site, mais quelles marges ? Celles des différents blocs qui composent le site ? où celles du design ? Autres marges ?

@pfoofen :

body{background-color:#ff0000;}

Ce code va colorier le background, le fond, de ton site d'une couleur rouge et non les bordures .

Exact c'est pixmania!
Je précise ma demande :
En fait, étant donné que le site est fixe, il y a des marges sur les côtés. J'entends par marge deux grands rectangles blancs situés à gauche et à droite du site (chez darty c'est gris). Je voudrais les coloriser aussi sans que cela n'affecte mon site.

J'en prodite pour faire une autre demande si vous me le permettez :
J'essaye de rajouter une bordure à droite d'un lien d'un menu mais mon code n'est pas prix en compte (il s'agit de la class : "style2") je ne sais pas pourquoi :S:

Code HTML :

<div><ul id="menuDeroulant">
 <li>
  <a href="index.html"><strong>ACCUEIL</strong></a>
  <ul class="sousMenu">
   <li><a href="index.html#Présentation">Présentation</a></li>
   <li><a href="index.html#L'esprit">L'esprit</a></li>
   <li><a href="index.html#Nos services">Nos services</a></li>
  </ul>
 </li>
...
</li>
    <li >
  <a href="partenaires.html" class="style2"><strong>PARTENAIRES</strong></a>
 </li>
</ul>
</div>

CSS associé :

}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: url("menu1.png") no-repeat;
padding: 5px;
border-right: 1px solid #FFFFFF;
text-decoration: none;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited .style2
{
display: block;
height: 1%;
color: #FFF;
background: url("menu1.png") no-repeat;
padding: 5px;
border-right: 1px solid #906018;
text-decoration: none;
}

Modifié par benj91 (23 Aug 2009 - 13:10)

J'ai failli oublier :
Merci pour le temps que vous prenez à réfléchir à mes problèmes!
:)

J'avais donc raison ^^

Donc c'est bien body que tu dois modifier pour les grosses marges de ton site.
Pour mettre une couleur :

body{background-color:#ff0000;}

Pour mettre une image :

body{background:url(url-de-ton-image.jpg) 0 0;}

Sinon est-ce normal que dans ton code html tu n'appel j'amais la classe "style2" ?

Salut,

@benj91 > Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises [ code] ... ici ton code [ /code] (sans espace après le crochet ouvrant) pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.

merci beaucoup pour vos réponses! C'est niquel pour le remplissage des marges!

Concernant a bordure que je n'arrive pas intégrer j'ai édité le code. La clase n'est absolument pasprise en compte.

Merci encore

Je ne sais pas sur quel couleur de fond se trouve ton code mais ta bordure est blanche...
De plus les <a> sont en display block donc si tu cherche tes bordures elles seront tout à droite de ta page.

Essai ce code :

#menuDeroulant li a:link, #menuDeroulant li a:visited

{display: block;
height: 1%;
color: #FFF;
background: url("menu1.png") no-repeat;
padding: 5px;
border-right: 3px solid #906018;
text-decoration: none;
}

PS : pourquoi "height: 1%;" ?
Modifié par pfoofen (23 Aug 2009 - 13:22)

Bonjour,

A priori le 1% c'est pour corriger un bug sur internet explorer (je me suis inspiré d'un tutoriel).

En fait mes bordures marchent très bien. Cependant, pour le dernier bouton je voudrais retirer la bordure blanche et la mettre en doré. C'est pourquoi je voudrais associer la couleur doré juste au li "partenaires".

benj91 a écrit :
A priori le 1% c'est pour corriger un bug sur internet explorer (je me suis inspiré d'un tutoriel).

C'est le «Holly Hack», utilisé pour régler un certain nombre de problèmes. On a constaté par la suite que cette technique était liée à un comportement du moteur de rendu d'Internet Explorer (versions 5 à 7), le HasLayout. On peut se renseigner sur le sujet par là.

benj91 a écrit :
C'est pourquoi je voudrais associer la couleur doré juste au li "partenaires".

Le support de la pseudo-classe :last-child laissant à désirer, le plus efficace sera à priori de mettre une classe spécifique à ce LI.

J'ai essayé d'appliquer une classe u "li" et en fait la bordure blanche passe par-dessus la dorée.

Pouvez-vous me dire laquelle de ces deux lignes est correcte?:

}
#menuDeroulant li a:link, #menuDeroulant li a:visited . style2
{
...
}

}
#menuDerolant li a:link, #menuDeroulant li :visited > .style2
{
...
}

Fait comme ça :

#menuDeroulant li a:link .style2, #menuDeroulant li a:visited .style2
{

...

}

Modifié par pfoofen (23 Aug 2009 - 21:52)

Salut,

avec ce code :

<li><a href="partenaires.html" class="style2"><strong>PARTENAIRES</strong></a></li>

ce serait plutôt :

#menuDeroulant li a.style2:link, #menuDeroulant li a.style2:visited {
   ...
}

En affectant la classe au LI la lecture serait un peu plus simple :

<li class="dernier"><a href="partenaires.html"><strong>PARTENAIRES</strong></a></li>

#menuDeroulant li.dernier a:link, #menuDeroulant li.dernier a:visited {
   ...
}

Voir également : les sélecteurs.

A noter que si tu as besoin d'utiliser height: 1% il ne faut cibler que les versions d'IE concernées à l'aide des commentaires conditionnels.
Modifié par Heyoan (23 Aug 2009 - 22:38)

MERCI beaucoup pour l'écriture de la ligne...ça marche enfin c'est génial!

Concernant les conditions je ne comprends pas complètement le fonctionnement :

- Il faut mettre la ligne de commentaire uniquement dans le html mais le height 1% est lui dans le CSS.

Pouvez-vous me dire ou je dois mettre le commentaire et ce que je dois écrire à l'intérieur?

Merci encore, je n'aurais jamais trouvé sans votre aide...

Eh bien en supposant que ton code css soit dans une feuille de style externe (styles.css) et qu'elle contienne quelque chose comme :

#menuDeroulant li.dernier a:link, #menuDeroulant li.dernier a:visited {
	display: block;
	color: #fff;
	background: url("menu1.png") no-repeat;
	padding: 5px;
	border-right: 3px solid #906018;
	text-decoration: none;
}

Tu peux :

* soit utiliser une feuille de styles spécifiques pour IE :

<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lte IE 6]><link type="text/css" rel="stylesheet" href="stylesie6.css" /><![ endif]-->

* soit utiliser directement l'élément STYLE :

<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lte IE 6]>
<style type="text/css">
#menuDeroulant li.dernier a:link, #menuDeroulant li.dernier a:visited {
	height:1%;
}
</style>
<![ endif]-->

A noter que j'ai rajouté un espace pour les [ endif] car sinon ils sont interprétés comme du BBCode sur le forum.