Scrollbar horizontale mais pas verticale dans un div

**patricktoulon** · 18/01/2016, 18h46

bonjour a tous
j'ai créé un editeur wysywig en javascript maintenant je voudrais le rendre plus presentable je lui donne un aspect office2007

donc avec des variables tableaux que j'injecte dans la fonction init je créé des div dans le div principal (jusque la ca va )

je les dimentionne en fonction de chaque variable tableaux representant les boutons (jusque la ca va )

je les met en float left pour qu'il s'alignent (jusque la ca va )
un petit soucis
le div principal est dimentionné a 99% du document (il se redimentionne en fonction de la fenetre )

malheureusement si je reduit les div "toolbar" se placent en dessous ce que je ne veut pas

je voudrais qu'il restent ou ils sont mais que la scroll horizontale du div principal apparaisse et j'avoue que je suis perdu

si quelqu'un vieut bien m'éclairer j'en serais ravi
voici mon code

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
<!doctype html>
<html lang="fr">
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=10" />
                <!-meta charset="UTF-8"-!>
<script>
function init(toolbar){
var  ruban=document.getElementById("ruban");
ruban.style.width="99%";
ruban.style.height="95px";
ruban.style.border="1px solid blue";
ruban.style.display="block";
ruban.style.overflow = "auto";
ruban.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA/oAAABhCAYAAABmr9q8AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4AERAjAjcfA7hwAAAxxJREFUeNrt3TFKHjAYgOFEAgXBgg69/xEcHR0cnNyKlDqWnsBJ5I+nEMLL8xzh217yJZl77z0AAACAhPX4ZggAAACQCf2X13+mAAAAABHz7/93q/sAAAAQsVQ+AAAAhEJ/eIsPAAAAOqF/0fkAAADQCf0h9AEAAKAT+lvpAwAAQCj0dT4AAACEQt8MAAAAoBP6Xt0HAACAUOjLfAAAABD6AAAAwImh79F9AAAACIX+dkcfAAAAQqFvBgAAABAKfaUPAAAAGVdGAAAAAB3u6AMAAEAp9D8+L6YAAAAAldB3ng8AAAAd7ugDAACA0AcAAACEPgAAAPCt1nRJHwAAADqhr/MBAACgw+o+AAAACH0AAADgRGtMQwAAAIBM6Ot8AAAA6LC6DwAAAEIfAAAAOJHVfQAAAEiF/pT6AAAAUGF1HwAAAIQ+AAAAcKI1bO4DAABAJ/R1PgAAAIRC34k+AAAAdLijDwAAAEIfAAAAOJE7+gAAABDiRB8AAACEPgAAAHCiNe3uAwAAQCf0fa8HAAAAHVb3AQAAIGQNR/oAAADQCX2ZDwAAAKHQH17jAwAAgAx39AEAACDE6j4AAACUQt9bfAAAACD0AQAAgAO5ow8AAAAh7ugDAACA0AcAAABOZHUfAAAAhD4AAABwojWn5X0AAACocKIPAAAAIWs40AcAAIBQ6Ct9AAAA6IS+zAcAAIBQ6DvQBwAAgA6P8QEAAECI1X0AAAAohb7H+AAAAKAU+jofAAAAOqE/hT4AAAB0Qt/qPgAAAIRCfzrSBwAAgFLoGwIAAAB0Qt/qPgAAAIRCX+cDAABAJ/SH0gcAAIBO6HuMDwAAAFKhbwgAAAAQCn2lDwAAAJnQH1dCHwAAADKh73s9AAAAKIW+zgcAAIBS6Ct9AAAAyIT+sLoPAAAAndB3og8AAACp0DcEAAAAyIS+zX0AAAAIhb7OBwAAgFDoe4wPAAAAQqG/LoYAAAAAmdD/88MQAAAAIBP6v++fTAEAAAAqoX9798sUAAAAoBL61zc/TQEAAAAqof/w9GwKAAAAEDH33tsYAAAAoOELorE3EVkYy5IAAAAASUVORK5CYIIA')";
  for (var i = 0; i < toolbar.length; i++) 
   {                      
var large=Math.round((toolbar[i].length-1)/2)*30+20;
 
var cmb=document.createElement("div");
   cmb.id="toolbar"+i;
   cmb.style.width=large+"px";
                        cmb.style.height="89px";
                        cmb.style.border="0.5pt solid #A9BCF5";
                        cmb.style.marginLeft = "2px";
                        cmb.style.borderRadius = "5px";
                        cmb.style.cssFloat = "left";
                        cmb.style.top="2px";
                        cmb.style.marginTop = "2px";
 
cmb.style.backgroundImage = "url('data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAABaCAYAAADEvWrIAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4AESDwYBN+HXqwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAEKUlEQVR42u2cu3LbMBBFcTn7//+Sj0idLmU6j1PkMYln4sRj+6YQRQHU4kFqZVPEorAlUaaFw7tPAsL9z38kGdSB8XfmcMu44E/ffWB6gGhCzL5RnsiQY3nTJCyhRoCoHh9h3t19zcNEUK4IOqKNEAJHYWLEoCnzcAzff/+tsmTMTQW8V5YIgTxMGTmYmLyAPDy+XqCvHpQ5aXL8yTOpHR/JC5kyQQZbh2Z+ECbHx3NlMnrf4ZiQTFmyArMnM1fMmoU5C5kGF0J3kBPLSmTbH8zy8xTmmQ+EauvsNHPigjkLG9GfzBxNku/XzJUIlTPz+Np0wHKhmVML4SictDdlLvKZjanR8U1UXtu1z2TxednMM+WOFsPdzKeKc6WZw828PZo3RjWP5rNsMoQgzfkicJ5nYeYRdsY2NlqGnPFiOiZ/nl7yEBqaw0eHjOike6GKIwCcKxPxi4h8JmtNuAZz3mNkj4Uy95nxfI/Hh3N4UJ4h9DmW3bcZgg+z4TANh2CB2EPnxl6FaecxHLabufvMjfrM4E7TbP5SfG9cALBTiEzrbxQ4SamkRmgugHba5UjaEtlg7AHoKj4z6C3glHzn0pyV2FmYAxpQofMIVJ0/lKT9uNpr5ivYq+M8Ltwi9X7ujHUKk5lbvW7lC8rJNhX7qLCQgPxirSm3ogOcHrKWZ6JyDvTd7IDmCdU8E7NXleeEU8ysZ0uOiepwfawPQB5/bHoeAyp/iOC30xqtvK0277XRsdDKRzOHV5MWlaUA9RZcr7EJIb8MWOMk6Rohqpo+W8PZi5mDIxI00ZQzDTKTtbvTrLKQdMmV3ugA3dBPC4Xy0hzLScxQQikn0SnKGRslAkU+8xSBmFFx2s/sJyxR2YgaCrt6JZXubE07oHRKOjJ3RT/F2xZx1yi7C6jUNdqxYOO08SyYI5caVRhwabGK3Qqz3hxu2Qfkwbwxz0QOGupC2/H+gFOsQJvxCQwuXk+pfT0AuZXb1ObpTovZngn23XqP94uWdpMcGQpuqL+2ZkdcaX7WO+wSmOtODnM9rAGzLo+0PZ8k8oXt5K+W+Flda+OPLtXFh5vMVYxowtrMiSteelv5relclYVpbOaXC5MuzMln3o4w7f+X8fkuroA8/iQ+83o+xL4iscVpvbxc0jb8xu2c27ZzuZjlG9r51lfjSbr2cAOftlCFbb3wTZL2LXzY4gXltkOQDMA7GOzKIION+8ynZ75PnrPtLGwdzB8Pz+FWxppvqEFBfdYVn2BruyfNA9DbBTQJwzD9T+2bCGsuB4W7bsXKMAdtGLJMFn++t/T1CEHC6+v6KxWv/qDRlb/V1IjTtxT6MDJzh2AH05VpWU46TTOYjtISJn1fipu5m/neo7lbuWVq5No0g/nl/ptTsKrPfz2+uDStlPlp8HrSDObnDx+dgtH4D5A/ztamX7SmAAAAAElFTkSuQmCCAA==')"
ruban.appendChild(cmb);  
}
 
 
}
 
</script>
<style>
</style>
</head>
<body>
<div id="ruban"></div>
<div id ="editeur" conteneditable="true"></div>
<script>
var toolbar1=["outil Texte","bold","italic","strike","justifyleft","justifycenter","justifyright","justifyfull","forcolor","backcolor"]
var toolbar2=["Insertion","orderedlist","unorderedlist"," marquee","link","unlink","div","smiley"]
var toolbar3=["Outils Application","copy","cut","paste","codehtml","save","appercu","print"]
var toolbar=[toolbar1,toolbar2,toolbar3]
init(toolbar)
</script>
</body>
</html>

**patricktoulon** · 19/01/2016, 18h07

re
personne ne sait alors ???

j'ai essayé en position abosulte pour les div enfant du principal il ne se mettent plus en dessous les un des autres mais je n'ai toujours pas la scroll horizontale

la je suis désespéré je peut pas avancer tant que je n'est pas résolu ce soucis

Scrollbar horizontale mais pas verticale dans un div

JavaScript

Discussions similaires

Partager

Partager