IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

probleme de div : float, clear etc


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Acropole
    Invité(e)
    Par défaut probleme de div : float, clear etc
    Bonjour,

    J'ai un probleme avec des divs dans Firefox.
    La div du menu est flottante a gauche, elle est suivie de la div du corps de page qui devrait logiquement se placer à sa suite a droite. Ca marche bien sous ie 7 mais firefox place le corps en dessous du menu, comme si il y'avait un clear:both.

    Voici les css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
     
    .conf{
    	padding: 10px;
    	text-align:justify;
    }
    #page{
    	width:724px;
    	height:100%;
    	border:solid 1px #000000;
    	margin-right:auto;
    	margin-left:auto;
    	background-image: url(images/fnd_menu.gif);
    	background-repeat: repeat-y;
    	display:table;
    }
    #menu{
    	width:131px;
    	float:left;
    }
    #corps{
    	padding:10px;
    	text-align:left;
    	font-family:arial;
    	font-size:12px;
    	width:570px;
    	height:100%;
    	display:table;
    	float:left;
    }
    html, body{
    	margin:0px;
    	padding:0px;
    	height:auto;
    	width:auto;
    	text-align:center;
    }
    et voici le code de la page :

    la div id="corps" se place en desous du menu

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
     
    <body>
    <?php include("entete.html"); ?>
    <div id="page">
    <div id="menu">
    <?php echo"<img src='images/menu/$image' width='131' height='59'>"; ?><br>
    <?php include("menu.html"); ?>
    </div>
    <div id="corps">
    <a href="index.php" class="link_blue">Accueil</a> &gt; Conf&eacute;rences Pr&eacute;histoire et Astronomie
    <p>
    	<img src="images/ban_pechmerle.jpg" width="281" height="220" hspace="10" border="0" align="left" alt="Empreintes préhistorique et historique">
    	<h1 style="text-align:center;">Conf&eacute;rences Pr&eacute;histoire et Astronomie</h1>
    	<center><img src="images/logopechmerle.gif" alt="centre de pr&eacute;histoire de pech-merle" width="160" height="105"></center>
    </p>
    <div class="conf">
    <p style="font-size:16px; clear:both">Le Monde de la Ferme des Etoiles et<br/>
    	le Centre de Pr&eacute;histoire du Pech-Merle (Cabrerets, Lot)<br/>
      <strong>Saison culturelle 2008</strong>
       </p>
       <H2 style="clear:both">Les journ&eacute;es grand public</H2>
       <img src="images/hitoire-astro-conf.jpg" alt="Conf&amp;eacute;rence astronomie" hspace="10" align="left">
       <p><strong><em>Pech Merle</em> les 2, 3 et 17 mai <br>
    	</strong><strong><em>Hameau des Etoiles</em> les  9, 10 et 11 mai, <br>
     - de 10h – 12h &amp; 14h -17h  + les soir&eacute;es de 22h &agrave; 00h</strong></p>
       <p>Ces ateliers seront en alternance toute la journ&eacute;e.<br>
    	Pour les ateliers pr&eacute;histoires, 15 &agrave; 
       16 participant maximum (inscription indispensable)</p><br/>
       <p style="clear:both"><strong>Astronomie</strong> : </p>
       <ul>
        <li><strong>De l’Univers &agrave; l’apparition de l’Homme :</strong> une histoire de 14 milliards d’ann&eacute;es ! (1h)</li>
    	<li><strong>Le calendrier cosmique :</strong> si l’Univers avait 1 an ! (30 minutes)</li>
    	<li><strong>Le ciel de nos anc&ecirc;tres :</strong> au moyen d’un logiciel plan&eacute;tarium, remontons le temps jusqu’&agrave; -100 000 pour voir que le ciel de nos anc&ecirc;tres &eacute;taient bien diff&eacute;rents du notre. (30 minutes)</li>
    	<li><strong>Soir&eacute;es d’observations</strong>
    	 <ul>
    	  <li>Identification et rep&eacute;rage des principales &eacute;toiles et constellations</li>
    	  <li>Observation au t&eacute;lescope.</li>
    	 </ul>
    	</li>
       </ul>
       <p><strong>Pr&eacute;histoire :</strong></p>
       <ul>
        <li><strong>Evolution de l’Homme et d&eacute;monstration de fabrication d’objets</strong>
    	 <ul>
    	  <li><strong>Faire le feu :</strong> par frottement ou par percussion, retrouvez le gestes de nos anc&ecirc;tres pour allumer le feu… (1h)</li>
    	  <li><strong>R&eacute;aliser une main n&eacute;gative :</strong> les techniques pour reproduire l’un des symboles de l’art pari&eacute;tal de la grotte de  Pech Merle. (1h)</li>
    	 </ul>
    	</li>
       </ul>
       <H2>Les journ&eacute;es enfants</H2>
       <img src="images/hitoire-astro-enfants.jpg" alt="s&eacute;jour enfants" width="200" height="150" hspace="10" vspace="10" align="left">
       <p><strong><em>Pech Merle </em>les 4, 21 et 17 mai &amp; 9, 10, 11 juillet <br>
    	<em>Hameau des Etoiles </em> les 18, 25 juin &amp; 16, 17 et 18 juillet <br>
    	- Horaires : de 10h – 12h &amp; 14h -17h  </strong></p>
       <p>2 groupes de 15 &agrave; 20 enfants en alternance</p>
       <div style="clear:both"><strong>Journ&eacute;e type</strong></div>
    <div style="float:left; width:40%;">
       <p style="background-color:#876BA9; color:#FFFFFF; padding:3px;">De 10-12h :</p>
        <li>Une histoire de l’Univers</li>
    	<li>Le ciel de nos anc&ecirc;tres</li>
    </div>
    <div style="float:right; width:55%;">
    <p style="background-color:#876BA9; color:#FFFFFF; padding:3px;">De 14 &agrave; 16h : </p>
    <li>L’&eacute;volution de l’Homme</li>
    <li>La vie quotidienne autour d’un campement</li>
    <li>Comment faire du feu</li>
    <li>Initiation &agrave; l’art pari&eacute;tal</li>
    </div>
       <h2 style="clear:both"><strong>Les conf&eacute;rences :</strong></h2>
       <h3>&laquo; Temps de la terre, temps de l’homme &raquo; </h3>
       <img src="images/dolmens.jpg" alt="dolmens" hspace="10" vspace="10" align="left">
    <p><strong>vendredi 18 avril 2008,<br>
    	 salle de cin&eacute;ma du mus&eacute;e,<br>
    	 20h30, entr&eacute;e gratuite</strong></p>
       <p>Le Temps est difficile &agrave; d&eacute;finir, tant il rel&egrave;ve d’approches diff&eacute;rentes. Gr&acirc;ce &agrave; 
       la g&eacute;ologie, qui s’int&eacute;resse &agrave; l’histoire de la Terre, un saut significatif fut la d&eacute;couverte 
       du temps long. Cette notion fut difficile &agrave; accepter et eut de fortes implications dans d’autres domaines (biologie, 
       philosophie…). Comment concevoir le temps ? A travers l’histoire, les cultures et les continents, l’humanit&eacute; a 
       toujours cherch&eacute; &agrave; le comprendre, &agrave; le mesurer.</p>
       <p><em>Par Patrick DE WEVER, g&eacute;ologue, Professeur du Mus&eacute;um National d'Histoire Naturelle, Paris.<br>
    	Conf&eacute;rence donn&eacute;e &eacute;galement au Hameau des Etoiles (Fleurance, Gers) le 19 avril</em></p>
       <h3>&laquo; Lascaux : le geste, l’espace et le temps &raquo;</h3>
       <p><strong>vendredi 25 avril 2008</strong></p>
       <p><img src="images/cerf-lascaux.jpg" alt="cerf de Lascaux" width="200" height="129" hspace="10" vspace="10" align="left">Depuis 1980 Norbert Aujoulat s’int&eacute;resse &agrave; l’influence de l’environnement naturel dans la 
       sanctuarisation de la grotte de Lascaux. Il a pu identifier les facteurs qui ont particip&eacute; aussi bien au choix du site 
       qu'&agrave; la r&eacute;alisation des figures sur les parois. Son &eacute;tude r&eacute;v&egrave;le ainsi la pr&eacute;sence de cycles 
       graphiques en lien avec des cycles saisonniers. Trois th&egrave;mes pr&eacute;dominent: le cheval, l’aurochs et le cerf. Est-ce 
       que l’art de Lascaux pourrait r&eacute;v&eacute;ler des donn&eacute;es in&eacute;dites sur la conception du monde des hommes il y a 
       17 000 ans ?</p>
       <p><em>par Norbert AUJOULAT, pr&eacute;historien, Directeur du d&eacute;partement d'art pari&eacute;tal du Centre National de 
       Pr&eacute;histoire (P&eacute;rigueux).</em></p>
       <p><strong>Conf&eacute;rence donn&eacute;e &eacute;galement dans le cadre du Festival d’Astronomie de Fleurance (Gers) du 2 au 8 
       ao&ucirc;t 2008.</strong></p>
       <h3>&laquo; Des constellations dans les grottes pal&eacute;olithiques ? &raquo;</h3>
       <p><strong><img src="images/galaxie-cluster.jpg" alt="galaxies" width="200" height="133" hspace="10" vspace="10" align="left">vendredi 30 mai<br>
        A 20h,<br>
    	 avant la conf&eacute;rence, projection du film &laquo; Lascaux, le ciel des premiers hommes &raquo; (2007)<br>
    	</strong><br>
    		Et si les grottes orn&eacute;es &eacute;taient choisies en fonction de leur orientation vers le soleil ? Et si les peintures pari&eacute;tales &eacute;taient des repr&eacute;sentations des constellations ? Ces hypoth&egrave;ses in&eacute;dites et originales surprennent et divisent la communaut&eacute; scientifique. Qu’en est-il r&eacute;ellement ? Ces nouvelles pistes d’&eacute;tudes peuvent-elles faire progresser nos connaissances sur l’art pari&eacute;tal ? Peuvent-elles nous permettre d‘entrevoir la cosmogonie des populations pr&eacute;historiques ?</p>
       <p><em>par Chantal JEGUES-WOLKIEWIEZ, chercheur ind&eacute;pendant en arch&eacute;oastronomie.</em></p>
       <p><strong>Conf&eacute;rence donn&eacute;e &eacute;galement au Hameau des Etoiles (Fleurance, Gers) le 31 mai</strong><br/>
       </p>
       <h3>&laquo; L’espace habit&eacute; &raquo;</h3>
       <p><strong>	<img src="images/aurignaciens.jpg" alt="outils pr&amp;eacute;historique" width="200" height="200" hspace="10" vspace="10" align="left">4e Nuit des Mus&eacute;es de France,<br/>
    	en partenariat avec le Centre National des Etudes Spatiales (CNES)<br/>
    	Samedi 17 mai 2008 <br/>
    Salle d’exposition du mus&eacute;e de 20h30 &agrave; 1h du matin</strong></p>
       <p>Exposition d’un objet exceptionnel : l’os grav&eacute; de l’abri du Blanchard (Dordogne). Il s’agit d’une des rares pi&egrave;ces au monde qui pourrait attester de l’observation d’un cycle lunaire d&egrave;s le Pal&eacute;olithique, il y a environ 30 000 ans. <br>
    	Logo CNES <br/>
    	Logo Nuit des mus&eacute;es ?</p>
       <h3 style="clear:both">&laquo; Sous le ciel de l’Egypte ancienne &raquo;</h3>
       <p><strong>vendredi 6 juin 2008 &agrave; 20h30</strong></p>
       <img src="images/pyramide.jpg" alt="pyramides" width="200" height="124" hspace="10" vspace="10" align="left">
       <p>Toute d&eacute;marche arch&eacute;oastronomique repose sur la constitution de bases de donn&eacute;es arch&eacute;ologiques, 
       l'&eacute;tude de l'orientation ou du contenu astronomique des vestiges qu'elles contiennent, la constitution de mod&egrave;les de 
       visibilit&eacute; d'&eacute;toiles dans le ciel et la prise en compte de divers crit&egrave;res astronomiques et historiques. 
       Appliqu&eacute;e &agrave; l'Egypte ancienne, cette d&eacute;marche aboutit &agrave; la r&eacute;vision des dates de d&eacute;but 
       de r&egrave;gne de pharaons, &agrave; la d&eacute;termination de la source astronomique des pyramides de l'Ancien Empire ainsi 
       qu'&agrave; la cartographie du ciel des &eacute;gyptiens.</p>
       <p><em>par Karine GADRE, Laboratoire d'Astrophysique de Toulouse-Tarbes, Universit&eacute; de Toulouse et CNRS.</em></p>
       <p><strong>Conf&eacute;rence donn&eacute;e &eacute;galement au Hameau des Etoiles (Fleurance, Gers) le 28 juin</strong></p>
       <h3>&laquo; Arch&eacute;oastronomie des dolmens m&eacute;diterran&eacute;ens &raquo;</h3>
       <p><strong>vendredi 13 juin 2008</strong></p>
       <p><img src="images/carnac.jpg" alt="carnac" width="200" height="141" hspace="10" vspace="10" align="left">Depuis plusieurs ann&eacute;es, J-F Santucci s’int&eacute;resse &agrave; l’orientation des dolmens qu’il 
       &eacute;tudie au regard de la course des astres. Participant tout d'abord en 2004 &agrave; l’&eacute;tude du site 
       arch&eacute;ologique du Monte Revinccu (Haute-Corse) d'un point de vue astronomique, il effectue ensuite des mesures astronomiques 
       des m&eacute;galithes de la Corse en 2005. Il &eacute;tend ensuite son terrain d’&eacute;tude aux tombes m&eacute;galithiques 
       d’Alg&eacute;rie en 2006 et compare ses donn&eacute;es avec le sud de la France, la Sardaigne, les Bal&eacute;ares, l’Espagne, 
       le Maroc, la Tunisie. Aujourd’hui il pr&eacute;sente son travail et donne des exemples d’int&eacute;r&ecirc;t pour 
       l’arch&eacute;ologie.</p>
       <p><em>par Jean-Fran&ccedil;ois SANTUCCI, professeur d’informatique &agrave; l’Universit&eacute; de Corse</em></p>
       <p><strong>Conf&eacute;rence donn&eacute;e &eacute;galement au Hameau des Etoiles (Fleurance, Gers) le 14 juin</strong></p>
       <h3>&laquo; La Pr&eacute;histoire et l’Astronomie en famille &raquo;</h3>
       <p><strong><img src="images/astronomie-en-famille.jpg" width="200" height="141" hspace="10" vspace="10" align="left">Journ&eacute;es d&eacute;couverte les 2 mai, 3 mai, 17 mai 2008,<br/>
    	 de 10h &agrave; 12h, de 14h &agrave; 18h et de 22h30 &agrave; minuit</strong></p>
       <p>D&eacute;couverte de la pr&eacute;histoire et de l’astronomie : d&eacute;monstrations, manipulations, projections, ateliers en 
       famille, observations nocturnes.</p>
       <p><strong>Journ&eacute;es organis&eacute;es &eacute;galement au Hameau des Etoiles (Fleurance, Gers) les 9, 10 et 11 mai 2008</strong></p>
       <p></p>
      </div>
      <p>
       <?php $page_menu = dirname(__FILE__) . '/footer_menu.php'; if (file_exists($page_menu)) { include($page_menu); } else { echo 'Erreur de menu'; } ?>
      </p>
     </div>
    </div>
    <?php include("footer.html"); ?>
    </body>
    </html>

  2. #2
    Inactif   Avatar de Deallyra
    Profil pro
    Étudiant
    Inscrit en
    Février 2007
    Messages
    1 997
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2007
    Messages : 1 997
    Par défaut
    Bonjour,

    J'avoue ne pas avoir regardé ton code
    Je suis déjà en retard pour partir au travail mais tu parles d'un effet similaire à clear:both.

    essaies donc un clear float/
    *Si la réponse vous convient, n'oubliez pas le tag
    *Exprimez vous dans un français correct; on prend le temps de vous lire, prenez le temps de bien écrire.
    *Et comment on interprète votre code? N'oubliez pas la balise!

    *Pour une mise en page simple avec des divs.
    *Pour faire des formulaires xHTML CSS.

  3. #3
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    Citation Envoyé par MimiCracra44 Voir le message
    essaies donc un clear float/
    ?? clear n'est sensé prendre que les valeurs: left, right, both ou none...

    Salut,

    Tu devrais éviter de mélanger le CSS défini en externe et les styles inline (qui sont prioritaires sur tout ce que tu pourrais définir ailleurs).
    L'intérêt du CSS est de séparer Contenu et Présentation. Tu vas à l'encontre de cette philosophie.

    Ton code est bourré de style="clear:both", je regarderais de ce côté là si j'étais toi...
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  4. #4
    Inactif   Avatar de Deallyra
    Profil pro
    Étudiant
    Inscrit en
    Février 2007
    Messages
    1 997
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2007
    Messages : 1 997
    Par défaut
    Oui désolée MasterOfChacal, j'ai fait un amalgame entre le nom de la classe que je donne et son attribut. u__u

    Enfin pour ton problème Acropole, vérifies que tes clear : both; correspondent bien à des "fin de clear" left ou right
    *Si la réponse vous convient, n'oubliez pas le tag
    *Exprimez vous dans un français correct; on prend le temps de vous lire, prenez le temps de bien écrire.
    *Et comment on interprète votre code? N'oubliez pas la balise!

    *Pour une mise en page simple avec des divs.
    *Pour faire des formulaires xHTML CSS.

  5. #5
    Membre Expert
    Avatar de kaiser59
    Homme Profil pro
    Inscrit en
    Novembre 2005
    Messages
    1 264
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 1 264
    Par défaut
    Salut,

    Ton problème est certainement dû à la taille de ton deuxième div censé ce coller qui est légèrement trop grand d'où son retour à la ligne.

    Change la taille de ton div met exprès une valeur bcp plus petit ainsi tu verras s'il se place bien à coté du 1er div.

  6. #6
    Acropole
    Invité(e)
    Par défaut
    ce n'est pas la taille du div, j'ai déjà testé et je viens de retester.
    j'ai changé les css et j'ai fait valider avec :
    validateur du w3c pour cette page

    il y'a une erreur avec la balise marquee, normal, mais il me dit que j'ai pas d'ouverture du head et que le body n'a pas le droit d'être là !

    aprés toutes les corrections le probleme est toujours là.

    EDIT :

    Bon, gros probleme. En fait tout marche correctement si j'enleve le menu en javascript de chez http://deluxe-menu.com
    Dernière modification par Acropole ; 04/04/2008 à 15h20.

Discussions similaires

  1. probleme div float
    Par laxe13 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 19/09/2008, 20h59
  2. probleme de div avec float: left sous FF
    Par Toutouffe dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 14/06/2007, 16h08
  3. Positionnement Div Css float clear
    Par Ashgenesis dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 02/03/2007, 14h19
  4. [JSP]probleme d'insertion float dans une table
    Par karamazov994 dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 14/04/2005, 11h49
  5. Problème hauteur div avec IE
    Par keup dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 25/11/2004, 12h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo