|
|
|
|
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"> :
<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
Salut,
|
Salut,
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 :
|
Dalida, tu avais bien raison... ce n'est pas que je doutais..mais j'ai eu un peu de mal à le mettre en place !
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/ |