Salut à tous,

j'aurais bien besoin d'un p'tit coup d'main :?

voilà mon problème : j'ai presque complété le caneva général de mon site. Pour l'instant ce n'est qu'une page qui ne mène a aucun lien mais tout le site suivra ce modèle. Je le teste donc sur différants navigateurs pour voir comment ça réagit. Le seul qui affiche comme il faut toute ma mise en page c'est Explorer... pour ce qui est de Safari et Netscape mon menu n'est pas du tout centré on affiche aucune bordure et on ne voit pas mon image de fond pour le body, dans Opera pas de bordure non plus et pas d'image de fond :shock:

voici le lien de la page en question : www.xplorax.com/testing-1.htm

J'ai utilisé une feuille de style externe en voici la source :

body {
margin: 0px;
text-align: center;
background-repeat: repeat;
background-image: url(../img/fond-body.jpg); }

#entete{
margin-left: auto;
margin-right: auto;
width: 600px;
text-align: left;
height: 150px;
background-image: url(../img/entete.jpg);
border-left: 0.5px #23120d solid;
border-right: 0.5px #23120d solid;
}

ul {
list-style-type: none;
width: 600px;
margin-left: auto;
margin-right: auto;
height: 20px;
margin-top: 0px;
margin-bottom:0px;
border-left: 0.5px #23120d solid;
border-right: 0.5px #23120d solid;
border-top: 0.5px #23120d solid}

.menu li {
float: left;
}

.menu a {
width: 100px;
height: 20px;
display: block;
}

.menu #bt1 a {
background-image: url(../img/identite.jpg); }

.menu #bt2 a {
background-image: url(../img/musique.jpg); }

.menu #bt3 a {
background-image: url(../img/nouvelles.jpg); }

.menu #bt4 a {
background-image: url(../img/gallerie.jpg); }

.menu #bt5 a {
background-image: url(../img/contact.jpg); }

.menu #bt6 a {
background-image: url(../img/liens.jpg); }

.menu #bt1 a:hover {
background-image: url(../img/identite-2.jpg); }

.menu #bt2 a:hover {
background-image: url(../img/musique-2.jpg);
}

.menu #bt3 a:hover {
background-image: url(../img/nouvelles-2.jpg);
}

.menu #bt4 a:hover {
background-image: url(../img/gallerie-2.jpg);
}

.menu #bt5 a:hover {
background-image: url(../img/contact-2.jpg);
}

.menu #bt6 a:hover {
background-image: url(../img/liens-2.jpg); }


#conteneur {
width: 520px;
margin-left: auto;
margin-right: auto;
background-color: #fef3d0;
font-size: x-small;
text-align: left;
border: .5px #2e2e2e solid ;
padding-top: 10px;
padding-left: 40px;
padding-bottom: 10px;
padding-right: 40px;
color: #0a0908;
font-family: Verdana, Helvetica, Arial, sans-serif; }

h1, h2 {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: small;
}

Les css c'est très nouveau pour moi alors c'est sûr qu'il y a sûrement quelque chose qui cloche dans mon code... je consulte beaucoup les références qui sont conseillées ici mais là vraiment :cogne: j'y arrive pas...

merci pour vos lumières
:wink:

y'a vraiment personne qui aurait une idée lumineuse pour moi :idea: un conseil... une référence... un encouragement

merci encore :wink:

Bon hé bien je me répond :wink:

j'ai trouvé une partie de la solution : pour ce qui est du menu, composé d'une ul, j'ai réussi à le centrer en imposant un padding-left à 0px dans le code étant donné que certains navigateurs en appliquent un par défaut.

Pour ceux qui rencontreraient ce problème... essayez pour moi ça a marché sinon sur la page où j'ai trouvé l'info il y a d'autres solutions : (voir : http://blog-and-blues.org/weblog/2004/09/1...les-navigateurs )

Bon il me reste à m'attaquer au problème des bordures et de l'image de fond... :?

allez hop!

Bon je reviens à la charge désolé :oops: mais j'ai tout essayé (ou presque) pour comprendre pourquoi mes bordures et mon image de fond n'apparaissent pas dans tous les "browser" mais curieusement il n'y a que dans IE que tout est conforme à mon modèle

J'ai consulté Alsacréations, Openweb, épluché les forums... niet je ne trouve pas :cry:

J'ai essayé de centrer mes boites avec des marges négative en position relative... mais rien n'y fait le résutat est encore pire :?

J'ai rajouté en haut de ma feuille de style le sélecteur universel {*}

Je déprime un peu là, y'a tellement de ressources... en principe en cherchant un peu on arrive à tomber sur la solution... y'a vraiment personne ici qui ce soit déjà buté à ce genre de problème?

Je suis plus qu'embarrassée... je me sens vraiment casse-pieds :roll:

pour les bordures, d'après moi, il faut mettre minimum 1px, 0,5 pixel n'a pas de sens.

selon mon expérience, l'affichage d'une image de fond ne fonctionne pas si la balise est vide.
Ajouter minimum un espace blanc  
A tester

ce car<actère
& n b s p ; sans les espaces, autrement il ne s'affiche pas dans ce post

et enfin, je n'ai pas d'équivalent couleur de #23120d
Elle n'existe pas chez moi....
voilà, bonne suite pour ton travail

Bonjour Nathalie,

merci infiniment de t'être penchée sur mon problème.

J'ai fait la modification pour les bordures à 1px et tu avais raison en tout cas ça marche sur mon ordinateur (macosx) et dans les différants navigateurs que j'utilise. Tu dis ne pas avoir cette couleur chez toi, ça c'est embêtant je ne savais pas que la palette de couleur pouvait différer d'un ordi à l'autre... à ce moment là comment peut-on être certain de faire un choix de couleur qui sera vu par tous?

Pour ce qui est de l'image de fond en fait c'est celle qui devrait couvrir tout le fond d'écran dans la balise body.
Voici ce que j'ai mis dans ma css:

body {
margin: 0px;
text-align: center;
background-repeat: repeat;
background-image: url(../img/fond-body.jpg); }

et pour terminer tu as écris :"ce car<actère
& n b s p ; sans les espaces, autrement il ne s'affiche pas dans ce post"
je ne comprends pas ce que tu veux dire, à quoi fais-tu référence?

encore merci Nathalie

hello,
couleurs:
Je travaille sur pc, et vraiment, le code couleur 23120d ne correspond à rien. Essaye cet outil sympa pour touver une couleur
http://www.toutimages.com/generateur_c.htm

image de fond:
effectivement, je pensais qu'il s'agissait d'une image dans une div (si tu places une div avec une class contenant une image de fond, il ne faut pas laisser la div vide si on veut voir apparaître l'image)
Comme ton image de fond est dans le body, je me demande si les couleurs des div que tu ajoutes par la suite dans le body ne couvrent pas ton image de fond. Il faudrait voir le code html de ta page.
Bonne journée

Salut Nathalie,

Bon ça y'est tout s'affiche maintenant de mon côté et ce dans les 4 navigateurs que j'utilise, sauf que je suis en mac...

je n'ai pas encore changé la couleur de mes bordures parce que j'aurais voulu savoir si tu les vois et de quels couleurs elles sont sur ton écran.

voici le lien: www.xplorax.com/testing-1.htm

merci infiniment pour ton aide... après ça je crois que ce sera bon :wink:

Bonsoir Viviane,

Tes couleurs passent plutôt bien à l'écran ou du moins, je les apprécie.
Une page comme je les aime, sobre et sans fioritures inutiles.

Deux choses à souligner cependant :

- la première qie me dérange un peu, c'est le background en mosaïque ;
- la seconde qui me chagrine :cry: : les 2 "L" à galerie dans ton menu (si je ne m'abuse, ton site sera en français => un seul "L").

Bon travail et bonne continuation.

Salut thegwil,

ouaih ben là pour la faute de français c'est honteux :oops: merci de me corriger :wink:

que veux-tu dire pour le background? est-ce l'image de fond de tout l'écran ? c'est le fait que tu mentionne une mosaïque qui me mêle j'aimerais ça que tu précise et je vais voir ce que je peux faire.

ton avis est super apprécié merci beaucoup

[quote]ton avis est super apprécié merci beaucoup [/quote] Il n'y a pas de quoi, c'est tout à fait sincère. Ce que je voulais dire à propos du background (l'image de fond de page) est qu'il se répétait vu que l'image seule ne peut remplir tout l'écran. Mais excuse-moi, je travaille en 1280x1024 et je n'avais pas vu que l'image faisait 1024x768. Ce qui est déjà une bonne taille. Ceci dit, le fait de l'avoir assombrie (tu l'as bien assombrie non ?) passe bcp mieux sur les résolutions supérieures à 1024. Voilà. J'espère avoir été plus clair. PS : Super ! La faute a déjà été corrigée

Salut thegwil,

merci pour ta réponse.

je vais essayé d'agrandir mon image d'arrière-plan pour qu'elle couvre des écrans comme le tien, si j'avais su avant, j'aurais choisi une largeur un peu plus grande pour le conteneur du centre, ... en 1280 on doit voir beaucoup de fond...:?

Fin observateur, eh oui, après ton dernier message j'ai pris un peu de recul quand au design d'ensemble et le fond m'apparaissant un peu criard je l'ai changé pour quelque chose de plus sobre.

Je me répète mais vraiment les conseils que je trouve ici m'aide énormément dans ma démarche.

merci encore :wink:

[quote]je vais essayé d'agrandir mon image d'arrière-plan pour qu'elle couvre des écrans comme le tien, si j'avais su avant, j'aurais choisi une largeur un peu plus grande pour le conteneur du centre, ... en 1280 on doit voir beaucoup de fond...:? [/quote] Oui effectivement, le fond prend environ 50% de l'écran mais personnellement, ça ne me dérange pas pour autant qu'il soit de qualité :wink: Que je parle d'autre chose. J'ai testé ta page sans feuille de styles et j'ai constaté que ton menu n'était pas visible. Normal me diras-tu puisque les liens sont sur des images et non sur du texte. Pour une meilleure accessibilité dans un cas pareil, je pratique de la façon suivante : d'abord une class "none" dans la feuille de style

CODE

.none { display: none; }

ensuite dans la page html qui contient le menu, j'ai par exemple :

CODE

<li id="bt1"><a href="page1.htm" title="Cliquez sur ce lien pour revenir à la page 1"><span class="none">Page 1</span></a></li>

au lieu de

CODE

<li id="bt1"><a href=""></a></li>

Si tu as l'occasion, compare ta page actuelle sans les styles et une autre avec les modifications que je viens de citer. Tu verras, tu y gagneras bcp en accessibilité pour toutes les personnes qui ne disposent pas de navigateur "graphique". En tout cas, je suis impatient de découvrir le reste de votre site. Ce premier album-concept, on peut en avoir un aperçu quelque part ?

Salut thegwil,

quand j'écris le code dans ma page html la section du titre devient souligné m'indiquant que l'attibut titre dans le tag a n'est pas supporté pas Netscape 4.0 et 6.0 :? Que fait-on dans ce cas? Est-ce que ça posera problème quand je voudrai valider mon site avec le W3C, j'imagine que oui n'est-ce pas? Y-a-il une autre solution parce que effectivement pour quelqu'un qui navigue sans image mon site ne mènera pas très loin


merci :wink:

Bonjour Viviane,

Le fait que l'attribut title soit souligné n'affectera en rien la validation de tes pages ; cela veut simplement dire que si on visionne tes pages avec ces deux versions de Netscape, les info-bulles n'apparaîtront pas.

Je viens d'ailleurs de faire valider ta page de test par le W3C et il y a une seule petite erreur qui est la suivante :

CODE

<link rel="stylesheet" href="css/feuille-1.css">

que tu dois remplacer par

CODE

<link rel="stylesheet" href="css/feuille-1.css" />

pour que ton code soit valide xhtml.
Mais je suis sûr que tu auras vite fait de corriger