28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème couleur de fond

Bonjour bonjour,

Voici l'url du site que je développe en ce moment même : http://www.korx-crew.com/test/dotclear/

Je travaille actuellement sur le design pour lequel j'ai bien avancé mais je n'arrive pas a afficher un fond blanc derrière ma barre de menu (boutons rouges).

J'ai en effet appliqué a mon body un fond correspondant a la couleur du pied de page de façon à ne pas casser le design si on passe en plein écran.

Il faudrait sans doute créer un conteneur avec un width: 100% sous les news avec dedans ma barre de menu et également un fond blanc.Je n'arrive pas à obtenir le résultat esconté. Merci d'avance.

Voici l'url de ma feuille de style : http://www.korx-crew.com/test/dotclear/themes/default/style.css


Cdt
Modifié par Klesk (13 Apr 2007 - 15:58)
Bonjour,

Je ne suis pas certain d'avoir bien compris ton problème, mais s'il s'agit du menu auquel tu veux appliquer une couleur de fond, tu devras créer un contexte de formattage par l'ajout, par exemple, de:
#menu_navigation {overflow:auto}
Alors en fait ce n'est pas simplment la div du menu mais le fond derrière qui laisse apparaitre la coulour du <body>. Si je met le body en blanc alors quand on passe ne plein écran j'ai une bande blanche sous le pied de page ce qui est très laid.

L'idée là c'est de mettre donc la couleur du pied de page a la balise <body> et d'arriver a mettre en blanc l'espace entre les news et le pied de page dans lequel se situ notament mon menu.
Pour commencer, une bêtise qui fait peur :
.news {
	height:400px;
}
Smiley rolleyes

(Non franchement, le gars qui fige un site en hauteur il y a quelque chose qu'il n'a pas compris au média Web, hein... faut penser extensibilité, boudiou !)


Au passage, si je désactive les images de fond (oui oui, on peut désactiver les images de fond...), je me retrouve avec du texte noir sur fond gris très sombre. J'ai déjà vu plus lisible. Smiley cligne
Penser systématiquement à doubler les images de fond par une couleur de fond de teinte proche (sauf dans les cas où on a spécifiquement d'un fond transparent en dehors de l'image).


Au-passage-seconde-édition, je peux me tromper mais il me semble que div#bas n'a aucune raison d'être flottant (ou alors c'est probablement une mauvaise raison Smiley lol ).


Au-passage-ter, si je passe la couleur de fond de body à "white", j'obtiens l'effet voulu et je n'ai pas de blanc gênant en bas (du moins dans Firefox).
Ah oui, au sujet de mon laïus ci-dessus comme quoi les blocs de contenu en hauteur fixe c'est mal (en fait non, ça n'est pas mal, c'est juste stupide Smiley lol ), je signale toujours en passant qu'il peut parfois être utile de travailler avec des hauteurs minimales, c'est à dire en CSS avec la propriété min-height.
merci bcp pour ces quelques éléments. En revanche pour ce qui est du fond quand je met blanc comme c'était le cas avant en plein écran et uniquement en plein écran il y a une bande blanche sous le pied de page.

Je vais corriger les quelques éléments en revanche j'aime bien comprendre pourquoi ci ou ça est mal ça serait sympa de m'expliquer dans quel contexte etc.

Merci

PS: en ce qui concerne la hauteur figée, il faut savoir que le contenu ne dépassera jamais une certaine hauteur car mes news ne seront pas alignée verticalement comme sur 99% des sites web actuels dénués d'inventitivité Smiley smile et d'autre part leur nombre en page principale sera limité ^^.
Modifié par Klesk (11 Apr 2007 - 22:23)
Bon j'ai remplacé height: 400px par un min-height qui semble en effet plus logique.

J'ai remis un fond blanc comme ça tu pourras constater la boulette en pied de page en faisant F11.

Et comme ya 100 fois plus de chance qu'un utilisateur lambda passe en pleine écran plutot que ne désactive les images de fond tu comprendras mon choix Smiley smile .

Toutefois si je peux trouver une alternative qui m'apporte bonheur et joie dans les deux cas alors je suis super preneur.
Modifié par Klesk (11 Apr 2007 - 22:31)
Klesk a écrit :
Bon j'ai remplacé height: 400px par un min-height qui semble en effet plus logique.

Oui. Même si tu as prévu de ne pas dépasser une certaine quantité de contenu, ton contenu reste du texte, et tu ne peux pas contrôler ce qu'en fait l'utilisateur (et tant mieux). Lire à ce sujet :
Accessibilité : Agrandissement de la taille des polices
Typographie web : gérer la taille du texte avec les « em »

Klesk a écrit :
J'ai remis un fond blanc comme ça tu pourras constater la boulette en pied de page en faisant F11.

Effectivement, on voit une bande blanche... en plein écran avec un écran d'au moins 1024px de haut (j'ai un 1280x1024... avec un 1024x768 ou même un 1280x960, j'aurais toujours pu me brosser...).

Une solution intéressante peut être de donner une couleur de fond sombre (le gris sombre) à body, et une couleur de fond blanche à un div global qui viendrait contenir l'ensemble des autres éléments.

C'est à dire qu'on passerait à la structure suivante :
[b]HTML :[/b]
<body>
<div id="global">
	<div id="header-wrap"></div>
	<div class="news"></div>
	<ul id="menu_navigation"></ul>
	<div id="bas"></div>
</div><!-- fin de div#global -->
</body>

[b]CSS :[/b]
body {background: #222; color: white;}
div#global {background: white; color: black;}

(Tu remarqueras qu'à chaque fois que je donne une couleur de fond, je donne aussi une couleur de texte. Si l'utilisateur désactives les images de fond (ou si celles-ci ne se chargent pas bien parce que le serveur est à la peine), on aura toujours un couple couleur de fond + couleur de texte pour assurer une bonne lisibilité.

C'est en travaillant ce genre de détail (y compris des questions obscures d'accessibilité) que l'on peut faire un site de qualité (sur le plan technique, s'entend). Smiley cligne

Klesk a écrit :
Et comme ya 100 fois plus de chance qu'un utilisateur lambda passe en pleine écran plutot que ne désactive les images de fond tu comprendras mon choix Smiley smile .

Attention à ne pas affirmer des choses lorsque tu ne maitrises pas le sujet. En l'occurrence, je pense que la part des utilisateurs qui désactivent les images de fond, les couleurs de fond (ce qui désactive aussi les images de fond) ou toutes les images, aditionnée à la part des utilisateurs d'entreprises derrière un proxy qui bloque les images ou certaines images, et encore quelques autres cas d'utilisation « atypiques »... devrait dépasser la part des utilisateurs en 1280x1024 qui visitent des pages en mode plein écran.

Je ne dis pas tout ça pour t'embêter, mais je pense que tu aurais intérêt à te pencher sur les question de l'accessibilité des sites web, par exemple. Et à perdre le réflexe du « le visiteur lambda il sera pas dans ce cas donc c'est pas grave », qui est tout de même une réponse un peu facile et hélas peu argumentée.

À ce propos, si tu lis l'anglais je t'invite à jeter un oeil à ce petit billet :
http://www.456bereastreet.com/archive/200704/lame_excuses_for_not_being_a_web_professional/


Bonne continuation. Smiley smile
Si tu regardes le source de ma page dans sa globalité tu verras que je me pose quand même quelques questions niveau accessibilité Smiley smile et d'ailleur si ce n'était pas le cas je ne serai pas là car j'aurai pu faire la meme chose avec une tonne de <table> et un code dégueulasse et lourd Smiley smile .

Mon but est de progresser à ce niveau et tu m'as bien aidé je t'en remerci Smiley smile .

N'ayant pas encore ton niveau en xhtml/css le rapport fond/texte avec certaines options désactivés ne m'était pas venu à l'esprit car je savais qu'on pouvait désactiver un certain nombre de choses mais pas forcément cet élément.

Merci merci et merci Smiley smile .
Klesk a écrit :
N'ayant pas encore ton niveau en xhtml/css le rapport fond/texte avec certaines options désactivés ne m'était pas venu à l'esprit car je savais qu'on pouvait désactiver un certain nombre de choses mais pas forcément cet élément.

Travailler avec Opera ou la barre d'outil Web Developer pour Firefox peut être utile.
Opera : options pour désactiver les styles, désactiver les images, passer noir sur blanc (texte noir, désactivation des images et couleurs de fond...), etc.
Web Developer pour Firefox : même choses et plus encore.
Bon j'ai fait quelques modifs mais ça ne donne le bon résultat que sous ie. Sous firefox et opéra j'ai toujours l'arrière plan des boutons en #272727 comme si le blanc de la div global n'était pas pris en compte. Ou alors je suis un boulet et c'est moi qui 'y prends mal.

Le souci est peut etre que cet espace est vide et que mon menu n'est inclu dans aucune div, je ne sais pas je sèche Smiley decu

PS: avec firebug (sous firefox) je m'aperçoit me la div global s'arrete juste a la fin de la div news, c'est à dire avant le menu et donc le reste et c'est ce qui fait que le blanc en fond n'est pas pris en compte a cet endroit. Qu'est-ce qui peut causer ça ??
Modifié par Klesk (12 Apr 2007 - 01:12)
J'ai dégagé le float:left pour div#bas ce qui me corrige en parti le problème.

Maintenant j'ai mon menu par dessus mon pied de page (sous firefox et opera uniquement, sous ie7 ça fonctionne bien à l'affichage) alors que je voudrais qu'il soit juste avant mais collé.
Modifié par Klesk (12 Apr 2007 - 01:17)
J'ai mis la liste de mon menu dans une div avec une hauteur de 23px. Ceci corrige le poblème sous firefox et opéra mais m'en cause un sous ie...


ouinnnnnnnnnnnnnnnnn Smiley decu Smiley decu Smiley decu

Bon vais me coucher...

PS: petite précision, sous ie7 mon menu passe sous mon pied de page et sous ie6 il est au dessus avec un décalage de quelque pixel Smiley decu
Modifié par Klesk (12 Apr 2007 - 09:03)
Pour la div#global qui ne prend pas toute la hauteur, c'est probablement une question de dépassement de flottants.
Cf. Éléments flottants qui dépassent de l'élément parent.

En l'occurrence, un clear: both sur div#bas serait sans doute la solution la plus intéressante.
(Et virer ce width: 100% sur div#bas, qui ne sert strictement à rien sauf peut-être à t'attirer des emmerdements (bugs de HasLayout dans IE Win).

Klesk a écrit :
J'ai mis la liste de mon menu dans une div avec une hauteur de 23px. Ceci corrige le poblème sous firefox et opéra mais m'en cause un sous ie...

Donner une hauteur ou une largeur fixe (en pixels ou pourcentages ou autre) à un bloc provoque souvent quelques jolis bugs dans IE... ou parfois permet d'en « corriger ». Cf. Avoir le layout - Le concept de hasLayout dans IE/Win.

Attention, tu as maintenant deux éléments qui portent le même identifiant ! (id="menu_navigation") : la div et le ul. Il faudrait harmoniser ça.
Pour la div#global je n'ai plus le problème, c'était visiblement lié au float:left que j'avais laissé.

Le but du width: 100% sur le div#bas était de permettre un étirement horizontal Smiley decu .

J'ai remarqué qu'avec la mise en place de la div#global je n'ai plus cet étirement au niveau du header et pied de ma page. Comment faire en l'état pour permettre un étirement en largeur qui s'adapterai à la résolution ?

Ne devrais-je pas faire une feuille de style différente pour IE car je sens que je ne vais pas m'en sortir là...
Modifié par Klesk (12 Apr 2007 - 13:15)
Klesk a écrit :
Le but du width: 100% sur le div#bas était de permettre un étirement horizontal Smiley decu .

Les éléments de type bloc, à partir du moment où ils ne sont pas flottants ou positionnés en absolu, prennent toute la largeur disponible dans leur conteneur. D'où l'inutilité du width: 100%.

Klesk a écrit :
J'ai remarqué qu'avec la mise en place de la div#global je n'ai plus cet étirement au niveau du header et pied de ma page. Comment faire en l'état pour permettre un étirement en largeur qui s'adapterai à la résolution ?

Qu'est-ce que tu appelles « étirement » au juste ? Tes blocs de structure ne sont pas flottants ni positionnés en absolu, et ils prennent toute la largeur disponible. Donc ça « s'étire » et c'est « adapté à la résolution ».

Klesk a écrit :
Ne devrais-je pas faire une feuille d style différente pour IE car je sens que je ne vais pas m'en sortir là...

Mauvais plan. Adresser quelques correctifs ponctuels à IE6 et inférieurs dans une feuille de style appelée via des commentaires conditionnels, pourquoi pas. Cf. la FAQ du forum pour les commentaires conditionnels.


Sinon :
- mets les ul de div#bas à margin: 0; padding: 0;, pour éviter des différences entre les navigateurs (voir la FAQ pour de plus amples explications) ;
- remettre à plat le style de ul#menu_navigation (et pas #menu_navigation ul...).
J'ai renommé ma div#menu_navigation en div menu et du coup dégagé la hauteur fixe en la remplaçant par un min-height et là ça fonctionne sous ie, opera et firefox c'est magique Smiley smile .

Pour les feuille de style différente pour IE j'entendais en effet l'utilisation de conditions, mais finalement je ne vais peut etre pas en avoir besoin.

Je vais corriger les quelques éléments dont tu m'as parlé. Je suis content en l'espace d'un post j'en apprends pas mal car je n'étais pas super alaise avec les notions de sposition ou float pour les div.

Je vais d'ailleur je pense investir dans un bouquin sur css, sans doute un de ceux qui sont présentés en haut du forum.
Florent V. a écrit :

Les éléments de type bloc, à partir du moment où ils ne sont pas flottants ou positionnés en absolu, prennent toute la largeur disponible dans leur conteneur. D'où l'inutilité du width: 100%.


Bien compris c'est corrigé.

Florent V. a écrit :

Sinon :
- mets les ul de div#bas à margin: 0; padding: 0;, pour éviter des différences entre les navigateurs (voir la FAQ pour de plus amples explications) ;


C'est fait mais cela me génère du coup un décalage sous ie et non sous firefox et opera.Voici le code incriminé :


        <div id="ancillary">          
          <div class="block">
            <h2>Calendrier</h2>
            <div id="cadrillage">
              <div id="calendrier">
<?php #Affichage du calendrier 
                dcCalendar('<table summary="Calendrier">%s</table>'); ?>
              </div>
            </div>
          </div>          
          <div class="block">
            <h2>Archives</h2>
            <?php dcMonthsList(); ?>
          </div>
          <div class="block">
            <h2>Derni&egrave;res News</h2>
            <?php if ($mode=='cat' || $mode == 'post') : ?>
            <?php endif; ?>
            <?php dcCatRecentPosts() ?>
          </div>
          <div class="block">
            <h2>Avancement Projets</h2>
            <ul>
              <li>
              <a href="">Test</a></li>
            </ul>
          </div>          
        </div>


Florent V. a écrit :

- remettre à plat le style de ul#menu_navigation (et pas #menu_navigation ul...).


C'est fait. Peux tu m'indiquer quelle est la différence entre les deux ?
Modifié par Klesk (12 Apr 2007 - 16:20)
Sujet clos
Aller à