[HTML/CSS] comptatibilité Firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/CSS] comptatibilité Firefox

hugoOo

laisse pas dépasser ton pixel

Bonjour :hello: ,

Mon site est complétement incomptatible avec Firefirox. Voici l'url : http://monelevage.ifrance.com/tw/

Ma page est construite avec un include pour les menus qui sont placés dans des div de type float:

Code :

#menu_left
{
float: left;
width: 200px;
}
#menu_right
{
float: right;
width: 200px;
}

Ensuite chaque menu est constitué de div succesifs contenant les images de fond du menu comme ceci :

Code :

.menu_haut
{
background-image: url("img/menu_haut.gif" );
width: 200px;
height: 42px;
background-repeat: no-repeat;
}
.menu_haut p
{
text-align: center;
margin-top: 14px;
margin-bottom: 0px;
color: white;
font-size: 20px;
}
.menu_debut_st
{
background-image: url("img/menu_debut_st.gif" );
width: 200px;
height: 48px;
background-repeat: no-repeat;
margin-top: -1px;
}
.menu_debut_st p
{
text-align: right;
margin-top: 10px;
color: green;
}
.menu_milieu
{
background-image: url("img/menu_milieu.gif" );
width: 200px;
}
.menu_milieu p
{
color: red;
text-align: center;
}
.menu_fin_st
{
background-image: url("img/menu_fin_st.gif" );
width: 200px;
height: 10px;
background-repeat: no-repeat;
}
.menu_bas
{
background-image: url("img/menu_bas.gif" );
width: 200px;
height: 29px;
margin-top: -1px;
}

J'aimerai savoir en gros comment je dois adapter le code pour le rendre comptatible avec Firefox.

Merci d'avance de vos réponses. :hello:

Message édité par hugoOo le 26-11-2006 à 19:56:57

---------------
http://over-templates.c.la

Publicité

kwaio

Code :

<html>
<head>
<title>
</title>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css" />
</head>
<body>
<div id="menu_left">
<div class="menu_haut">
<p> Menu
</p>
</div>
<div class="menu_debut_st">
<p>
</p>
</div>
<div class="menu_milieu">
<p>
<a href="index.php">Accueil</a><br />
<a href="news.php">News</a><br />
<a href="inscription_joueurs.php">Inscription</a><br />
<a href="contact.php">Contact</a><br />
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_debut_st">
<p> Teams
</p>
</div>
<div class="menu_milieu">
<p>
<a href="team_search.php">rechercher une team</a><br />
<a href="team_build.php">créer une team</a><br /> alliances de serveurs
<br/>
supprimer une team<br />
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_debut_st">
<p> Joueurs
</p>
</div>
<div class="menu_milieu">
<p>
nouveau joueur<br />
rechercher un joueur<br />
recruter un joueur<br />
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_bas">
</div>
<div class="menu_haut">
<p> Statistiques
</p>
</div>
<div class="menu_debut_st">
<p>
</p>
</div>
<div class="menu_milieu">
<p>
joueurs inscrits : 2<br />
teams inscrites : 1<br /> matchs joués : 2
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_bas">
</div>
<div class="menu_haut">
<p> Partenaires
</p>
</div>
<div class="menu_debut_st">
<p>
<a href="redirect.php?message=Pour devenir partenaire, envoyer nous un mail&url=contact.php">devenir partenaire</a>
</p>
</div>
<div class="menu_milieu">
<p> aucun partenaires actuellement
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_bas">
</div>
</div>
<div id="menu_right">
<div class="menu_haut">
<p> Connection
</p>
</div>
<div class="menu_debut_st">
<p>
<a href="inscription_joueurs.php">Pas encore inscrit ?</a>
</p>
</div>
<div class="menu_milieu">
<p>
<form method="post" action="login.php"> Pseudo :
<input type="text" class="text" name="pseudo" size="12" /><br /> Mot de passe :
<input type="password" class="password" name="mdp" size="12" /><br />
<input type="submit" class="submit" value="Se connecter" />
</form>
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_bas">
</div>
<div class="menu_haut">
<p> Classements
</p>
</div>
<div class="menu_debut_st">
<p> Top 10 Counter Strike
</p>
</div>
<div class="menu_milieu">
<p>
<img src="img/logo_cs.gif" alt="logo cs" title="logo cs" />
ahAHah ()<br />
<img src="img/logo_cs.gif" alt="logo cs" title="logo cs" />
Fortress Team ()<br />
<img src="img/logo_cs.gif" alt="logo cs" title="logo cs" />
lol is the team ()<br />
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_debut_st">
<p> Top 10 Counter Strike Source
</p>
</div>
<div class="menu_milieu">
<p>
<img src="img/logo_css.gif" alt="logo cs" title="logo cs" />
nawakk ()<br />
<img src="img/logo_css.gif" alt="logo cs" title="logo cs" />
ahAHah ()<br />
<img src="img/logo_css.gif" alt="logo cs" title="logo cs" />
piou piou ()<br />
<img src="img/logo_css.gif" alt="logo cs" title="logo cs" />
lala ()<br />
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_debut_st">
<p> Top 10 Day Of Defeat
</p>
</div>
<div class="menu_milieu">
<p>
<img src="img/logo_dod.gif" alt="logo cs" title="logo cs" />
plop ()<br />
<img src="img/logo_dod.gif" alt="logo cs" title="logo cs" />
010203 ()<br />
<img src="img/logo_dod.gif" alt="logo cs" title="logo cs" />
ahAHah ()<br />
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_debut_st">
<p> Top 10 Day Of Defeat Source
</p>
</div>
<div class="menu_milieu">
<p>
<img src="img/logo_dods.gif" alt="logo cs" title="logo cs" />
kiki ()<br />
<img src="img/logo_dods.gif" alt="logo cs" title="logo cs" />
gniakgniak ()<br />
<img src="img/logo_dods.gif" alt="logo cs" title="logo cs" />
ahAHah ()<br />
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_debut_st">
<p> Top 10 Battlefield 2
</p>
</div>
<div class="menu_milieu">
<p>
<img src="img/logo_b2.jpg" alt="logo cs" title="logo cs" height="20" width="20" />
plopplop ()<br />
<img src="img/logo_b2.jpg" alt="logo cs" title="logo cs" height="20" width="20" />
kyoto ()<br />
<img src="img/logo_b2.jpg" alt="logo cs" title="logo cs" height="20" width="20" />
ahAHah ()<br />
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_bas">
</div>
<div class="menu_haut">
<p> Statistiques
</p>
</div>
<div class="menu_debut_st">
<p> Top 10 Counter Strike
</p>
</div>
<div class="menu_milieu">
<p>
Team aAa<br />
Team bBb<br />
Team cCc<br />
Team dDd<br /> Team eEe
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_debut_st">
<p> Top 10 Day Of Defeat
</p>
</div>
<div class="menu_milieu">
<p>
lo lo lo lo lo lo lo lo<br />
lol lol olo <br /> lo lo lo lo lo lo
<br/>
lol olo lo lo<br /> lo lo lo lo lo lo
</p>
</div>
<div class="menu_fin_st">
</div>
<div class="menu_bas">
</div>
</div>
<div id="corps">
<div class="block_haut"> Bienvenue sur Teams & Wars
</div>
<div class="block_milieu"> Ce site a été créer dans le but de permettre aux joueurs de Counter Strike, Counter Strike Source, Day Of Defeat, Day Of Defeat Source et Battlefield 2 de se rencontrer et de former des teams qui s'affronteront lors de matchs. Aprés chaque match, le résultat sera enregistré et permettra de faire un classement des meilleurs joueurs et des meilleures teams pour chaque jeu. Maintenant, vous ne pourrez plus dire que c'est difficile de trouver un joueur, une team ou un match. Grâce à un système de points vous pourrez optimiser vos matchs en jouant contre des teams de même niveau.
</div>
<div class="block_bas">
</div><br />
<div class="block_haut"> News
</div>
<div class="block_milieu">
<div class="news">
<b>lucas</b> par
<i>hugoOoo</i>
le 13/12/1901<br />
lucas est parmis nous<br />
</div>
<div class="news">
<b>test</b> par
<i>2Dpix</i>
le 13/12/1901<br />
plopman est parmi nous!<br />
</div>
<div class="news">
<b>no one</b> par
<i>2Dpix</i>
le 01/03/1970<br />
sldhskj h sqjkdf ksjdhf lksdjf skdhf sjdhf kjsdhf kjsdh fjsdh fkjsdh fjsdhfjsdhjsd hjsdh jsdh jsdhkjsdfhksjd fhksjdfh skjdfh skjdfh skdjh fj sdfh jsdf hsdf hsdf hjsdf hjsdf hjsdfh fdsh dfsh dsfh ksdfkhsdfh sdfhdsfh ksdfhdsfhkdsfjkdsfkdfskjdsfkjdsfkjdsfhkdsfkdsfkdsfkdsfkdsfkdsfk dsfk dsf hdsfkdsfkdsf<br />
</div>
<div class="news">
<b>no one</b> par
<i>2Dpix</i>
le 01/03/1970<br />
sldhskj h sqjkdf ksjdhf lksdjf skdhf sjdhf kjsdhf kjsdh fjsdh fkjsdh fjsdhfjsdhjsd hjsdh jsdh jsdhkjsdfhksjd fhksjdfh skjdfh skjdfh skdjh fj sdfh jsdf hsdf hsdf hjsdf hjsdf hjsdfh fdsh dfsh dsfh ksdfkhsdfh sdfhdsfh ksdfhdsfhkdsfjkdsfkdfskjdsfkjdsfkjdsfhkdsfkdsfkdsfkdsfkdsfkdsfk dsfk dsf hdsfkdsfkdsf<br />
</div>
<div class="align-right">
<a href="news.php">suite ...</a>
</div>
</div>
<div class="block_bas">
</div>
</div>
<script type="text/javascript" src="http://js-perso.ifrance.com/weborama.js"></script>
</body>
</html>

Voilà pour le code
c'est l'equivalent html du fichier php.
(je l'aide)

Message édité par kwaio le 26-11-2006 à 19:54:20

xxrscaxx

essaye un peut de mettre "position: absolute;" dans les classe de tes divsion menu etc...

kwaio

(il peut pas le faire pr le moment)
J'ai essayé, j'me retrouve avec un gros paquet de trucs en haut de la page, bref, marche pas.

T'as cerné ce qu'est le probleme xxrscaxx ?

hugoOo

laisse pas dépasser ton pixel

en mettant position: aboslute dans les id menu_right et menu_left, la propriété float s'annule et les deux menus se recouvrent!!

---------------
http://over-templates.c.la

xxrscaxx

Bon, vu que ma première tantative d'explication n'était pas assez claire à mon gout lol, je vais essayer d'etre plus clair et plus simple lol. Lorsque tu donne une position absolue à une boite (en l'occurence ta division "<div class="menu_haut">" par exemple), elle se retire du flux de ta page, c'est a dire qu'elle n'influence en rien les élément se trouvant autour d'elle. (par exemple, si tu a une boite à sa droite, cette dernière ne risque pas de changer de taille ou quoi sous l'influence de la première, elle reste comme elle est et la première va la recouvrir en partie, ou se mettre en dessou). Grace a ce procédé, tu pourra donner une taille à ta boite (grace a "width" et "heigth" ), ainsi que la positioner exactement ou tu le veux (grace à "left", "top", "right", "bottom", "margin" et ses déclinaisons, et ptete d'autre qui me sont inconnue lol). A savoir, et c'est un point important, ta boite (ou div si tu pref) se positionne par rapport à son conteneur.

ex: dans ton cas, ta division avec le classe menu_haut (<div class="menu_haut"> ) est contenue dans la division avec l'id menu left (<div id="menu_left"> ). Cette dernière (<div id="menu_left"> ) est le conteneur de menu_haut.
Donc si tu donne une valeur "position: absolute" a menu haut, et que tu lui met "left: 50px", il va venir se place à 50px de menu left...

Voila j'espère que j'ai été clair cette fois ci...

Je ne sais pas si c'est juste je ne suis qu'un modeste amateur donc si c'est faux que quelqu'un me corrige...de plus j'espère que j'ai été clair lol...

Citation :

en mettant position: aboslute dans les id menu_right et menu_left, la propriété float s'annule et les deux menus se recouvrent!!

ce n'est pas dans les id menu_right et menu_left qu'il faut mettre, mais dans les classe menu_haut etc...

Message édité par xxrscaxx le 26-11-2006 à 22:25:04

kwaio

moi ça dépassse mes capacités là...
Je prefere un simple tableau mais comme c'est aps conseillé...

xxrscaxx

En essayant sur le site que je suis en train de faire, je me rend compte que ce que je croyai etre juste ne l'est pas totalement lol, si quelqu'un de plus competant que moi pouvai venir corriger mes dires se serai sympa...
Moi le prob est que j'ai le body, puis une division wrapper, puis ds celle-ci ma division menu, et que je donne une position absolute a menu et left=0px; il va se coller au body et non au wrapper qui est sont conteneur le plus proche pourtant...

shanya

chouette se monde d'inforùatique

hugoOo

laisse pas dépasser ton pixel

jvai essayer de faire ta technique même si j'avais commencer a mettre en place avec des margin-top: -x px; et que ça commencait à marcher

---------------
http://over-templates.c.la

Publicité

FlorentG

Waaaaaaaa [:johneh]

LE CODE HTML §§§§§ WOUUUUUUUUUUUUUUUUUU

Tu devrais consulter, tu souffres de divite fortement aigüe à un stade très avancé. Je te donne 2 mois à vivre...

Y'a strictement rien de sémantique là-dedans ! C'est quoi les titres ? C'est quoi les listes ? Y'a 50 000 paragraphes qui ne sont pas des paragraphes, des divs et des trucs au lieu de hx et de ul !

Message cité 1 fois

kwaio

Moi j'ai eu le code comme ça.
J'suis d'accord, ya trop de div...

Qqun m'explique ou ets le probleme d'un grand tableau sans marges ni border ?

Shinuza

This is unexecpected

FlorentG a écrit :

+1 [:sinclaire]

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML/CSS] comptatibilité Firefox

Sujets relatifs
debutant en CSS	[CSS] Décalage IE/FF pour des float
Afficher le contenu d'un fichier html sur une autre page	prob alignement Firefox/IE
Comment générer un formulaire HTML en PDF	[Flash] popup et firefox
Effet thumbnail dans un menu défilant en HTML/CSS	Lien html sur du flash
Lien html sur du flash
Plus de sujets relatifs à : [HTML/CSS] comptatibilité Firefox

Page générée en 0.149 secondes