J'ai 1 souci d'affichage d'1 div avec position:fixed
j'ai 1 page qui presente
- a gauche: 1 viewer echiquier en javascript (que j'ai bricolé car j'y connais rien en JS)
- a droite: 1 liste de coups d'echecs (le nbre de coups est dc variable)
Parce que la liste des coups peut etre longue, ma page est scrollable (ok, normal)
Avec ma div en position fixed, je peux defiler la liste des coups et garder l'echiquier tjs visible.
Le souci est que lorsque j'arrive en bas de la liste des coups, j'ai la div de l'echiquier (position: fixed) qui se retrouve + bas que la liste des coups et vient au-dessus de mon pied de page.
Voila le HTML (avec le script JS) puis le CSS
<div id="cadreGauche_test">
Affiche_partie_commentee.php, 2 cadres.
Ici nous devrions voir l'echiquier et la liste de coups
cadreGauche
<a name="g1">
</a>
<!-- iframe de l'echiquier -->
<iframe name="g1" scrolling=no frameborder=0 width=350 height=400 src="rubriques/viewer/ltpgnboard0.php"></iframe>
<script language='JavaScript'>
// gg prend la valeur "g1" en fin de fonction
// tt est la liste de coups issue du fichier txt sans aucun formatage
function OpenGame(gg,tt){
if (window.frames[gg].IsComplete){
if (window.frames[gg].IsComplete()){
window.frames[gg].Init('');
// affiche les coups issus du fichier txt
window.frames[gg].ApplyPgnMoveText(tt,"#CCCCCC",window.document,gg); // L originale
// affiche la liste des coups, applique un format aux coups issus du fichier txt ???
document.getElementById(gg+"text").innerHTML=window.frames[gg].GetHTMLMoveText(0,false,true); // L originale, permet l'affichage ou pas de la liste (formatee ou pas) des coups
return; // LIGNE ORIGINALE
}
}
setTimeout('OpenGame("'+gg+'","'+tt+'")',400);
}
// fonction qui permet d'amener a la position voulue en cliquant directement sur un coup de la liste de coups
function SetMove(mm,vv,gg){
if (window.frames[gg].SetMove){
window.frames[gg].SetMove(mm,vv); // Ligne originale, rend les liens sur les coups cliquables, sans cette L, le clic est inoperant (ms on a le formatage hyperlien)
//lignes persos
//window.frames["g1"].SetMove(mm,vv); // fonctionne, rend les liens sur les coups cliquables
}
}
</script>
<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<?php
// affichage dynamique de la liste des coups, il n'y a pas les TAGS, les guillemets empechent l'affichage de la liste >> A REPARER
// les balises sont prises en compte ds le fichier txt (<br>) >> A REPARER
// les commentaires st pris en compte ds le fichier txt {commentaire} >> A REPARER
// les variantes st prises en compte ds le fichier txt (variante) >> A REPARER
echo "<script language='JavaScript'>OpenGame('g1', '$new_var')</script>";
?>
</div>
<div id="g1text">
</div>
Le CSS:
#entete {
position: static;
background-color: #FFFFFF;
border: 1px solid #666666;
/*
Définit la largeur de l'entete
MAIS AUSSI du pied de page
*/
width: 95%;
height: 100%;
text-align: center;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1%;
padding: 2% 2% 2% 0%;
}
/*----------------------------*/
/* englobe
menu
et
menu_profil
*/
#menu {
background-color: #FFFFFF;
border: 1px solid #666666;
width: 15%;
height: 100%;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1%;
padding: 0% 0% 0% 0%;
text-align: center;
}
/*----------------------------*/
/* menu qui annonce
Etat Session
Date
IP
*/
#menu_profil {
background-color: #FFFFFF;
border: 1px solid #666666;
width: 95%;
height: 100%;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1%;
padding: 0% 0% 0% 0%;
text-align: center;
}
/*----------------------------*/
#menu_liens {
background-color: #FFFFFF;
border: 1px solid #666666;
width: 95%;
height: 100%;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1%;
padding: 0% 0% 0% 0%;
text-align: center;
}
/*----------------------------*/
/* englobe
menu
et
menu_profil
et le texte a droite des 2 precedents
*/
#centre {
background-color: #5d4b31;
border: 1px solid #666666;
width: 95%;
height: 100%;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1%;
padding: 2% 2% 2% 0%;
display: flex;
}
/*----------------------------*/
/*
Le texte a droite des menus
*/
#centretexte {
background-color: #b09b7d;
width: 90%;
height: 100%;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1%;
padding: 0% 0% 0% 0%;
display: inline-block;
}
/*----------------------------*/
/*
ne sert a rien car l'id de la div
pied de page est en fait "entete"
*/
#pied_de_page {
background-color: #FFFFFF;
border: 1px solid #666666;
/*
PAS necessaire,
les proprietes qui st definies ds
l'entete prennent le pas
*/
/*
width: 100%;
height: 100%;
*/
text-align: center;
}
/*----------------------------*/
/*
dans index.php
encadre
l'entete
le menu
le cadre a droite du menu
le pied de page
*/
#container {
position: static;
background-color: #fccc87;
border: 1px solid #666666;
width: 97%;
height: 100%;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1%;
padding: 0% 0% 0% 0%;
display: inline-block;
}
/*----------------------------*/
/* le cadre qui contient le cadre
de l'echiquier et le cadre
de la liste des coups */
#principal {
background-color: #b09b7d;
border: 1px solid #666666;
width: 90%;
height: 100%;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 1%;
padding: 0% 0% 0% 0%;
}
/*----------------------------*/
/*
echiquier
*/
#cadreGauche_test {
position: fixed;
top: 27%;
left: 20%;
bottom: 10%;
background-color: #FFFFFF;
border: 1px solid #666666;
width: 400px;
height: 400px;
}
/*----------------------------*/
/*
cadre qui contient le cadre
de la liste des coups
*/
#cadreDroite_test {
position: relative;
background-color: #FFFFFF;
border: 1px solid #666666;
width: 100%;
height: 100%;
display: right;
}
/*----------------------------*/
/*
cadre de la
liste des coups
*/
#g1text {
/* static: fait passer a l'arriere plan */
/* relative: fait passer a l'avt-plan */
/* fixed: le rend immobile */
/* absolute: */
position: relative;
background-color: #b09b7d;
border: 1px solid #666666;
width: 50%;
height: 100%;
margin-top: 0%;
margin-right: 1%;
margin-left: 45%;
margin-bottom: 1%;
padding: 0% 0% 0% 0%;
display: right;
text-align: center;
/* ne sert a rien */
/*overflow: auto;*/
}
(J'espere que ca va etre lisible.)
Etant donné que je ne connais rien au CSS, je ne sais pas comment regler le probleme, ni quelle solution, propriété adopter.
Pvez vs m'expliquer svp.
Merci, Laurent
div position: fixed mange pied de page
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
