28173 sujets

CSS et mise en forme, CSS3

[Résolu]Fonds pour firefox

salut salut

J’aimerai trouver une solution pour mon code css et donc pour ma page html.

Ma mis en page est nickel pour IE et FF, le seul problème que j’ai c’est un soucis avec la couleur de fonds de mon div global sur IE cela marche bien
Sur FF ca ne va pas

J’aimerai savoir pourquoi, voici mon code

#global
{
	margin-left: auto;
     	margin-right: auto;
	width:800px; 
	background-color:#F7F7F7;


Sur IE ca marche mais sur FF non, bien sur si je met height :1000 par exemple ça marche mais on me dit que c’est pas bon, car si une personne a une résolution plus grand que 1000 ca se limitera a 1000 et donc pas optimise pour sa page, si je me trompe pas …

Pouvez-vous m’aider
Merci bien bonne fin de soirée
IVIedia
Modifié par IVIedia (23 Aug 2007 - 17:50)
sans doute oublier ça comme infos

<div id="global" >
			<div id="bande"></div>
			<div id="h_barre">

			</div>
			<div id="header">
				<div id="h1"></div>
				<div id="h2"></div>
				<div id="h3"></div>
			</div>
			
			<div id="corp">
				<div id="pub"></div>
				<div id="millieu">
					<div id="b1"></div>
					<div id="b2"></div>
					<div id="b3"></div>
					<div id="b4"></div>
					<div id="b5"></div>
					<div id="b6"></div>
					<div id="b7"></div>
				</div>
			</div>
<div id="footer"></div>
		</div>


merci bien
Hello,

Y a beaucoup trop d'id là dedans à mon gout. Pourquoi faire des <div id="h1"> et pas un <h1> ?

Et hmm ensuite le code que tu donnes fonctionne trés bien pour moi... Tu a enlevé trop de choses, cela doit être un autre bout de ton code CSS qui cause le problème.

Pas la peine de nous copier l'intégralité de ton code CSS non plus, essaie de supprimer tout les éléments qui ne servent à rien et qui ne déclenchent pas ton "bug", de façon à ne laisser que l'essentiel. Y a même de fortes chances qu'une fois ce travail effectué tu trouves la solution tout seul
Bonjour,

Je me permet de répondre car je travail en collaboration avec IVIedia.

a écrit :

Y a beaucoup trop d'id là dedans à mon gout. Pourquoi faire des <div id="h1"> et pas un <h1> ?


Tous les divs correspondent à des blocs contenant du texte mais n'ayant aucun rapport avec un quelconque titre. Le div est donc justifié ( h1 voulant dire 1er ligne du header )

a écrit :

Et hmm ensuite le code que tu donnes fonctionne trés bien pour moi... Tu a enlevé trop de choses, cela doit être un autre bout de ton code CSS qui cause le problème.


La structure xhtml donnée est complète quant au CSS le style global est donné en entier et le reste des styles dans mon CSS correspondent simplement à des boites que je fais floater c'est tout.
Le problème, c'est que dans le code fourni, il n'y a aucun contenu dans les (multiples) divs...
Donc, tant qu'on a pas de contenu, il n'y a pas de taille à affecter, et donc pas de couleur de fond non plus, donc pas de test possible..
Et si le contenu du bloc est constitué uniquement de flottant, ça peut être ça la cause du problème.
Je souhaiterais que le design soit extensible en hauteur ( donc pas height dans le global )

Voila le CSS complet : 


body
{
	background-image:url(images/bg.gif); 
	margin:0;
}

#global
{
	margin-left: auto;
	margin-right: auto;
	width:800px; 
	background-color:#F7F7F7; 
}

#bande
{
	background-color:#F7F7F7; 
	width:800px; 
	height:35px; 
}

#h_barre 
{
	background-image:url(images/news_index_03.jpg);
	width:800px;
	height:18px;
}

#h1
{
	background-image:url(images/news_index_05.jpg);
	width:161px; 
	height:181px;
	float:left;
}

#h2
{
	background-image:url(images/news_index_06.jpg); 
	width:273px;
	height:181px;
	float:left;
}

#h3
{
	background-image:url(images/news_index_07.jpg); 
	width:366px;
	height:181px;
	float:right;
}

#pub
{
	width:159px;
	height:605px;
	background-color:#173F49;
	margin-left:2px;
	margin-top:4px;
	float:left;
}

#b1
{
	width:431px;
	height:54px;
	margin-top:4px;
	margin-left:4px;
	background-color:#1f5764;
	float:left;
}

#b2
{
	width:200px; 
	height:54px; 
	margin-top:4px;
	background-color:#1f5764;
	float:right;
}

#b3
{
	width:247px;
	height:230px;
	margin-top:4px;
	margin-left:4px;
	background-color:#1f5764;
	float:left;
}

#b4
{
	width:384px; 
	height:230px; 
	margin-top:4px;
	margin-left:4px;
	background-color:#1f5764;
	float:left;
}

#b5
{
	margin-left:4px; 
	margin-top:4px; 
	width:635px;
	background-color:#1f5764;
	min-height:314px;
	float:left;
}
#b6
{
	width:383px;
	height:175px;
	margin-top:4px;
	margin-left:4px;
	background-color:#1f5764;
	float:right;
}

#b7
{
	width:248px; 
	height:175px; 
	margin-top:4px;
	background-color:#1f5764;
	float:right;
}
#footer
{
	background-image:url(images/foot_copy.jpg); 
	margin-top:4px;
	width:800px; 
	height:20px; 
        float:left;
}
Je précise aussi que j'avais essayé une technique qui consistait à faire une image de 1x1 avec la couleur de fond et de le mettre en background-image mais sans résulat.
Sujet clos
Aller à