Problème avec des images en CSS

18 décembre 2005 à 19:20:46

Bonjour. J'ai un (assé) gros problème avec le CSS. Je n'arrive pas afficher une image de fond! J'ai tout essayé, les conseils qu'ont m'a donné sur un autre forum, et d'autre trucs, mais sans succès. J'essaye au fait de mettre une image de fond comme bannière. Ca fait un moment, et ça me rend fou. A chaque fois il y a un problème, sois je vois l'image, mais décalée (sur IE normalement, mais sur MF je la vois décalée). Si vous pouviez m'aider, se serais sympa.

Merci d'avance

zeunyton

18 décembre 2005 à 19:30:53

si tu afficherais ton code css est l'adresse du site pour ton code html on pourrais peut être t'aider

Evil Minish Link

18 décembre 2005 à 20:58:43

Oki

Désolé de ne pas avoir tout de suite donné le code. Je suis nul en CSS a part ça, m'en voulez pas

body
{
background-color: black;
color: white;
background-image: url("url de ton image"); /*en phase de test (pour plus tard)*/
background-attachment: fixed;
}

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: black;
color: white;
background-image: url("design_koh/fond_koh.jpg");
background-attachment: fixed;
}

#en_tete
{
width: 379px;
height: 214px;
color: white;
margin-bottom: 10px;
background-color: black;
background-image: url("/design_koh/kingdom_of_hyrule.jpg"); /*ICI le problème */
background-repeat: no-repeat;
background-attachment: fixed;
border: 2px solid black;
}

#menu
{
float: left;
width: 120px;

}

.element_menu
{
background-color: #FFFFFF;
float: left;
width: 120px;
background-color: white;
color: black;
background-image: url("/design_koh/fond_menu.jpg") ; /* ICI l'autre problème*/
background-repeat: repeat-y;
background-attachment: fixed;
border: 2px solid black;
margin-bottom: 20px;
}

.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: ;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}

#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;

color: #B3B3B3;
background-color: #626262;
background-image: ;
background-repeat: repeat-x;
border: 2px solid black;
}

#pied_de_page
{
padding: 5px;

text-align: center;

color: #B3B3B3;
background-color: #626262;
background-image: ;
background-repeat: repeat-x;

border: 2px solid black;
}

La page en question

Je remarque aussi l'image du fond des menus ne s'affiche pas.

Essayé sur les deux naviguateurs - Internet Explorer, et Mozilla Firefox. Y a un bug et je comprends pas trop....
Encore une fois, merci d'avance

JulFisher

18 décembre 2005 à 21:06:50

Essaie sans background-attachment: fixed;

et l'url sans le slash au début :

background-image: url("design_koh/kingdom_of_hyrule.jpg");

EDIT : Voilà

body
{
background-color: black; /*pour mettre le fond en npir*/
color: white; /* Le texte de la page sera blanc */
}

body
{
width: 760px;
margin: 20px auto; /* Haut et bas | Droite et Gauche */
background-color: black; /*pour mettre le fond en noir*/
color: white; /* Le texte de la page sera blanc */
background-image: url("design_koh/fond_koh.jpg");
background-attachment: fixed; /* Le fond restera fixe */
}

#en_tete
{
width: 379px;
height: 214px;
color: white;
margin-bottom: 10px;
background-color: black; /*pour mettre le fond en noir*/
background-image: url("design_koh/kingdom_of_hyrule.jpg");
background-repeat: no-repeat;
border: 2px solid black;
}

#menu
{
width: 120px; /* Tre`s important : donner une taille au menu */
}

.element_menu
{
background-color: #FFFFFF;
width: 120px; /* Tre`s important : donner une taille au menu */
height: 170px;
background-color: white; /*pour mettre le fond en noir*/
color: black; /* Le texte de la page sera blanc */
background-image: url("design_koh/fond_menu.jpg") ;
background-repeat: repeat-y;
border: 2px solid black;
margin-bottom: 20px; /* Pour e'viter que les e'le'ments du menu ne soient trop colle's */
}

.element_menu h3 /* Tous les titres de menus */
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul /* Toutes les listes a` puces se trouvant dans un menu */
{
list-style-image: ;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #B3B3B3;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}

#corps
{
float: right;
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;
color: #B3B3B3;
background-color: #626262;
border: 2px solid black;
}

#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
border: 2px solid black;
}