 |
|
|
|
| Problème de <div> affichage IE/Firefox par  10de3 |
mercredi 7 novembre 2007 à 21:41:20 |
<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>
/* 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;
}
Configuration: Windows XP Firefox 2.0.0.9
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. |
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... ;) ) |
salut,
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…) [ Mathieu ] "Les jeunes c'est l'insécurité il faudrait tous les enfermer!" BxN 1985 |
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
|
hum...^^
Quand j'essaie avec IE, y'a tout qui se p*te la g**...^^ Avec FF, tout est correctement alligné, mais dans IE, la première est bonne, mais les autres sont plus hautes et à droite, sauf la 2ème qui est trop haute, mais au milieu.... :S |
ah, je me rends compte maintenant que le cadre du fond est effectivement mal cadré...^^
Et si tu essaies de simplement changer la hauter de ton div? en ajoutant une ligne height: 700px;? |
oulah (désolé pour le multi-massage, mais...)
Tu as tout changé? parce que maintenant même sous FF, c'est le bronx... |
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 :
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/ |
tu ne pouvais me faire plus d'honneur que de confirmer mes dires avec un tel article !
merci mon cher !!! -;o) [ Mathieu ] "Les jeunes c'est l'insécurité il faudrait tous les enfermer!" BxN 1985 |
pas de b SleanX
et oui, je ne suis pas le premier à dire que tu es notre star à tous dalida, tu connais la chanson !! |
| 05/12 19h32 | Probleme d'affichage IE6/Firefox | Webmastering | 06/12 22h06 | 3 |
| 20/09 11h34 | Différences d'affichage IE/Firefox | Internet | 20/09 16h37 | 3 |
| 24/03 13h43 | pb affichage ie et firefox sur 1 site | Internet | 24/03 13h43 | 0 |
| 08/12 06h06 | affichage IE6 différent de Firefox | Webmastering | 08/12 15h32 | 3 |