Bonjour à toutes et à tous,
Voici un problème d'affichage qui me torture l'esprit depuis trop longtemps :
- Une page PHP génère une page HTML à partir de données MySQL (pas de problème là dessus, c'est juste pour décrire le contexte),
- Pour les besoins d'un traitement en AJAX, je déclare 3 SPAN :
1) act_ajax : Données actuelles,
2) old_ajax : Anciennes données,
3) new_ajax : Nouvelles données ; INPUT (ou TEXTAREA, SELECT, ...) de mise à jour des données, transmises à la BdD en AJAX (pas de problème pour la partie AJAX).
- Au chargement de la page, le SPAN act_ajax est vide. Cette boite est remplie (grâce à innerHTML) par les données de old_ajax dès la fin du chargement et par les données de new_ajax après mise à jour de la BdD par AJAX, .
J'en arrive au problème :
Les SPAN [i]act_ajax se chevauchent et rendent ma page illisible ![/b]
Je pense que c'est un problème de CSS - que je ne maîtrise pas correctement - mais je n'arrive pas à trouver lequel.
Pour une meilleure compréhension, voici le code source :
Quelqu'un peut-il m'aider ? Merci d'avance.
Voici un problème d'affichage qui me torture l'esprit depuis trop longtemps :
- Une page PHP génère une page HTML à partir de données MySQL (pas de problème là dessus, c'est juste pour décrire le contexte),
- Pour les besoins d'un traitement en AJAX, je déclare 3 SPAN :
1) act_ajax : Données actuelles,
2) old_ajax : Anciennes données,
3) new_ajax : Nouvelles données ; INPUT (ou TEXTAREA, SELECT, ...) de mise à jour des données, transmises à la BdD en AJAX (pas de problème pour la partie AJAX).
- Au chargement de la page, le SPAN act_ajax est vide. Cette boite est remplie (grâce à innerHTML) par les données de old_ajax dès la fin du chargement et par les données de new_ajax après mise à jour de la BdD par AJAX, .
J'en arrive au problème :
Les SPAN [i]act_ajax se chevauchent et rendent ma page illisible ![/b]
Je pense que c'est un problème de CSS - que je ne maîtrise pas correctement - mais je n'arrive pas à trouver lequel.
Pour une meilleure compréhension, voici le code source :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Module</title>
<script type="text/javascript">
function ShowDiv(Div) {
document.getElementById('but_' + Div).style.visibility = "hidden";
document.getElementById('act_' + Div).innerHTML = document.getElementById('new_' + Div).innerHTML;
}
function ResetValue(Div) {
document.getElementById('but_' + Div).style.visibility = "visible";
document.getElementById('act_' + Div).innerHTML = document.getElementById('old_' + Div).innerHTML;
}
</script>
<script type="text/javascript" src="./ajax.js"></script>
<style type="text/css">
body {
background-color: navy;
scrollbar-track-color: navy;
scrollbar-arrow-color: navy;
scrollbar-face-color: #3399FF;
scrollbar-3dlight-color: #D1D1D1;
scrollbar-darkshadow-color: #330066;
margin: 0;
font-family: Arial;
z-index: 0;
}
a {
color: #404040;
text-decoration: none;
cursor:url("./image/normal.cur");
}
#logo {
position: relative;
top: 0;
left: 0;
}
#menu {
position: absolute;
top: 10px;
left: 10px;
width: 110px;
height: 680px;
border: 1px solid #808080;
background-color: #3399FF;
color: #FFFF00;
font-size: 10px;
z-index: 1;
}
#menu a {
color: #FEFFBD;
text-decoration: none;
}
#navigation {
position: absolute;
top: 95px;
left: 145px;
z-index: 2;
}
#titre {
position: absolute;
top: 10px;
left: 130px;
width: 840px;
height: 60px;
border: 1px solid #3399FF;
color: #FEFFBD;
font-size: 50px;
font-weight: bold;
text-align: center;
z-index: 1;
}
#calcontent {
position: absolute;
top: 80px;
left: 130px;
width: 840px;
height: 610px;
background-color: #C0C0C0;
z-index: 0;
}
#content {
position: absolute;
top: 80px;
left: 130px;
width: 840px;
background-color: #C0C0C0;
color: navy;
font-size: 12px;
font-weight: bold;
z-index: 1;
}
.but_on {
cursor: hand;
}
.grp_menu {
position: relative;
left: 10px;
width: 90px;
border: 1px solid #FEFFBD;
text-align: center;
}
.ssmenu {
width: 550px;
height: 25px;
border: 1px solid navy;
background-color: #3399FF;
color: #FFFF00;
font-size: 10px;
text-align: center;
}
.ssmenu a {
color: #FEFFBD;
text-decoration: none;
}
.grp_ssmenu {
position: relative;
width: 89px;
border: 1px solid #FEFFBD;
text-align: center;
}
.headline {
width: 550px;
height: 40px;
border: 1px solid navy;
background-color: #FEFFBD;
color: navy;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.intit {
width: 109px;
height: 25px;
border: 1px solid navy;
background-color: #FEFFBD;
color: navy;
font-size: 12px;
font-weight: bold;
text-align: right;
}
.donnee {
width: 419px;
color: navy;
font-size: 16px;
text-align: left;
}
.ajax {
position: relative;
}
.old_ajax {
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
visibility: hidden;
z-index: 1;
}
.act_ajax {
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
visibility: visible;
z-index: 1;
}
.new_ajax {
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
visibility: hidden;
z-index: 2;
}
.but_ajax {
position: relative;
top: 3px;
left:0px;
}
.proc_ajax {
position: absolute;
top: 0px;
left: 0px;
color: black;
overflow: auto;
visibility: hidden;
z-index: 2;
}
.warning {
background-color: #C0C0C0;
color: red;
font-size: 10px;
font-weight: bold;
overflow: auto;
}
.sign {
position: relative;
font-size: 10px;
text-align: right;
}
</style>
</head>
<body onload="focus()">
<div id="calcontent"></div>
<div id="navigation" class="but_on"><img src="./image/but_back_on.png" onClick="history.back()" /></div>
<div id="titre">Module</div>
<div id="menu">
<img src="./image/logo.png" id="logo" /><br />
<br /><div class="grp_menu"><a href="./logout.php">Déconnecter</a></div>
<br /><div class="grp_menu"><a href="./edit_main.php">Principal</a></div>
</div>
<div id="content">
<br />
<table align="center" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3" class="headline">Édition</td>
</tr>
<tr>
<td colspan="3" class="ssmenu">
<span class="grp_ssmenu"> <a href="./historique.php">Historique</a> </span>
</td>
</tr>
<tr valign="top">
<td class="intit">Titre </td>
<td><input id="but_ttr" type="image" src="./image/but_modif.png" onClick="ShowDiv('ttr')" /></td>
<td class="donnee">
<div class="ajax">
<span id="act_ttr" class="act_ajax"></span>
<span id="old_ttr" class="old_ajax">Lorem ipsum</span>
<span id="new_ttr" class="new_ajax">
<input type="text" size=32 id="ttr" value="Lorem ipsum" />
<span class="but_ajax">
<input type="image" src="./image/but_ok.png" onClick="SendData('ttr','text','text','32','o')" />
<input type="image" src="./image/but_xx.png" onClick="ResetValue('ttr')" />
</span>
<span id="warn_ttr" class="warning"></span>
</span>
<span id="proc_ttr" class="proc_ajax"></span>
</div>
</td>
</tr>
<tr valign="top">
<td class="intit">Edito </td>
<td><input id="but_edito" type="image" src="./image/but_modif.png" onClick="ShowDiv('edito')" /></td>
<td class="donnee">
<div class="ajax">
<span id="act_edito" class="act_ajax"></span>
<span id="old_edito" class="old_ajax">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nunc. Mauris quis tellus eget nulla facilisis aliquet. Integer egestas sapien quis est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam varius. Donec libero. Curabitur et lacus ut erat accumsan tincidunt. Fusce imperdiet nisl posuere purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque gravida sem id sapien. Morbi condimentum aliquam metus.</span>
<span id="new_edito" class="new_ajax">
<textarea cols=40 rows=10 id="edito">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nunc. Mauris quis tellus eget nulla facilisis aliquet. Integer egestas sapien quis est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam varius. Donec libero. Curabitur et lacus ut erat accumsan tincidunt. Fusce imperdiet nisl posuere purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque gravida sem id sapien. Morbi condimentum aliquam metus.</textarea>
<span class="but_ajax">
<input type="image" src="./image/but_ok.png" onClick="SendData('edito','textarea','text','2048','n')" />
<input type="image" src="./image/but_xx.png" onClick="ResetValue('edito')" />
</span>
<span id="warn_edito" class="warning"></span>
</span>
<span id="proc_edito" class="proc_ajax"></span>
</div>
</td>
</tr>
<tr valign="top">
<td class="intit">Hier </td>
<td><input id="but_hier" type="image" src="./image/but_modif.png" onClick="ShowDiv('hier')" /></td>
<td class="donnee">
<div class="ajax">
<span id="act_hier" class="act_ajax"></span>
<span id="old_hier" class="old_ajax">Praesent mollis bibendum elit. Integer leo. Vivamus dolor leo, egestas a, rutrum et, lacinia non, mauris. Proin ante magna, tristique vitae, tempus et, tempus non, lacus. Curabitur massa odio, malesuada in, placerat nec, hendrerit et, metus. Donec mollis. Praesent nulla elit, auctor sit amet, posuere eget, suscipit et, sapien. Etiam pretium elit sed felis. In nonummy porta justo. Morbi fringilla tincidunt diam.</span>
<span id="new_hier" class="new_ajax">
<textarea cols=40 rows=10 id="hier">Praesent mollis bibendum elit. Integer leo. Vivamus dolor leo, egestas a, rutrum et, lacinia non, mauris. Proin ante magna, tristique vitae, tempus et, tempus non, lacus. Curabitur massa odio, malesuada in, placerat nec, hendrerit et, metus. Donec mollis. Praesent nulla elit, auctor sit amet, posuere eget, suscipit et, sapien. Etiam pretium elit sed felis. In nonummy porta justo. Morbi fringilla tincidunt diam.</textarea>
<span class="but_ajax">
<input type="image" src="./image/but_ok.png" onClick="SendData('hier','textarea','text','2048','n')" />
<input type="image" src="./image/but_xx.png" onClick="ResetValue('hier')" />
</span>
<span id="warn_hier" class="warning"></span>
</span>
<span id="proc_hier" class="proc_ajax"></span>
</div>
</td>
</tr>
<tr valign="top">
<td class="intit">Aujourd'hui </td>
<td><input id="but_aujourdhui" type="image" src="./image/but_modif.png" onClick="ShowDiv('aujourdhui')" /></td>
<td class="donnee">
<div class="ajax">
<span id="act_aujourdhui" class="act_ajax"></span>
<span id="old_aujourdhui" class="old_ajax">Maecenas adipiscing sodales odio. Duis sapien. Sed varius. Duis cursus magna quis libero. Nam venenatis pretium massa. Praesent varius fermentum odio. Curabitur et turpis. Nam dapibus sapien. Fusce imperdiet commodo diam. Fusce sit amet leo eu nibh imperdiet eleifend. Sed sem lorem, dapibus sit amet, scelerisque vitae, laoreet a, est. In vitae dui. Donec laoreet sem vel pede. Pellentesque risus. Aliquam dictum lorem sed sem. Phasellus mattis, nulla non dapibus ultrices, dolor neque mollis pede, vel fermentum mi libero ac lacus. Vivamus ac diam ac ante adipiscing bibendum.</span>
<span id="new_aujourdhui" class="new_ajax">
<textarea cols=40 rows=10 id="aujourdhui">Maecenas adipiscing sodales odio. Duis sapien. Sed varius. Duis cursus magna quis libero. Nam venenatis pretium massa. Praesent varius fermentum odio. Curabitur et turpis. Nam dapibus sapien. Fusce imperdiet commodo diam. Fusce sit amet leo eu nibh imperdiet eleifend. Sed sem lorem, dapibus sit amet, scelerisque vitae, laoreet a, est. In vitae dui. Donec laoreet sem vel pede. Pellentesque risus. Aliquam dictum lorem sed sem. Phasellus mattis, nulla non dapibus ultrices, dolor neque mollis pede, vel fermentum mi libero ac lacus. Vivamus ac diam ac ante adipiscing bibendum.</textarea>
<span class="but_ajax">
<input type="image" src="./image/but_ok.png" onClick="SendData('aujourdhui','textarea','text','2048','n')" />
<input type="image" src="./image/but_xx.png" onClick="ResetValue('aujourdhui')" />
</span>
<span id="warn_aujourdhui" class="warning"></span>
</span>
<span id="proc_aujourdhui" class="proc_ajax"></span>
</div>
</td>
</tr>
<tr valign="top">
<td class="intit">Demain </td>
<td><input id="but_demain" type="image" src="./image/but_modif.png" onClick="ShowDiv('demain')" /></td>
<td class="donnee">
<div class="ajax">
<span id="act_demain" class="act_ajax"></span>
<span id="old_demain" class="old_ajax">Sed consequat urna vitae sapien. Curabitur condimentum adipiscing felis. Vestibulum lacinia nulla euismod odio. Nulla fermentum lacus quis sapien. Ut fringilla. Nunc ornare, quam ac lobortis commodo, diam nulla scelerisque nulla, eu pulvinar ante ipsum nec diam. Suspendisse tempor tortor quis quam. Fusce arcu. Maecenas id risus et neque pulvinar ultricies. Vivamus gravida vehicula magna. Morbi felis.</span>
<span id="new_demain" class="new_ajax">
<textarea cols=40 rows=10 id="demain">Sed consequat urna vitae sapien. Curabitur condimentum adipiscing felis. Vestibulum lacinia nulla euismod odio. Nulla fermentum lacus quis sapien. Ut fringilla. Nunc ornare, quam ac lobortis commodo, diam nulla scelerisque nulla, eu pulvinar ante ipsum nec diam. Suspendisse tempor tortor quis quam. Fusce arcu. Maecenas id risus et neque pulvinar ultricies. Vivamus gravida vehicula magna. Morbi felis.</textarea>
<span class="but_ajax">
<input type="image" src="./image/but_ok.png" onClick="SendData('demain','textarea','text','2048','n')" />
<input type="image" src="./image/but_xx.png" onClick="ResetValue('demain')" />
</span>
<span id="warn_demain" class="warning"></span>
</span>
<span id="proc_demain" class="proc_ajax"></span>
</div>
</td>
</tr>
<tr>
<td colspan=3 class="headline"> </td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('act_ttr').innerHTML = document.getElementById('old_ttr').innerHTML;
document.getElementById('act_edito').innerHTML = document.getElementById('old_edito').innerHTML;
document.getElementById('act_hier').innerHTML = document.getElementById('old_hier').innerHTML;
document.getElementById('act_aujourdhui').innerHTML = document.getElementById('old_aujourdhui').innerHTML;
document.getElementById('act_demain').innerHTML = document.getElementById('old_demain').innerHTML;
</script>
<br />
<div class="sign">© 2009 NéoDay </div>
</div>
</body>
</html>
Quelqu'un peut-il m'aider ? Merci d'avance.