Tout d'abord, bonjour à vous et merci d'avance a ceux qui voudront bien m'aider.
Je poste dans cette section, car je ne sait pas si le problème posé est du au css ou au code html.
Voici mon problème en images, car cela sera beaucoup plus explicatif que du texte.
Au départ sans problème:
ICI
Je change un Autre pour un mot de plus de 5 lettre, et le menu principal se "coupe en deux":
ICI
Voici mon code (x)HTML:
Et mon CSS:
Modifié par Ekoi (06 Mar 2010 - 20:05)
Je poste dans cette section, car je ne sait pas si le problème posé est du au css ou au code html.
Voici mon problème en images, car cela sera beaucoup plus explicatif que du texte.
Au départ sans problème:
ICI
Je change un Autre pour un mot de plus de 5 lettre, et le menu principal se "coupe en deux":
ICI
Voici mon code (x)HTML:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TPE de l'intelligence artificielle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="gallery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/infobulle.js"></script>
<script type="text/javascript" src="js/sliding.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg.gif);
}
-->
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="1500">
<tbody>
<tr>
<td><img src="images/banniere2.png" height="181" width="1500"></td>
</tr>
<tr>
<td background="images/menuBg.gif">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="1500">
<tr>
<td class="menu">
<div class="menu" align="center"><a href="TPE_index.html">Accueil</a></div>
</td>
<td width="22"><img src="images/menuSeparateur.gif" height="27" width="22"></td>
<td class="menu">
<div class="menu" align="center"><a href="troisieme.html">plus de 5 lettre</a></div>
</td>
<td width="22"><img src="images/menuSeparateur.gif" height="27" width="22"></td>
<td class="menu">
<div class="menu" align="center"><a href="quatrieme.html">Autre</a></div>
</td>
<td width="22"><img src="images/menuSeparateur.gif" height="27" width="22"></td>
<td class="menu">
<div class="menu" align="center"><a href="cinquieme.html">Autre</a></div>
</td>
<td width="22"><img src="images/menuSeparateur.gif" height="27" width="22"></td>
<td class="menu">
<div class="menu" align="center"><a href="sixieme.html">Autre</a></div>
</td>
<td width="22"><img src="images/menuSeparateur.gif" height="27" width="22"></td>
<td class="menu">
<div class="menu" align="center"><a href="septieme.html">Autre</a></div>
</td>
<td width="22"><img src="images/menuSeparateur.gif" height="27" width="22"></td>
<td class="menu">
<div class="menu" align="center"><a href="huitieme.html">Autre</a></div>
</td>
<td width="22"><img src="images/menuSeparateur.gif" height="27" width="22"></td>
<td class="menu">
<div class="menu" align="center"><a href="neuvieme.html">Autre</a></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="13"></td>
</tr>
<tr>
<td><img src="images/topBox.gif" height="21" width="1500"></td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="1350">
<tbody>
<tr>
<td valign="top" width="1000">
<div id="menu">
<div id="menu_categorie"><small> </small>
<div class="dhtmlgoodies_question">
<div id="titre"><small>Systèmes experts (IA)</small></div>
</div>
<small> </small>
<div class="dhtmlgoodies_answer">
<div><small> </small>
<div id="haut"></div>
<small> </small>
<div id="corps"><small> </small>
<ul>
<small> <li><a href="systemeexpert_definition.html">Définition</a></li>
<li><a href="systemeexpert_caracteristique.html" title="">Caractéristiques des SE</a></li>
<li><a href="systemeexpert_conclusion.html" title="">Conclusion</a></li>
<li><a href="systemeexpert_exemple.html" title="">Exemples de système expert</a>
</small>
</ul>
<small> </small></div>
<small> </small>
<div id="bas"></div>
<small> </small></div>
</div>
<small> </small></div>
<small> </small>
<div id="menu_categorie"><small> </small>
<div class="dhtmlgoodies_question">
<div id="titre"><small>La singularité artificielle</small></div>
</div>
<small> </small>
<div class="dhtmlgoodies_answer">
<div><small> </small>
<div id="haut"></div>
<small> </small>
<div id="corps"><small> </small>
<ul>
<small> <li><a href="singularite_artificielle_introduction.html" title="">Introduction</a></li>
<li><a href="singularite_artificielle_Vernorvinge.html" title="">Vernor Vinge</a>
<small><i>(Biographie)</i></small></li>
<li><a href="singularite_artificielle_transistors.html" title="">Transistors</a></li>
<li><a href="singularite_artificielle_loidemoore.html" title="">Loi de Moore</a></li>
<li><a href="singularite_artificielle_limite.html" title="">Les limites des transistors et de la loi de Moore</a></li>
<li><a href="singularite_artificielle_conclusion.html" title="">Conclusion</a></li>
</small>
</ul>
<small> </small></div>
<small> </small>
<div id="bas"></div>
<small> </small></div>
</div>
<small> </small></div>
<small> </small>
<div id="menu_categorie"><small> </small>
<div class="dhtmlgoodies_question">
<div id="titre"><small>Combat ordinateur/cerveau humain</small></div>
</div>
<small> </small>
<div class="dhtmlgoodies_answer">
<div><small> </small>
<div id="haut"></div>
<small> </small>
<div id="corps"><small> </small>
<ul>
<small> <li><a href="combatordinateur_cerveauhumain_test.html" title="">Test de Turing</a>
<li><a title="" href="combatordinateur_cerveauhumain_echec.html">L’échec de l’intelligence artificielle</a>
</small>
</ul>
<small> </small></div>
<small> </small>
<div id="bas"></div>
<small> </small></div>
</div>
<small> </small></div>
<small> </small>
<div id="menu_chat"><small> </small>
<div id="titre"><small>T'ChatBox</small></div>
<small> </small>
<div id="haut"></div>
<small> </small>
<div id="corps"><small><!-- Debut shoutbox - http://www.i-tchat.com -->
<iframe allowtransparency="true" src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=81915" frameborder="0" height="350" width="150"></iframe><!-- Fin shoutbox -->
</small></div>
<small> </small>
<div id="bas"></div>
<td valign="top" width="1000">
<table border="0" cellpadding="0" cellspacing="0" width="1000">
<tbody>
<tr>
<td height="16"><img style="width:1001px; height:16px;" src="images/TexteTop.gif"></td>
</tr>
<tr>
<td background="images/TexteBg.gif" width="1000">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="900">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="900">
<tbody>
<tr>
<td bgcolor="#749bcd" height="21"><span class="titre Style3"> Introduction
</span></td>
</tr>
</tbody>
</table>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="900">
<tbody>
<tr>
<td valign="top" width="900">
<p class="texte">Depuis toujours la
société à connu des stades d'avancées
scientifiques permettant principalement de facilité le quotidien
de chacun. Aujourd'hui les technologies modernes, notamment
l'informatique sont présents tout autour de nous, et participe
au développement de l'intelligence artificielle. </p>
<div class="rmq question"><h1>L'IA peut elle
dépasser l'intelligence humaine ?</h1></div>
<p class="texte">Avant de parler en
détail de l'intelligence artificielle, nous allons vous
expliquer le fonctionnement du cerveau humain.
Pour commencer, voici ses caractéristiques physiques : le
cerveau humain comporte 74,6% d'eau et pèse environ 1300g.
Il faut savoir que le cerveau humain ne fonctionne qu'à 10% de
ses capacités mentales, malgré quelques exceptions (les
scientifiques pensent qu’Einstein était à 13%).</p>
<p class="texte">On peut mesurer cela
grâce à un ensemble de fibres nerveuses, autrement dit les
nerfs. On parle de potentiel global du nerf.
Le cerveau humain agit grâce aux zones moteurs. <br>
Ces zones sont responsables directement ou non des mouvements du corps par l'activation des muscles.
A l'exception des muscles visuelles; tous les muscles du corps sont directement commandés par des neurones moteurs de la <span style="text-decoration: underline; color: rgb(102, 102, 102);">moelle épinière*</span>.</p>
<p class="texte"><span style="text-decoration: underline;">
Moelle épinière*</span>
= La moelle épinière se trouve dans le canal rachidien de
la colonne vertébrale. C'est une prolongation complexe du
cerveau.
Elle fait partie avec l'encéphale du système nerveux
central. </p>
<p class="texte">L'intelligence
artificielle peut être définie comme étant la
recherche de moyen susceptible de doter les systèmes
informatiques de capacités intellectuelles comparables à
celle
des êtres humain.
Le terme d'intelligence artificielle fut crée par John McCarthy
vers les années 1950. Pionnier de l'intelligence artificielle,
c'est lui notamment qui créa le principe d'élagage
Alpha-Beta, qui est un algorithme d'évolution jouant un
rôle majeur dans la programmation d'IA, utilisé par
exemple dans des programmes d'échecs.
Dès lors, des savants voulurent savoir si l'IA pouvait
dépasser l'intelligence humaine.</p>
<p class="texte"> C’est pour cela
qu’en 1950, Alan Turing, mathématicien britannique
créa un test nommé le « test de
Turing » qui fut par la suite publié dans
« computing machinery and intelligence ». Ce test
consiste à mettre en confrontation verbale un humain avec un
ordinateur face à autre humain mit à l’aveugle.
Nous développerons ce point dans la troisième partie de
notre sujet.
Aujourd’hui l’intelligence artificielle suscite de nombreux
débats. En effet, en se fondant sur le constat que la conscience
à un support biologique (et donc matériel), certains
scientifiques ne voient pas d’obstacle de principe à
créer un jour une intelligence consciente sur un support
matériel autre que biologique.
Dans cette dernière partie, nous allons confronter l’homme
à la machine :</p>
<p class="texte">*Confrontation dans le
domaine des opérations logiques :
Un ordinateur typique de 1970 effectuait 107 opérations logique
par seconde, et le cerveau humain grossièrement 2*1014
opérations logique par seconde (= 2*1012 neurones ne pouvant
chacun commuter plus de 100* par seconde)
En 2005, on voit apparaître des ordinateurs se rapprochant
vivement de l’homme avec une puissance brute pouvant traiter 1011
opérations logiques par sec.
C’est à partir de là qu’on a vu
apparaître des AI très performante, Ex :
« Deep blue », qui fut le première
ordinateur à battre un champion du monde en titre. </p>
<p class="texte">* Hall 9000 est un
puissant ordinateur doté d’IA. Il a pour but de
gérer la navette spatial Discovery One, et de faire des
clichés photographiques dans l’espace. </p>
<p class="texte">* Google : bien que
cela ne semble pas évident au premier abord, le moteur de
recherche google utilise bien une forme d’IA. Un robot (au sens
informatique du terme) est utilisé pour naviguer sur internet
selon des critères prédéfinis (nombre de visite,
respect des normes) afin de récupérer des pages qui
seront inscrites dans la base de données de google puis
trié.
Cependant il s’agit là d’une intelligence
artificielle simple car il ne possède qu’un nombre de
tâche limité. </p>
<p class="texte">* Système de
reconnaissance (vocale, de textes, de photo) Le système de
reconnaissance est aussi un bon exemple d’IA. Il est
récent, et en développement constant. Les techniques de
reconnaissance ne cessent d’évoluer. Et on les retrouve
même dans les appareils photo actuel (encadrement des visages sur
écran numérique).</p>
<p class="texte"><br>
Un algorithme est un processus systématique de
résolution, par le calcul, d'un problème permettant de
présenter les étapes vers le résultat à une
autre personne physique (un autre humain) ou virtuelle (un
calculateur). En d'autres termes, un algorithme est un
énoncé d’une suite finie et non-ambiguë
d’opérations permettant de donner la réponse
à un problème. Si ces opérations
s’exécutent en séquence, on parle
d’algorithme séquentiel. Si les opérations
s’exécutent sur plusieurs processeurs en parallèle,
on parle d’algorithme parallèle. Si les tâches
s’exécutent sur un réseau de processeurs on parle
d’algorithme réparti ou distribué. </p>
<br>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="900">
<tbody>
<tr>
<td bgcolor="#749bcd" height="21"><span class="titre Style3"> Information
</span></td>
</tr>
</tbody>
</table>
<p class="texte">Ce site a
été conçu par Pierre Langard le <date>
pour le sujet TPE de l'IA (Intelligence Artificielle)</date></p>
<div class="texte" align="center"><span><br>
</span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="16"><img style="width: 1001px; height: 16px;" src="images/TexteBas.gif"></td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table background="images/basMenuDroitBg.gif" border="0" cellpadding="0" cellspacing="0" width="159">
<tbody>
<tr>
<td height="1"><img src="images/basMenuFoot.gif" height="1" width="159"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><img src="images/footer.gif" height="4" width="1500"></td>
</tr>
</tbody>
</table>
<br />
</body>
</html>
Et mon CSS:
.texte {
font-family: Arial, Helvetica, sans-serif;
font-size: 14;
font-style: normal;
font-weight: normal;
color: #666666;
}
.soustitre {
font-family: Times new roman, Arial, System;
font-size: 15px;
font-style: italic;
font-weight: normal;
color: #FFF000;
border-bottom:1px solid #BBBBBB;
}
h1 {
border-bottom:1px solid #BBBBBB;
font-size:15px;
letter-spacing:1px;
margin:0 3px 3px 0;
color: #acb341;
}
.titre {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: bold;
color: #a6d3e0;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #003366;
text-decoration: underline;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #003366;
text-decoration: underline;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #666666;
text-decoration: none;
}
.menu a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #003366;
font-weight: bold;
text-decoration: none;
}
.menu a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.menu a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666666;
text-decoration: none;
}
.splash a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #91cbfe;
font-weight: bold;
text-decoration: none;
}
.splash a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #91cbfe;
text-decoration: none;
}
.splash a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
BODY {
scrollbar-face-color: #749bcd;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #79a5ea;
scrollbar-darkshadow-color: #79a5ea;
scrollbar-track-color: #747980;
scrollbar-arrow-color: #FFFFFF;
margin-left: 50px;
margin-bottom: 50px;
font-family:Arial, Helvetica, sans-serif;
}
.Box {
background-color:#ffffff;
border: 1px solid #e0e0e0;
}
/* sliding show/hide */
.dhtmlgoodies_question{ /* Styling question */
overflow:hidden;
cursor:pointer;
}
.dhtmlgoodies_answer{ /* Parent box of slide down content */
visibility:hidden;
overflow:hidden;
}
.dhtmlgoodies_answer_content{ /* Content that is slided down */
}
#menu { float:left; width:189px; margin-left:20px; }
#menu a { color:#2e2e2e; text-decoration:none; }
#menu a:hover { text-decoration:underline; }
#menu #haut {
background-image:url(images/menu/haut.png);
background-repeat:no-repeat;
height:11px;
width:183px;
margin-top:0px;
}
#menu #bas {
background-image:url(images/menu/bas.png);
background-repeat:no-repeat;
height:9px;
width:183px;
}
#menu #corps {
background-color:#d4d4d4;
background-repeat:repeat-y;
width:183px;
}
input.valider {
background-image:url(images/valider.png);
background-repeat:no-repeat;
width:74px;
height:18px;
border:none;
color:#FFF;
font-size:11px;
cursor:pointer;
margin-top:5px;
margin-bottom:5px;
}
#menu #menu_categorie a.fluxrss {
width:20px;
height:20px;
display:block;
float:right;
margin-top:-40px;
margin-right:2px;
}
#menu #menu_categorie #titre {
background-image:url(images/menu/categorie.png);
background-repeat:no-repeat;
width:189px;
height:31px;
color:#FFF;
margin-top:10px;
padding-top:10px;
padding-left:5px;
text-align:left;
}
#menu #menu_categorie ul { margin:auto; }
#menu #menu_categorie ul li {
background-image:url(images/menu/separateur.png);
background-position:bottom;
background-repeat:no-repeat;
width:170px;
margin-left:-35px;
padding-top:7px;
padding-bottom:7px;
}
#menu #menu_categorie ul li a {
margin-left:20px;
background-image:url(images/menu/bull.png);
background-repeat:no-repeat;
background-position:left;
width:13px;
height:11px;
margin-left:10px;
padding-left:18px;
}
#menu #menu_sociaux #titre {
background-image:url(images/menu/sociaux.png);
background-repeat:no-repeat;
width:189px;
height:31px;
color:#FFF;
padding-top:10px;
padding-left:5px;
text-align:left;
}
#menu #menu_sociaux ul { margin:auto; }
#menu #menu_sociaux ul li {
background-image:url(images/menu/separateur.png);
background-position:bottom;
background-repeat:no-repeat;
width:170px;
margin-left:-35px;
padding-top:7px;
padding-bottom:7px;
}
#menu #menu_sociaux ul li a.facebook {
margin-left:20px;
background-image:url(images/icones/facebook.png);
background-repeat:no-repeat;
background-position:left;
height:23px;
margin-left:5px;
padding-left:25px;
display:block;
}
#menu #menu_sociaux ul li a.twitter {
margin-left:20px;
background-image:url(images/icones/twitter.png);
background-repeat:no-repeat;
background-position:left;
height:26px;
margin-left:5px;
padding-left:25px;
display:block;
}
#menu #menu_chat #titre {
background-image:url(images/menu/chat.png);
background-repeat:no-repeat;
width:189px;
height:31px;
color:#FFF;
padding-top:10px;
margin-top:10px;
padding-left:5px;
text-align:left;
}
#menu #menu_chat { text-align:center; }
#menu #menu_partenaire { text-align:center; }
#menu #menu_partenaire #titre {
background-image:url(images/menu/partenaire.png);
background-repeat:no-repeat;
width:189px;
height:31px;
color:#FFF;
padding-top:12px;
margin-top:10px;
padding-left:5px;
text-align:left;
}
.infobulle {
position:absolute;
background:#000;
padding:3px 7px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
color:#d4d4d4;
text-align:center;
}
hr {
border-color:#9F9F9F -moz-use-text-color #CCCCCC;
border-style:solid none;
border-width:2px 0 1px;
margin-bottom:20px;
margin-top:20px;
}
html > body .question {
height:auto;
min-height:30px;
}
.question {
height:30px;
text-align:left;
}
.question {
background-image:url(images/question.png);
color:#145AC1;
}
.rmq {
background-position:left center;
background-repeat:no-repeat;
padding:4px 0 4px 50px;
}Modifié par Ekoi (06 Mar 2010 - 20:05)