problème de listes
problème de listes - HTML/CSS - Programmation
Marsh Posté le 21-10-2004 à 19:46:39
| staff04 a écrit : Je ne sais pas si ça vient du js (notamment les new Option) ET/ou des CSS (notamment les float) |
Et bien, tu commences par les tester séparemment et ensuite tu reviens, le cas échéant, avec un problème réduit au minimum, non ?
Ceci dit, ça pue le problème de CSS.
Pourrais-tu essayer de simplifier ton code, un petit morceau à la fois, pour identifier plus précisemment ce qui pose problème ?
---------------
Now Playing: {SYNTAX ERROR AT LINE 1210}
Marsh Posté le 21-10-2004 à 20:10:46
salut,
les deux marchent séparemment...
le code que j'ai donné est deja une version très simplifiée de ma page...
merci.
Marsh Posté le 22-10-2004 à 07:29:55
donne une url ...
---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Sujets relatifs:
- Problème avec la Tabulation
- Problème de Link avec Qt 2.2.2
- probleme avec identifiant de session dans l'URL
- Problème d'apostrophe dans un formulaire
- [postgres/Fonction] Probleme fonction
- Problème de noob ecriture/lecture fichier texte
- Problème en PHP pour contenir des " dans le code
- probleme de L&F en Java
- [ASP] Probleme limite Upload
- Probleme listes deroulantes
Marsh Posté le 21-10-2004 à 19:33:56
bonsoir,
dans le code suivant, quand je sélectionne une valeur de la liste Activité, la liste Rubrique se décale ainsi que le bloc des news.
Ce problème apparait sous IE6, PAS SOUS Mozilla et sous certaines versions de IE 5.x (chez moi, IE5.5->ok, IE5.0->erreur).
Pour info, la 2ième liste est générée de façon dynamique en JavaScript à partir de la valeur de la 1ère.
Je ne sais pas si ça vient du js (notamment les new Option) ET/ou des CSS (notamment les float).
Merci d'avance pour toutes vos idées...
********************************************************
code html + javascript
********************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ma page</title>
<link href="page.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
//Creation d'un tableau a deux dimensions
generationListe = new Array();
generationListe[0] = '';
generationListe[1] = new Array (new Array("1", "Rubrique1" ));
generationListe[2] = new Array (new Array("2", "Rubrique21" ), new Array("9", "Rubrique22" ));
generationListe[3] = new Array (new Array("3", "Rubrique31" ), new Array("4", "Rubrique32" ), new Array("5", "Rubrique33" ), new Array("6", "Rubrique34" ));
generationListe[4] = new Array (new Array("7", "Rubrique41" ), new Array("8", "Rubrique42" ));
//variable globale qui stocke le choix précédent de la liste
var generationChoixA;
//fonction pour generer la liste B
function genererListeB(frm,vListeA) {
var B = frm.ChoixRubrique;
var taille = B.options.length;
var opt;
/*** Suppression des options présentes ***/
for(var i=0; i < taille ; i++) {
B.options[0] = null;
}
/*** Première ligne ***/
if (vListeA == 0)
opt = new Option('Sélectionnez une activité',0,true,true);
else
opt = new Option('Indifférent',0,true,true);
B.options[0] = opt;
/*** Ajout des nouvelles options ***/
for(var i=0; i < generationListe[generationChoixA].length; i++) {
opt = new Option(generationListe[generationChoixA][i][1],generationListe[generationChoixA][i][0]);
B.options[B.options.length] = opt;
}
B.focus();
}
</script>
</head>
<body>
<div id="divConteneur">
<div id="menuGauche"> </div>
<div id="divContenu">
<h1>contenu de la page</h1>
<div id="divNews">
<h1>les dernières news</h1>
</div>
<div id="divRecherche">
<form name="frmCriteres" method="POST" action="">
<div class="row">
<span class="label3">Activité : </span>
<span class="ctrl3">
<select name="ChoixTheme"
onchange="generationChoixA=this.selectedIndex;genererListeB(this.form,this.value)">
<option selected value="0">Indifférent</option>
<option value="1">Activite1</option>
<option value="2">Activite2</option>
<option value="3">Activite3</option>
<option value="4">Activite4</option>
</select>
</span>
</div>
<div class="row">
<span class="label3">Rubrique : </span>
<span class="ctrl3">
<select name="ChoixRubrique">
<option value="0">Sélectionner une activité</option>
</select>
</span>
</div>
<div class="spacer"> </div>
</form>
</div>
</div>
</div>
</body>
</html>
*****************************************************************
et la CSS
*****************************************************************
body {
margin:0;
padding:0;
height:100%;
background-color: black;
}
div#divConteneur {
position:absolute;
width:100%;
height:100%;
background-color: #336699;
}
div#divContenu {
margin:0;
padding:0;
margin-left:20%;
width:100%;
height:100%;
background-color:white;
voice-family:"\"}\"";
voice-family:inherit;
width:80%;
}
div#divContenu h1 {
margin-top:0;
font-weight:bold;
font-size:14pt;
text-align:center;
color:black;
}
div#menuGauche {
position:absolute;
left:0;
width:20%;
font-family:times,helvetica;
}
div#divNews {
float:right;
position:relative;
margin:0 0.5%;
padding:0;
width:22%;
height:200px;
border:1pt solid black;
background-color:#FF9900;
background-image:url("" );
voice-family:"\"}\"";
voice-family:inherit;
width:20%;
}
html>body div#divNews {width:20%;}
div#divNews h1 {
margin-top:0;
height:20px;
font-size:10pt;
font-weight:bold;
text-align:center;
color:blue;
}
div#divRecherche {
background-color:#66CCFF;
margin:0%;
padding:5px 2% 30px 2%;
width:100%;
height:400px;
voice-family:"\"}\"";
voice-family:inherit;
width:73%;
}
html>body div#divRecherche {width:73%;}
div.row {
margin:0;
padding:0;
width:100%;
clear:both;
padding-top:5px;
}
.spacer {
clear:both ;
}
div.row span.label3 {
float:left;
text-align:right;
}
div.row span.ctrl3 {
float:right;
text-align:left;
}
div.row span.label3 { width:25%; }
div.row span.ctrl3 {
width:74% ;
voice-family:"\"}\"";
voice-family:inherit; /* sous ie 5.x: baisser de 1% sinon sur 2 lignes */
width:75% ;
}
html>body div.row span.ctrl3 { width:75%; }
div.row span.ctrl3 select { width:75%; }