Problème de <div> affichage IE/Firefox
Résolu
10de3
Messages postés
23
Statut
Membre
-
Frederic -
Frederic -
Bonjour,
Premier post sur le forum de ccm, et pourtant il m'a déjà beaucoup servi, donc tout d'abord merci !
Voila, comme je le dis dans l'objet, j'ai un problème d'affichage entre IE et Firefox... c tj galère, et pour une fois, c'est IE qui affiche ce que je veux !!
Le problème est d'afficher un div dans un autre div. Avant de vous expliquer, les preuves parlent plus : merci de faire un tour sur la page en question ici:
http://etudesjuniorisep.ovh.org/cardio_pmc/index.php?lien=cardiologues_pmc
Le site est en construction, le login est "visiteur", le mot de passe idem : "visiteur"
Sous IE pas de pb. Mais avec Firefox la taille du div que j'ai nommé "corps" ne s'ajuste pas à son contenu.
Voila comment je l'ai construit : plutôt que de faire un tableau dans <div id="corps">, j'ai créé dans ce corps un <div id="coordonnees_cardiologue" > dans lequel j'ai défini des <span class=""> pour définir les couleurs de fond.
Voici le code contenu dans <div id="corps"> :
Et voici la partie du css en question :
Ma question est simple : comment remédier à ce problème (pour ceux qui ne s'en souviennent plus, c'est le <div id="corps"> qui est plus court que son contenu) ?
Je ne suis qu'un petit débutant, donc s'il ne faut pas du tout s'y prendre comme ça, je ne vous en voudrais pas de me diriger vers un lien qui pourrais tout m'expliquer.
Un grand merci pour votre aide
Premier post sur le forum de ccm, et pourtant il m'a déjà beaucoup servi, donc tout d'abord merci !
Voila, comme je le dis dans l'objet, j'ai un problème d'affichage entre IE et Firefox... c tj galère, et pour une fois, c'est IE qui affiche ce que je veux !!
Le problème est d'afficher un div dans un autre div. Avant de vous expliquer, les preuves parlent plus : merci de faire un tour sur la page en question ici:
http://etudesjuniorisep.ovh.org/cardio_pmc/index.php?lien=cardiologues_pmc
Le site est en construction, le login est "visiteur", le mot de passe idem : "visiteur"
Sous IE pas de pb. Mais avec Firefox la taille du div que j'ai nommé "corps" ne s'ajuste pas à son contenu.
Voila comment je l'ai construit : plutôt que de faire un tableau dans <div id="corps">, j'ai créé dans ce corps un <div id="coordonnees_cardiologue" > dans lequel j'ai défini des <span class=""> pour définir les couleurs de fond.
Voici le code contenu dans <div id="corps"> :
<h1>Les coordonnées des médecins</h1>
<div id="coordonnees_cardiologue">
<span class="coordonnees_cardiologue_photo">
<img src="images/cardiologue_JPB.png" > </span>
<span class="coordonnees_cardiologue_nom">
Dr </span>
<span class="coordonnees_cardiologue_telephone">
Secrétaire . . . . . . . . . . . . : 00.00.00.00.00<br>Fax . . . . . . . . . . . . . . . . . . : 00.00.00.00.00 </span>
<br>
<span class="coordonnees_cardiologue_photo">
<img src="images/cardiologue_AK.png" > </span>
<span class="coordonnees_cardiologue_nom">
Dr </span>
<span class="coordonnees_cardiologue_telephone">
Secrétaire . . . . . . . . . . . . : 00.00.00.00.00<br>Fax . . . . . . . . . . . . . . . . . . : 00.00.00.00.00 </span>
</div>
Et voici la partie du css en question :
/* le corps de la page */
#corps
{
width: 580px;
margin-left: 180px;
margin-bottom: 20px;
padding-top:5px;
padding-bottom:25px;
padding-left:20px;
padding-right:20px;
background-color: #EAECF5;
background-image: url("../images/pied_de_page.png");
background-repeat: no-repeat;
background-position : bottom left;
}
/* le "talbeau" de coordonnées*/
#coordonnees_cardiologue
{
width: 450px;
}
.coordonnees_cardiologue_photo
{
width: 100px;
height: 75px;
margin-top: 20px;
float:left;
}
.coordonnees_cardiologue_nom
{
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
width: 300px;
height: 20px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
margin-top: 20px;
float:left;
background-color: #8EDC88;
}
.coordonnees_cardiologue_telephone
{
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
width: 300px;
height: 45px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
float:left;
background-color: #0694D2;
}
Ma question est simple : comment remédier à ce problème (pour ceux qui ne s'en souviennent plus, c'est le <div id="corps"> qui est plus court que son contenu) ?
Je ne suis qu'un petit débutant, donc s'il ne faut pas du tout s'y prendre comme ça, je ne vous en voudrais pas de me diriger vers un lien qui pourrais tout m'expliquer.
Un grand merci pour votre aide
A voir également:
- Problème de <div> affichage IE/Firefox
- Downloadhelper firefox - Télécharger - Outils pour navigateurs
- Telecharger firefox - Télécharger - Navigateurs
- Affichage double ecran - Guide
- Exporter favoris firefox - Guide
- Problème affichage fenêtre windows 10 - Guide
10 réponses
Dalida, tu avais bien raison... ce n'est pas que je doutais..mais j'ai eu un peu de mal à le mettre en place !
La solution est là
http://smashingcoding.com/2007/11/05/partir-du-bon-pied-avec-les-css/
je ne sais pas si j'ai le droit mais je met l'article pour éviter aux suivant de passer deux heures sur ce problème
Clearfix
L’horreur absolu quand vous réaliser votre design, ce sont les interactions entre float et clear. Et selon votre design, vous pourrez rencontrer deux problèmes assez gênants.
Le premier problème est qu’un élément en flottant à gauche ou à droite ne redimensionne pas son parent. Un exemple simple :
je rappelle l'adresse du site pour ne pas voler la vedette à Sévrerin l'auteur :
http://smashingcoding.com/2007/11/05/partir-du-bon-pied-avec-les-css/
La solution est là
http://smashingcoding.com/2007/11/05/partir-du-bon-pied-avec-les-css/
je ne sais pas si j'ai le droit mais je met l'article pour éviter aux suivant de passer deux heures sur ce problème
Clearfix
L’horreur absolu quand vous réaliser votre design, ce sont les interactions entre float et clear. Et selon votre design, vous pourrez rencontrer deux problèmes assez gênants.
Le premier problème est qu’un élément en flottant à gauche ou à droite ne redimensionne pas son parent. Un exemple simple :
1.
<style>
2.
.parent {
3.
border: 1px solid #000;
4.
padding:5px;
5.
}
6.
.flottant {
7.
float: left;
8.
width: 150px;
9.
border:1px solid #F00;
10.
}
11.
</style>
12.
13.
<div class="parent">
14.
<div class="flottant">Cette colonne ne redimensionne pas correctement le DIV qui la contient.</div>
15.
Ce texte est le seul à redimensionner le DIV qui le contient.
16.
</div>
Dans cet exemple, le flottant dépasse du cadre du parent. Pas très esthétique… Heureusement, le simple ajout d’une classe CSS au parent peut arranger ça.
1.
<style>
2.
.parent {
3.
border: 1px solid #000;
4.
padding:5px;
5.
}
6.
7.
.flottant {
8.
float: left;
9.
width: 150px;
10.
border:1px solid #F00;
11.
}
12.
13.
.clearfix:after {
14.
content: ".";
15.
display: block;
16.
height: 0;
17.
clear: both;
18.
visibility: hidden;
19.
}
20.
21.
.clearfix {display: inline-block;}
22.
23.
/* Hides from IE-mac */
24.
* html .clearfix {height: 1%;}
25.
.clearfix {display: block;}
26.
/* End hide from IE-mac */
27.
</style>
28.
29.
<div class="parent clearfix">
30.
<div class="flottant">Avec le clearfix, cette colonne redimensionne bien le DIV qui la contient.</div>
31.
Ce texte n’est plus le seul à redimenssionner le DIV parent mais il peut toujours le faire si il est plus grand que la colonne.
32.
</div>
je rappelle l'adresse du site pour ne pas voler la vedette à Sévrerin l'auteur :
http://smashingcoding.com/2007/11/05/partir-du-bon-pied-avec-les-css/
J'ai pas tout regardé, mais tu peux essayer de bidouiller avec des instructions conditionelles css, dans ton css. C'est pas joli, mais ca peut faire l'affaire.
oulah (désolé pour le multi-massage, mais...)
Tu as tout changé?
parce que maintenant même sous FF, c'est le bronx...
Tu as tout changé?
parce que maintenant même sous FF, c'est le bronx...
tu ne pouvais me faire plus d'honneur que de confirmer mes dires avec un tel article !
merci mon cher !!!
-;o)
merci mon cher !!!
-;o)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
pas de b SleanX
et oui, je ne suis pas le premier à dire que tu es notre star à tous dalida, tu connais la chanson !!
et oui, je ne suis pas le premier à dire que tu es notre star à tous dalida, tu connais la chanson !!
Salut,
Désolé, je crois que j'ai pas bien compris ton problème, c'est quel div qui est de la mauvaise taille? Parce-que pour moi tout est normal, sur mon Firefox...
(juste, petit conseil perso, la couleur du div ou y'a les coordonnées, ça sortirait mieux en bleu clair, juste un petit peu plus clair que le bleu que tu as en banner... ;) )
Désolé, je crois que j'ai pas bien compris ton problème, c'est quel div qui est de la mauvaise taille? Parce-que pour moi tout est normal, sur mon Firefox...
(juste, petit conseil perso, la couleur du div ou y'a les coordonnées, ça sortirait mieux en bleu clair, juste un petit peu plus clair que le bleu que tu as en banner... ;) )
salut,
c'est le flottement qui mets le bronx.
ajoute un '<hr />' en bas du '<div>' conteneur.
et en css tu lui appliques :
ça devrait rentrer dans l'ordre (des médecins ?!).
(-> je sors…)
c'est le flottement qui mets le bronx.
ajoute un '<hr />' en bas du '<div>' conteneur.
et en css tu lui appliques :
hr
{
clear:left;
visibility:hidden;
}
ça devrait rentrer dans l'ordre (des médecins ?!).
(-> je sors…)
Pour strat :
Effectivement, je pourrais m'en sortir comme ça, mais moi qui essaie de faire un site simple mais "proprement", autant retourner à mon dreamweaver dans ce cas ! Cependant, merci pour ta reflexion, car je me rappelle qu'un ami qui code pas mal m'a dit qu'il faisait deux feuilles css et il met juste une condition (pas dans le css tout partout..) pour appeler la bonne feuille de style suivant le navigateur du visiteur.
Pour SleanX:
C'est quoi ta version de firefox ? bizarre bizarre...
Merci pour le conseil, effectivement c pas mal je peaufinerai à la fin !
Pour Dalida:
je teste et je te tiens au courant
Effectivement, je pourrais m'en sortir comme ça, mais moi qui essaie de faire un site simple mais "proprement", autant retourner à mon dreamweaver dans ce cas ! Cependant, merci pour ta reflexion, car je me rappelle qu'un ami qui code pas mal m'a dit qu'il faisait deux feuilles css et il met juste une condition (pas dans le css tout partout..) pour appeler la bonne feuille de style suivant le navigateur du visiteur.
Pour SleanX:
C'est quoi ta version de firefox ? bizarre bizarre...
Merci pour le conseil, effectivement c pas mal je peaufinerai à la fin !
Pour Dalida:
je teste et je te tiens au courant
