Sujet Précédent Sujet Suivant

[HTML-CSS] Background qui ne s'affiche pas

Résolu/Fermé
Patachouuu
Messages postés
64
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
22 novembre 2009
 - 18 nov. 2009 à 22:07
lamidelsol
Messages postés
79
Date d'inscription
lundi 6 août 2007
Statut
Membre
Dernière intervention
12 mai 2010
 - 22 nov. 2009 à 03:00
Bonjour,

J'ai un p'tit soucis dans mon code, je souhaite mettre un fond sur mon div contenu qui se répète en y, or mon code fonctionne sous IE (tout s'affiche bien), mais pas sous firefox (d'habitude c'est plutôt le contraire pour moi mais bon la j'ai pas le fond qui s'affiche ^^).

Donc je pense que j'ai du faire une bourde quelque part, surement un truc tout bête comme d'hab, mais j'ai beau chercher, je ne trouve pas... T_T

Je vous met un bout de mon code HTML ci dessous :

<body>

<div id="global">

<div id="bandeau">

<a href="index.htm"><img src="img/lescarrettes.png" alt="Les Carrettes Valloire : L'esprit vacances"
width="409" height="127" title="Les Carrettes" /></a>

<div id="dessin"></div>

</div>
<div id="contenu">
<div id="gauche">

<div id="menu">
<ul>
<li><a href="hebergement.htm">Hébergement</a></li><li><a href="restaurant.htm">Restaurant</a></li><li><a href="animations.htm">Animations</a></li><li><a href="activites.htm">Loisirs et Activités</a></li><li><a href="tarifs.htm">Tarifs</a></li><li><a href="reservation.htm">Réservation</a></li><li><a href="galerie.htm">Galerie Photos</a></li><li id="noborder"><a href="livreor.htm">Livre d’or</a></li>
</ul>
</div>

<div id="deco"></div>

</div>
<div id="droite">

<div id="bienvenue"></div>

<p>Vous serez séduits par le confort de nos chambres, l’accueil chaleureux de nos équipes et prendrez plaisir à déguster nos spécialités dans le restaurant «La Fondue».<br/><br/>

Ensemble, partageons des moments de vacances inoubliables…</p>


<img src="img/imghome.png" alt="Découvrer notre domaine skiable !" width="545" height="205" title="Notre domaine skiable" />

<p>Vous serez séduits par le confort de nos chambres, l’accueil chaleureux de nos équipes et prendrez plaisir à déguster nos spécialités dans le restaurant «La Fondue».<br/><br/>

Ensemble, partageons des moments de vacances inoubliables…</p>

</div>
</div>

<div id="pied">
</div>
</div>
</body>

Et voici mon code CSS :

*{
padding:0;
margin:0;
}

body {
font-family:verdana,arial,sans-serif;
font-size:1em;
background:#77604A;
text-align:center;
}

img {
border:0;
}

/* ------------ GLOBAL -----------*/

div#global {
width:848px;
height:630px;
margin:auto;
margin-top:60px;
}

/* ------------ BANDEAU -----------*/

div#bandeau {
width:848px;
height:161px;
background:transparent url(img/bghaut.jpg) no-repeat top left;
text-align:left;
margin-top:10px;
}

div#bandeau div#dessin {
background:url(img/dessinbanniere.png) no-repeat right bottom;
height:154px;
float:right;
width:365px;
margin-right:30px;
margin-top:10px;
}

div#bandeau img {
margin-top:10px;
margin-left:30px;
float:left;
}

/* ------------ CONTENU -----------*/

div#contenu{
background:transparent url(img/bgmilieu.jpg) repeat-y left top;
width:848px;
}

/* ------------ GAUCHE -----------*/

div#gauche{
float:left;
margin-left:20px;
margin-top:15px;
color:#f4f0d3;
font-size:0.95em;
width:176px;
}

div#menu{
text-align:left;
}

div#menu ul li{
list-style-type:none;
border-bottom:1px dotted #f4f0d3;
font-size:0.70em;
padding-bottom:7px;
margin-top:7px;
margin-right:15px;
}

div#menu ul li#noborder{
border:none;
margin-bottom:60px;
}

div#menu ul li a{
color:#f4f0d3;
text-decoration:none;
background:transparent url(img/puce.png) no-repeat left 40%;
padding-left:15px;

}

div#menu ul li a:hover{
font-weight:bold;
background:transparent url(img/puce.png) no-repeat 4px 40%;
}

div#deco{
height:49px;
width:109px;
background:transparent url(img/luge.png) no-repeat left bottom;
margin-bottom:14px;
margin-left:20px;
}


/* ------------ DROITE -----------*/

div#droite{
float:right;
margin-right:35px;
width:575px;
margin-top:15px;
padding-right:20px;
padding-left:20px;
}

div#droite div#bienvenue{
background:transparent url(img/bienvenue.png) no-repeat left top;
height:19px;
margin-top:7px;
margin-bottom:20px;
}

div#droite p{
font-size:0.7em;
color:#f4f0d3;
text-align:justify;
margin-bottom:15px;
}

/* ------------ PIED -----------*/

div#pied {
background:transparent url(img/bgbas.jpg) no-repeat left top;
width:848px;
height:88px;
clear:both;
}

div#pied p{
font-size:0.55em;
color:#f4f0d3;
margin-top:25px;
}

div#pied p a{
text-decoration:none;
color:#f4f0d3;
}

Le fond qui ne s'affiche pas sous firefox c'est bgmilieu.jpg qui se trouve dans le div contenu.
Et je ne veux pas lui donner de hauteur car je souhaite qu'il s'adapte au contenu qui se trouvera dans la div droite (la div gauche ne changera pas car c'est le menu).

Voilà, j'espère que vous pourrez m'aider, merci d'avance.
Bonne soirée,
Aurélie

8 réponses

Réponse 1 / 8
lamidelsol
Messages postés
79
Date d'inscription
lundi 6 août 2007
Statut
Membre
Dernière intervention
12 mai 2010
 4
19 nov. 2009 à 00:07
Bonsoir,

tu as mis du contenu dans ton contenu?
0
Patachouuu
Messages postés
64
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
22 novembre 2009
19 nov. 2009 à 19:22
Bonsoir,

Dans mon contenu, j'ai un div gauche et un div droit.
Dans le div gauche il y a mon menu, et dans mon div droit du texte et des images, donc oui j'ai bien du contenu dans mon div contenu.

Le truc c'est que ça marche sous IE mais pas sous firefox, donc je dois avoir un truc qui cloche quelque part mais j'ai beau cherchée je ne trouve pas.
0
Patachouuu
Messages postés
64
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
22 novembre 2009
19 nov. 2009 à 19:46
Mon contenu est en float, est ce que ça pourrait venir de ça ? Sachant que j'ai mis un clear both sur mon pied, et que ça fonctionne bien sous IE.
0
Réponse 2 / 8
avion-f16
Messages postés
18792
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
2 juillet 2022
 4 400
19 nov. 2009 à 07:17
Voilà ce qui cloche :
div#contenu{
    background:transparent url(img/bgmilieu.jpg) repeat-y left top;
    width:848px;
}
Quand tu mets transparents, c'est 100% transparent.
0
Patachouuu
Messages postés
64
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
22 novembre 2009
19 nov. 2009 à 19:24
Bonsoir,

Alors j'ai retirée par tout "transparent", mais visiblement cela ne fonctionne pas, donc je dois avoir encore quelque chose qui cloche dans mon code. :S
0
Réponse 3 / 8
Patachouuu
Messages postés
64
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
22 novembre 2009
19 nov. 2009 à 22:03
Personne pour m'aider T_T
C'est assez urgent, svp !
0
Réponse 4 / 8
lamidelsol
Messages postés
79
Date d'inscription
lundi 6 août 2007
Statut
Membre
Dernière intervention
12 mai 2010
 4
19 nov. 2009 à 22:38
Bonsoir,

As tu mis du contenu? sinon ton image peu pas se répéter sur rien, ou met lui un HEIGHT pour tester.
tiens nous au courant.
0
Patachouuu
Messages postés
64
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
22 novembre 2009
19 nov. 2009 à 22:44
Oui il y a du contenu, mais il est en float. Alors j'ai mis un clear both sur le pied.

Je viens d'essayer de mettre une hauteur, et la nomplus mon fond n'apparaît pas sous firefox, alors que ça marche toujours sous IE... T_T
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
lamidelsol
Messages postés
79
Date d'inscription
lundi 6 août 2007
Statut
Membre
Dernière intervention
12 mai 2010
 4
19 nov. 2009 à 23:22

As tu la possibilité de mettre un lien, car si le code indiqué dans ton premier message n'est pas complet.
Il faut au moin que l'on puisse voir de quoi il s'agit.

Ton image ne passe pas sous ton menu?
0
Réponse 6 / 8
Patachouuu
Messages postés
64
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
22 novembre 2009
22 nov. 2009 à 00:10
Voici un lien vers la home page : http://www.orl91.ovh.org/index.htm

J'ai vraiment besoin d'une solution rapide, avant la fin du week end ! Merci !
0
Réponse 7 / 8
lamidelsol
Messages postés
79
Date d'inscription
lundi 6 août 2007
Statut
Membre
Dernière intervention
12 mai 2010
 4
22 nov. 2009 à 02:08
Bonsoir,

Je vais te donner un conseil, si je peux me permettre, afin que tu puisses comprendre ton soucis.
Reprends ton code html et css et mets chacune de tes DIV d'une couleur différente tu vas vite comprendre que tu a trop d'imbrication pour un contenu simple... Ton problème se trouve là, tes DIV se croisent, se cachent...

Un extrait de ton code:

div#droite{
float:right;
margin-right:35px;
width:575px;
margin-top:15px;
padding-right:20px;
padding-left:20px;
height:500px;
}

div#droite div#bienvenue{
background:url(img/bienvenue.png) no-repeat left top;
height:19px;
margin-top:7px;
margin-bottom:20px;
}

Il n'y a rien qui te choc là?
par exemple.
0
Patachouuu
Messages postés
64
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
22 novembre 2009
22 nov. 2009 à 02:15
Heu... Ben non rien ne me choque dans cet extrait, si ce n'est qu'il y a une taille sur mon div droit que j'avais mis en test et que j'ai oubliée de retirée. - -'

C'est de cette façon que mon prof m'a apprit à coder, et cela marche plutôt bien en général.

Sinon on m'a aidée à trouver la solution à mon problème, il suffit de rajouter un <hr/> après mon div droite, puis dans le css mettre : hr{visibility : hidden; clear : both; } et ça fonctionne.
Voilà, merci à tous.
0
Réponse 8 / 8
lamidelsol
Messages postés
79
Date d'inscription
lundi 6 août 2007
Statut
Membre
Dernière intervention
12 mai 2010
 4
22 nov. 2009 à 03:00
Good luck.
0