Problèmes d'affichage FireFox <> IE

Recherche :

Sujet(s) à lire :
- Idée pour mise en place d'un menu horizontal.....

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problèmes d'affichage FireFox <> IE

le_duc

PlaTyPuS

:hello:

Sujet édité! -> j'ai refais la page en utilisant des DIV à la place d'un tableau et qqs problèmes persistent...

J'arrive pas à aligner les montagnes et les drapeau sur la ligne du <div class="logo">...

Site ici : http://www.duotone.ch/~bastien/applimed/

Code :

<body>
<div class="entete">
<p class="montagne"><img src="images/design/montagne.gif" width="231" height="18" class="img"></p>
<p class="langues rightBlue"><img class="img" src="images/navigation/drapeau_francais_mini.gif" width="30" height="18"></p>
<p class="langues"><img class="img" src="images/navigation/drapeau_allemand_mini.gif" width="30" height="18"></p>
<p class="langues"><img class="img" src="images/navigation/drapeau_anglais_mini.gif" width="30" height="18"></p>
</div>
<div class="logo">
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Entreprise</a></li>
<li><a href="#">Produits & Services</a></li>
<li><a href="#">Qualité</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>

Code :

body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
}
.logo {
width: 750px;
height: 140px;
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
background-position: 40px 20px;
border-left: 1px solid #00519F;
border-top: 1px solid #00519F;
border-right: 1px solid #00519F;
}
.entete {
width: 750px;
height: 30px;
margin: 0px;
padding: 0px;
padding-top: 20px;
}
.montagne {
float: left;
margin: 0px;
padding: 0px;
}
.langues {
border-left: 1px solid #00519F;
border-top:1px solid #00519F;
margin: 0px;
padding: 3px;
float: right;
}
.img {
vertical-align: bottom;
}

Si vous avez une idée pour l'alignement vertical des montagnes et des drapeau, j'vous écoute .

Et 2e problème, le centrage de la page dans FireFox ne se fait pas :??: . -> un text-align: center; dans le body ne suffit pas ??

Merci pour vos réponses!

Message édité par le_duc le 04-01-2005 à 16:33:34

Publicité

masklinn

í dag viðrar vel til loftárása

j'avais dit que ca fonctionnerait pas

(et vire moi ces <table>s à la con et le cadre rouge du 1er item)
(BTW t'as vu que ton cadre déplace tous les éléments sur hover)

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

FlorentG

Ah, suite du truc. Attention, surtout ne jamais utiliser de tableaux pour la mise en page (on est quand même en 2005, faudrait penser à arrêter d'utiliser des techniques qui datent de plus de 5 ans...).

Aussi pourquoi les script sur les drapeaux ? Surtout pour des trucs destinés à être des liens :??:

le_duc

PlaTyPuS

Masklinn a écrit :

j'avais dit que ca fonctionnerait pas

(et vire moi ces <table>s à la con et le cadre rouge du 1er item)
(BTW t'as vu que ton cadre déplace tous les éléments sur hover)

ben euh, tu proposes koi alors??? pasque je vois pas trop comment faire avec une image d'1pixel en repeat... (surtout pour le début, ou la bande grise touche le batiment...)

Sinon koi les tables??? y'a qu'1 tableau... puis le cadre rouge indique la page actuelle...mais c vrai que je pourrais l'enlever!

FlorentG

Les tables servent à afficher des donnée tabulaires, pas à faire de la mise en forme

le_duc

PlaTyPuS

FlorentG a écrit :

bof, ca fait joli et je savais pas comment faire en css...

le_duc

PlaTyPuS

FlorentG a écrit :

Les tables servent à afficher des donnée tabulaires, pas à faire de la mise en forme

ouais ouais ouais, d'accord! je changerai ca si possible! mais bon, vaut mieux avoir 1 tableau que 30 DIV .

FlorentG

Ben apprend à tout faire en CSS... NS 4.7 est très loin derrière pour ce qui est des tables. Et pour les scripts, faut toujours les utiliser si jamais on ne peut VRAIMENT rien faire en CSS. Faut toujours penser à celui qui n'a pas javascript d'activé (genre chez moi c'est activé, mais super minimal, genre même pas le droit de changer des images)

le_duc

PlaTyPuS

FlorentG a écrit :

ouais, mais bon, cette histoire de script c un détail! si le mec n'a pas javascript d'activé...ben le fond ne se met pas en bleu et voilà!

Par contre, pour les espaces et le centrage, vous avez pas une idée??

Puis tjs pour le problème principal, le décalage entre IE et FireFox...?

FlorentG

Ben déjà vire nous ces tables, et après on te répondra

Publicité

masklinn

í dag viðrar vel til loftárása

Le décalage est habituellement un problème dans les marges par défaut des navigateurs

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

FlorentG

C'est vrai, la première chose en général à faire, c'est ça :

Code :

body {
margin: 0px;
padding: 0px;
}

masklinn

í dag viðrar vel til loftárása

FlorentG a écrit :

C'est vrai, la première chose en général à faire, c'est ça :

Code :

body {
margin: 0px;
padding: 0px;
}

ouaip

mais MSIE garde des marges à la con [:cupra]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

FlorentG

Ah bon :??: Jamais remarqué

le_duc

PlaTyPuS

re les gens!

voilà j'ai recommencé avec des <div></div>, mais c la galère pour le placement du menu horizontal... y'a un truc que j'ai pas dû capter!

Voilà mon code html :

Code :

<div class="logo">
<div class="menu">
<ul class="listMenu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Entreprise</a></li>
<li><a href="#">Produits & Services</a></li>
<li><a href="#">Qualité</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</div>

Puis CSS :

Code :

body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
.logo {
width: 750px;
height: 140px;
margin-left: 40px;
margin-top: 20px;
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
background-position: 40px 20px;
}
/* Menu */
.menu {
margin-top: 96;
margin-left: 95;
}
.menu ul li {
list-style-type: none;
float: left;
display: block;
margin: 0px;
padding: 0px;
text-align: center;
}
.menu a {
font: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
}
.menu a:hover {
border: 1px solid red;
margin-left: 20px;
margin-right: 20px;
}

Et le problème, c que mon menu horizontal, ne se place pas du tout à la bonne place!

masklinn

í dag viðrar vel til loftárása

1- enlève un div (le div menu, le <ul> fait le boulot)
2- margin-top: 96 ca veut rien dire, il faut toujours avoir l'unité

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

le_duc

PlaTyPuS

Masklinn a écrit :

1- enlève un div (le div menu, le <ul> fait le boulot)
2- margin-top: 96 ca veut rien dire, il faut toujours avoir l'unité

arf oui, 96px :pt1cable:

et j'ai enlevé le div, mais l'affichage ne se fait plus en ligne maintenant (mais sur une colonne).

Code :

<div class="logo">
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Entreprise</a></li>
<li><a href="#">Produits & Services</a></li>
<li><a href="#">Qualité</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>

Code :

.logo {
width: 750px;
height: 140px;
margin-left: 40px;
margin-top: 20px;
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
background-position: 40px 20px;
}
/* Menu *
.menu {
margin-top: 96px;
margin-left: 100px;
list-style-type: none;
float: left;
display: block;
}
*/
.menu {
list-style-type: none;
margin-top: 96px;
margin-left: 100px;
text-align: center;
float: left;
display: block;
}
.menu a {
font: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
}
.menu a:hover {
border: 1px solid red;
margin-left: 20px;
margin-right: 20px;
}

:??:

masklinn

í dag viðrar vel til loftárása

change le class menu en id menu

#menu li {
display: inline;
}

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

FlorentG

Faut mettre ça :

Code :

float: left;

Pour les <li> du menu.

multani

Dépressionnisé

Masklinn a écrit :

ouaip

mais MSIE garde des marges à la con [:cupra]

Je confirme, il me semble qu'il met les marges + padding sur l'élément html
Donc, généralement, ce que je fais :

Code :

html, body {
margin: 0px;
padding: 0px;
}

My .2 cents

le_duc

PlaTyPuS

:hello:

Merci pour votre aide, cette fois, c'est bon .

Par contre j'arrive pas à aligner les montagnes et les drapeau sur la ligne du <div class="logo">...

Site ici : http://www.duotone.ch/~bastien/applimed/

Code :

<body>
<div class="entete">
<p class="montagne"><img src="images/design/montagne.gif" width="231" height="18" class="img"></p>
<p class="langues rightBlue"><img class="img" src="images/navigation/drapeau_francais_mini.gif" width="30" height="18"></p>
<p class="langues"><img class="img" src="images/navigation/drapeau_allemand_mini.gif" width="30" height="18"></p>
<p class="langues"><img class="img" src="images/navigation/drapeau_anglais_mini.gif" width="30" height="18"></p>
</div>
<div class="logo">
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Entreprise</a></li>
<li><a href="#">Produits & Services</a></li>
<li><a href="#">Qualité</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>

Code :

body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
}
.logo {
width: 750px;
height: 140px;
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
background-position: 40px 20px;
border-left: 1px solid #00519F;
border-top: 1px solid #00519F;
border-right: 1px solid #00519F;
}
.entete {
width: 750px;
height: 30px;
margin: 0px;
padding: 0px;
padding-top: 20px;
}
.montagne {
float: left;
margin: 0px;
padding: 0px;
}
.langues {
border-left: 1px solid #00519F;
border-top:1px solid #00519F;
margin: 0px;
padding: 3px;
float: right;
}
.img {
vertical-align: bottom;
}

FlorentG

Pourquoi est-ce que tu met tes images dans des <p> ? Tu peux appliquer directement le style à l'image :

Code :

<img class="montagne".........

En plus sémantiquement tu n'as pas de paragraphe dans ce cas

le_duc

PlaTyPuS

FlorentG a écrit :

Pourquoi est-ce que tu met tes images dans des <p> ? Tu peux appliquer directement le style à l'image :

Code :

<img class="montagne".........

En plus sémantiquement tu n'as pas de paragraphe dans ce cas

yes, ok pour les montagnes! Mais pour les drapeau ca joue pas, car sinon j'arrive pas à obtenir une bordure à 3px du drapeau :sleep: (à moins qu'il y ait une astuce ).

masklinn

í dag viðrar vel til loftárása

le_duc a écrit :

yes, ok pour les montagnes! Mais pour les drapeau ca joue pas, car sinon j'arrive pas à obtenir une bordure à 3px du drapeau :sleep: (à moins qu'il y ait une astuce ).

padding

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

le_duc

PlaTyPuS

ah yes, parfait . Donc mtn j'ai plus de <p> .

reste donc à régler le problèmes de l'espace et du centrage :sleep: :pt1cable:

Message édité par le_duc le 04-01-2005 à 17:26:42

le_duc

PlaTyPuS

bon bah... j'ai reglé mes problèmes (ptetre un peu à la bourrin, mais ca passe )

-> pour le centrage, une balise DIV supplémentaire avec left: 50% puis un margin-left négatif

-> pour l'espace, un padding-top: 20px et c'est pil-poil bon

FlorentG

Upload le résultat une fois

plainsofpain

Pingouino's lover

De toute facon ma signature le clame pour moi, la mise en page CSS, c'est pas plus difficile que les tableaux, et en plus ca facilite la vie une fois qu'on comprend comment ca marche

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

le_duc

PlaTyPuS

re!

voilà le résultat: http://www.duotone.ch/~bastien/applimed/

Code :

<body>
<div id="global">
<div class="entete">
<img class="montagne img" src="images/design/montagne.gif" width="231" height="18">
<a class="aSmall langues rightBlue" href="#"><img class="img" src="images/navigation/drapeau_francais_mini.gif" width="30" height="18"><br>Français</a>
<a class="aSmall langues" href="#"><img class="img" src="images/navigation/drapeau_allemand_mini.gif" width="30" height="18"><br>Deutsch</a>
<a class="aSmall langues" href="#"><img class="img" src="images/navigation/drapeau_anglais_mini.gif" width="30" height="18"><br>English</a>
</div>
<div class="logo">
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Entreprise</a></li>
<li><a href="#">Produits & Services</a></li>
<li><a href="#">Qualité</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
<div class="contenu">
<div class="bandeGauche">b</div>
Contenu
<div class="spacer"> </div>
</div>
<div class="piedDePage">
Pied de page</div>
</div>

Code :

body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
}
#global { /* pour que la page soit centrée */
position:absolute;
left: 50%;
width: 750px;
margin-left: -375px; /* moitié de la largeur */
text-align: left;
}
/* Entête de la page -> montagnes, logo, langues */
.logo {
width: 750px;
height: 140px;
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
background-position: 40px 20px;
border-left: 1px solid #00519F;
border-top: 1px solid #00519F;
border-right: 1px solid #00519F;
}
.entete {
width: 752px; /* 2px de plus que la largeur normal pour que les bordures soient bien alignées */
height: 38px;
padding-top: 20px;
}
.montagne {
float: left;
margin: 0px;
padding: 0px;
padding-top: 20px;
}
.langues {
border-left: 1px solid #00519F;
border-top: 1px solid #00519F;
margin: 0px;
padding: 3px;
float: right;
text-align: center;
}
.img {
vertical-align: bottom;
border: 0px;
}
/* Menu */
#menu {
list-style-type: none;
margin-top: 96px;
margin-left: 70px;
text-align: center;
float: left;
display: block;
}
html>body #menu {
margin-top: 96px;
margin-left: 90px;
}
#menu li {
display: inline;
}
#menu a {
font: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
/* padding-top: 1px;
padding-bottom: 1px;
*/
}
#menu a:hover {
border: 1px solid red;
}
/* Contenu */
.contenu {
width: 740px;
text-align: left;
border-right: 1px solid #00519F;
border-left: 1px solid #00519F;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color:#CCCCCC;
}
/* Bande gauche */
.bandeGauche {
float: left;
width: 10px;
border-right: 2px dotted #C3D6E8;
margin: 0px;
padding: 0px;
margin-right: 5px;
background-color:#FFCCCC;
}
.spacer {
clear: both;
}
/* Pied de page */
.piedDePage {
width: 730px; /* taille globale - padding (2x10px) */
border: 1px solid #00519F;
padding: 10px;
}

Bon, c déjà une étape , mais mtn il faudrait que j'arrive à faire la zone de titre, comme je l'ai conçue...et je vois pas encore comment faire ca!

zone de titre :

-> vous feriez comment l'ovale entourant le titre des pages? (surtout pour ce qui est de la ligne pointilliée qui arrive jusqu'à l'ovale...)

FlorentG

Ligne pointillée... Soit un border dotted... Pour l'ovale, tu met "Entreprise" dans un <h2> (vu qu'en théorie le <h1> est Applimed SA), et l'oval en fond du h2...

le_duc

PlaTyPuS

pfff, je galère avec ces DIV... j'arrive pas à mettre en place les zones ou il y aura les pointillés et le contenu :fou:

voilà ce que j'ai pour l'instant :

Code :

<body>
<div id="global">
<div entete>...
<div logo>...
<div class="conteneur">
<p class="bandeGauche">b</p>
<p class="contenu">Contenu</p>
<div class="spacer"> </div>
</div>
<div piedDePage>...

Code :

#global { /* pour que la page soit centrée */
position:absolute;
left: 50%;
width: 750px;
margin-left: -375px; /* moitié de la largeur */
text-align: left;
}
/* Conteneur principal */
.conteneur {
width: 750px;
border-left: 1px solid #00519F;
border-right: 1px solid #00519F;
}
/* Bande gauche */
.bandeGauche {
float: left;
width: 15px;
margin: 0px;
border-right: 2px dotted #C3D6E8;
background-color:#FFCCCC;
}
/* Contenu */
.contenu {
width: 715px;
text-align: left;
padding: 10px;
margin-left: 15px;
background-color:#CCCCCC;
}
.spacer {
clear: both;
}

Le problème, c'est qu'il faut que "bandeGauche" ait la meme taille que "contenu" et que les 2 soit côte-à-côte dans le "conteneur"...

Merci encore pour l'aide!

le_duc

PlaTyPuS

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Problèmes d'affichage FireFox <> IE

Sujets relatifs
Problème d'affichage des enregistrements dans un DataReport VB6	Firefox et les cadres
problémes de rep parent (ASP) - (résolu)	CFileDialog affichage icône miniatures défaut
[Xul - Firefox] Des connaisseurs??	gif animé qui plante sous Firefox
Affichage dans une picturebox [Visual C++]	Problème affichage caractères spéciaux
[C Ansi] Affichage dynamique en console	Pb bizarre avec Firefox
Plus de sujets relatifs à : Problèmes d'affichage FireFox <> IE

Page générée en 0.154 secondes