Problems with the alignment

[jhrcfernandes]

Hi.

I'm having some problems trying to align my subnodes to the right.

I have the following menu configured:

var menugeral_nodes = [
['<td align="right" valign="top" width="260"><img src="../../../imgs_site/menuesquerda/menuesq_geral/canto_sup.gif" width="14" height="13"></td>', null, null],
['<img src="../../../imgs_site/menuesquerda/menuesq_geral/feira.gif" name="Image155" width="260" height="16" border="0">', null, null,
['Apresentação', '../../../versao_pt/area_geral/feira/apresentacao.asp', null],
['Dados da Feira', '../../../versao_pt/area_geral/feira/dados_feira.asp', null],
['Sectores em Exposição', '../../../versao_pt/area_geral/feira/sectores_exposicao.asp', null],
['Galeria de Fotos', '../../../versao_pt/area_geral/feira/galeria_fotos.asp', null],
['Quem é Quem', '../../../versao_pt/area_geral/feira/quem_quem.asp', null],
['Sabia que...', '../../../versao_pt/area_geral/feira/sabia_que.asp', null],
//['Historial', '../../../versao_pt/area_geral/feira/historial.asp', null],
['Diário da Feira', '../../../versao_pt/area_geral/feira/diario_feira.asp', null],
],
['<img src="../../../imgs_site/menuesquerda/menuesq_geral/noticias.gif" name="Image156" width="260" height="16" border="0">', null, null,
['Notícias de Feira', '../../../versao_pt/area_geral/noticias/noticias_feira.asp', null],
['Notícias de Sector', '../../../versao_pt/area_geral/noticias/noticias_sector.asp', null],
['Entrevistas', '../../../versao_pt/area_geral/noticias/entrevistas.asp', null],
['Opiniões', '../../../versao_pt/area_geral/noticias/opinioes.asp', null],
],
['<img src="../../../imgs_site/menuesquerda/menuesq_geral/catalogo.gif" name="Image157" width="260" height="16" border="0">', '../../../versao_pt/area_geral/expositores/categorias.asp?lng=pt', null],
['<td align="right" valign="top" width="260"><img src="../../../imgs_site/menuesquerda/menuesq_geral/canto_inf.gif" width="14" height="13" border="0"></td>', null, null],
];

This menu has 3 main nodes that are images and the first 2 have several subnodes. My problem is that I can't align the subnodes to the right. They appear all aligned to the left, in spite of all my efforts to align them to the right. My formatation file is the following:

var menugeral_format =
[
//0. left position
0,
//1. top position
0,
//2. show +/- buttons
false,
//3. couple of button images (collapsed/expanded/blank)
["img/c.gif", "img/e.gif", "img/b.gif"],
//4. size of images (width, height,ident for nodes w/o children)
[0,0,0],
//5. show folder image
false,
//6. folder images (closed/opened/document)
["img/fc.gif", "img/fe.gif", "img/i.gif"],
//7. size of images (width, height)
[0,0],
//8. identation for each level [0/*first level*/, 16/*second*/, 32/*third*/,...]
[0,0,0,0],
//9. tree background color ("" - transparent)
"",
//10. default style for all nodes
"",
//11. styles for each level of menu (default style will be used for undefined levels)
["","texto11pxgeral_menu"],//["clsNodeL0","clsNodeL1","clsNodeL2","clsNodeL3","clsNodeL4"],
//12. true if only one branch can be opened at same time
true,
//13. item pagging and spacing
[0,0],
/************** PRO EXTENSIONS ********************/
//14. draw explorer like tree ( identation will be ignored )
true,
//15. Set of explorer images (folder, openfolder, page, minus, minusbottom, plus, plusbottom, line, join, joinbottom)
[],
//16. Explorer images width/height
[0,0],
//17. if true state will be saved in cookies
false,
//18. if true - relative position will be used. (tree will be opened in place where init() was called)
true,
//19. width and height of initial rectangle for relative positioning
[261,0],
//20. resize background //works only under IE4+, NS6+ for relatiive positioning
false,
//21. support bgcolor changing for selected node
false,
//22. background color for non-selected and selected node
["white","#FFFFFF", "clsNodeSelected"]
];

One of my latest efforts was to create the class texto11pxgeral_menu and apply it to the first level subnodes. The class is in a css file:

.texto11pxgeral_menu {

font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-align: right;
}

Thanks in advance for all the input you can give me.

[AlexKunin]

Please read the following topic: Background colors for nodes. You can add "text-align: right" to CSS code - this will make the trick for you.

[jhrcfernandes]

I tried what you suggested and created 4 classes (all the same) in my cooltree.css and all with text-align: right

.clsNode_0 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;color: #000000;text-align: right;}
.clsNode_1 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;color: #000000;text-align: right;}
.clsNode_2 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;color: #000000;text-align: right;}
.clsNode_3 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;color: #000000;text-align: right;}

Then applied them in the format file

//10. default style for all nodes
"clsNode_0",
//11. styles for each level of menu (default style will be used for undefined levels)
["clsNode_0","clsNode_1","clsNode_2","clsNode_3"],//["clsNodeL0","clsNodeL1","clsNodeL2","clsNodeL3","clsNodeL4"],

Still with no success. Any ideia to what I'm doing wrong?

Thanks.

[AlexKunin]

You havn't read that topic carefully. You CSS classes must be named as following: "cls<Tree Name>_back<Level Number>". And "<Tree Name>" is the name of your tree in the initialization sequence. E.g.:

[jhrcfernandes]

Sorry to be bodering again with this subject, but still no success.

I have now the following initialization in my asp file where the menu goes:

var menugeral = new COOLjsTreePRO("menugeral", menugeral_nodes, menugeral_format);

According to this name I have given to the tree, I created the following classes in my cooltree.css file:

.clsmenugeral_back0 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-align: right;
}
.clsmenugeral_back1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-align: right;
}
.clsmenugeral_back2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-align: right;
}
.clsmenugeral_back3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-align: right;
}

And in the format file I have:

//11. styles for each level of menu (default style will be used for undefined levels)
["clsmenugeral_back0","clsmenugeral_back1","clsmenugeral_back2","clsmenugeral_back3"],

I know that this classes are being recognized, because I changed the font-size, for example, for second level (ie, class clsmenugeral_back1) and it showed in the web site. But for some reason, the text-align instruction is not being followed, since the text options for the subnodes in second level appear all aligned to the left.
Keep in mind that the main nodes are images and all the subnodes are text, just in case this may have something to do with it.

Thank you again for your time.

[AlexKunin]

There is no "width: NNNpx" attribute in your CSS code. It is mandatory in your case, because it will define right margin of the nodes level, and text will be aligned to this margin.

[jhrcfernandes]

Thanks, that did it.

I had to use the atributte width in the class associated with subnodes with an amount of pixels the size of the images I used in the tree main nodes.

[nums]

hello,

does it work with netscape 4.5 ? (in IE, there is no problem for the "text-align: right" but in nn..)

regards

[AlexKunin]

NN4.x does not support CSS well, and you need some other solution. E.g.
you can wrap each node with a table:

[nums]

thx,

It was almost that (The <a></a> was not well placed in the "cooltree.js" and i have to paste the code <table...><tr><td...> in cooltree.js)

but it works now !

bye