18081 sujets

Questions générales et questions de débutants

[Résolu] Problème de compatibilité CSS

Bonjour à tous !
Je suis l'auteur du site -http://www.foozball.org/

Je n'ai pas l'habitude de demander de l'aide ainsi, mais après plusieurs recherches infructueuses j'ai décidé de passer le pas. Smiley cligne

Comme vous avez peut-être pu le remarquer si vous êtes aller visiter mon site sous IE, celui s'affiche très mal (enfin, tout est relatif, mais la différence est grande vis-à-vis d'un browser au normes tel que Firefox...).

Je perçoit en effet trois problèmes notoires :

1. Le "titre" des premières box des menus gauche et droit ne s'affiche pas, il est litéralement "coupé", comme masqué.

2. Si vous descendez un peu dans la page vous aperceverez une sorte de répétition de rectangles blancs, comme des sortes de "menus"... Ce phénomène est assez étrange, et est à mon avis le plus dérangeant. :s

3. Enfin, le dernier qui n'en est pas tout a fait un est que la marge entre le corps et le footer est sensiblement plus grande, et j'aimerai connaître une manière "propre" de remédier a ce problème.

Pour informations, ma feuille de style CSS est dipoible a cette url : -http://www.foozball.org/CSS/design_extens.css

La source et la feuille de style sont surement très mal codés et cala doit petre un véritable casse-tête pour vous, je conçoit, mais je vous prie de m'excuser, je suis encore jeune et je débute plus ou moins dans ces domaines.

Merci pour votre aide et compréhension.

Cordialement.
Modifié par Akufnx (26 Mar 2006 - 09:42)
Bonjour Akufnx,

Je vais regarder Smiley smile

Déjà, si tu enlèves
margin-top: -15px;

à

#menu1
#menu2

et
top: -15px;

à
#corps


Tes premiers "début" de menus réapparaissent et ça aligne tout.

Par contre, maintenant tu as un espace au dessus, mais je n'ai, pour l'instant, pas le temps de regarder.

Je reprendrais tout à l'heure Smiley cligne
Modifié par blue (25 Mar 2006 - 18:23)
donc ensuite, pour que tu puisses avoir un espace entre le haut et le corps, il faut éliminer le :
top: -22px;

de ton menu du haut :
.barre_menu


mais pour pouvoir le placer correctement, sans cet attribut, tu vas mettre ton menu du haut :
.barre_menu

en position absolue et le faire descendre à la bonne place avec un top
moi j'ai mis :

position: absolute;
top: 132px;


Après, tu t'aperçois que ta phrase qui se trouve à la droite de ton menu est décalée par rapport à lui, c'est à cause de la largeur que tu as donné à tes div

.haut .navigation
.haut .quick

qui font qu'elles se chevauchent, les empéchant de s'aligner.
Tu enlèves donc 
width: 500px;

à
.haut .navigation

et
width: 300px;

à
.haut .quick


Ensuite, j'ai vu que tu avais mis un conteneur au corps de ton site, je m'en suis servi pour faire un espace entre le haut et le corps.
J'ai donc mis (mais tu peux changer l'espacement en jouant sur top)

position: relative;
top: 5px;

à
#clickInText


Et pour finir, j'ai enlevé les <p> et </p> à ta phrase "Tout sur le Baby-foot, etc." qui poussaient ton header vers le bas.

Et lol, je viens de m'apercevoir que ça a, aussi, réglé ton problème N°2 de répétition de rectangles blancs, mais que ça a crée un nouveau problème de footer Smiley lol

J'y retourne Smiley biggol
Dernier épisode Smiley langue

Donc à cette étape, le corps empiète un peu sur ton footer sous Firefox, sous IE c'est pas mal Smiley smile

Dans un premier temps et qui n'a rien à voir avec cet empiètement, tu vois que "requête" et "copyright" ne sont pas sur la même ligne (enfin moi je le vois car j'ai un 800x600)

Bien que tu ai mis
float: left;

à l'un et
float: right;

à l'autre, le fait que tu ais mis une largeur à ces 2 div fait que l'une chevauche l'autre

Donc tu enlèves ces width, soit :
width: 460px;

à
.bas .statistiques

et
width: 470px;

à
.bas .copyright


Maintenant on s'occupe du chevauchement de ton "corps" sur le footer sous Firefox

Tu va d'abord remplacer ton
margin-bottom: -10px;

de ta div
#corps

par
margin-bottom: 5px;


Là c'est impec avec Firefox mais avec IE tu as un espace assez grand maintenant
donc si tu veux le diminuer tu agis sur
margin-bottom: 15px;

qui se trouve dans ton html pour les visites, soit :

<p style="border: 1px dotted black; padding : 5px; width: 270px; margin: auto; margin-bottom: 15px;">
		<em>Cette page a été visitée <span class="important">41576</span> fois.</em>
	</p>

si tu mets 
margin-bottom: 5px;

à la place, c'est impec sous IE et Firefox Smiley smile

Bon courage Smiley cligne
Merci Blue, sincérement.
Tout marche à merveille.

Je ne sais vraiment comment te remercier mais sache que je suis fou de joie et je t'en suit extrêmement reconnaissant. Smiley cligne

Tu as dût passez beaucoup de temps sur mes problèmes, c'est fou ! Merci !

Je pense que tu ne veras pas d'inconvénients à ce que j'ajoute un lien vers le site de ton www : -http://bluesmilies.celeonet.fr/ dans mon footer, avec les autres partenaires ? Smiley biggrin

Merci encore !
lol c'est adorable, oui j'en suis même flattée Smiley cligne

Oui, j'ai passé un peu de temps, mais j'aime bien Smiley smile

Je suis contente que ça te fasse autant plaisir Smiley biggrin

N'oublie pas de mettre un [résolu] dans ton titre Smiley smile
Par contre, tu as peut-être encore pas eu le temps de t'en occuper, mais le footer est pas joli sous Firefox Smiley sweatdrop

Je vois pas Copyright car il est écrit en blanc et se trouve dans le fond blanc de Partenaires

et partenaire est sur 2 lignes, coupé au niveau Site du... coupure... Zéro

Bon courage Smiley cligne

Edit :

Je voulais aussi te parler d'un petit problème d'affichage sur ton site, que tu ne dois pas voir en 1024

Une partie de ta phrase "Tout sur le Baby-foot,
Règles, Techniques, Vidéos, Conseils d'Entretien..."
est sous ton premier menu

Je te mets une capture pour que tu vois
upload/2075-Akufnx.png
Modifié par blue (26 Mar 2006 - 12:31)
Sujet clos
Aller à