Borderstyle

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Borderstyle

Post by Maz »

Hi guys :D

I'm lost in css, now trying borderstyle and don't get it.

In styles I put: borderstyle="miloborder";

In stylesheet I put:

.miloborder{
border-bottom: 4px solid #c5c5c5;
}

What am I doing wrong?

I haven't even got to ON borderstyle. :oops:

Thanks
maz
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

I think I'm more lost than you are...there's an ON borderstyle? I thought that with the .whatevername you used onclass in the menu_data.js file? But, I don't actually know what I'm doing. :lol:
pat@dracoblu.com
Super Advanced
Super Advanced
Posts: 69
Joined: Sun May 19, 2002 7:23 pm
Contact:

Post by pat@dracoblu.com »

Try breaking out border-bottom as follows:

border-bottom-width: 3px
border-bottom-style: solid
border-bottom-color: #c5c5c5
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

I tried, still nothing, am I doing it wrong?

Thanks
maz
pat@dracoblu.com
Super Advanced
Super Advanced
Posts: 69
Joined: Sun May 19, 2002 7:23 pm
Contact:

Post by pat@dracoblu.com »

It is not obvious to me that you can have a style command called for in the manner you wish. All the style properties appear to be contained within the menu_data.js file, such that borderstyle is specifically for solid, dotted or dashed lines.

I may very well be wrong about this, but perhaps someone else can comment.
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Yes, I can understand that border color on and off would be different.
I'll give it another try.

Would something like this work?

borderstyle="style={border-bottom:4px;border-bottom:solid;}";

A definitive guide on using borderstyle would be nice.

Thanks,
maz
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

By what you have in the first post it seems you want nothing but a bottom border of 4px solid the color you listed but not sure if you want it always on. I've never used style sheets, I always put it in the head of the page. I may be way off what it is you want to do, but here's a link to a page with only a one cell menu showing different style of borders on the menu/submenus using style in the head and onclass/offclass in the menu_data.js file.
http://www.poems2u.com/1/border.htm

Ruth
pat@dracoblu.com
Super Advanced
Super Advanced
Posts: 69
Joined: Sun May 19, 2002 7:23 pm
Contact:

Post by pat@dracoblu.com »

Borderstyle strictly relates to the type of line you desire. For example, the ones I am aware of include: solid, double, dashed, dotted, ridge, groove, inset, and outset. (You can also omit this attribute altogether by leaving things blank.) For example in menu_data.js:

borderstyle="solid"
borderstyle="dashed"
borderstyle="dotted" etc.

I would suggest you ask Andy if the menu_data.js file can be accommodated to add other style attributes like:

border-bottom-style
border-bottom-color
border-bottom-width
border-left-style
border-left-color etc.

Unless I am wrong, at the moment only 3 border style attributes are permitted in the menu_data.js file including borderstyle, bordercolor and borderwidth.
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

This gets me one border-bottom on the main menu but no onborder.
Using borderstyle, offclass, onclass.

Code: Select all


.miloborder{
  border-bottom: 4px;
}
.miloborderoff{
  background: #ffffff;
  border-bottom: solid #c5c5c5;
}
.miloborderon{
  background: #ffffff;
  border-bottom: solid #ff0033;
}


Thanks,
maz
pat@dracoblu.com
Super Advanced
Super Advanced
Posts: 69
Joined: Sun May 19, 2002 7:23 pm
Contact:

Post by pat@dracoblu.com »

Try this

.miloborder{
border-bottom-width: 4px;
}
.miloborderoff{
background: #ffffff;
border-bottom-style: solid;
border-bottom-color: #c5c5c5;
}
.miloborderon{
background: #ffffff;
border-bottom-style: solid;
border-bottom-color: #ff0033;
}
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Still no onclass border.

Thanks
maz
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Maz, I'm getting lost in all the various codes and such, what is it exactly you want to happen or want the menu to do?

Ruth
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

HI,

If you look at -www- below you see 'tools menu' and a horizontal menu on the same line. Because I cannot get 100% line accross the page, the line you see is css underneath the menu (same as footer menu).

Currently I have the bottom border working on both menus, the on border should turn red.

I used to have a background image that looked like a border, but on the old computer it kept repeating the background down the page and probably took longer to load.

I'm still getting the followscroll 'tools menu' repeating on first load, I'm still hoping it clears up eventually.

One of the problems with using border on the main menu, is the subimage, it creates 2 border bottoms, only by using borderstyle do I get one border.

If I put 4px in onclass or offclass, I get a border under the subimage and a border under the 'text & subimage'.

I see Andy mentions something like, borderstyle can use all css values but what's it saying about style.borderstyle, I'm not sure what that means. Perhaps I'm supposed to make the css miloborder.borderstyle{
If I change that somehow what do I do with borderstyle="miloborder.borderstyle"? or 'miloborder' either way its not clear and I don't get it.

Thanks,
maz
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

I downloaded and tried a number of things with the page. It is the image and subimage code that is causing the problem.

I put up a test page using your files but with changes I made. {I only made changes in the main menu, not the tools menuhttp://www.poems2u.com/1/styletest.htm
I think the reason the long border doesn't go all the way across is because I don't have the headers or footers and divs and such on the page.

The only solution I found was to get rid of the image and subimage code and put this into the actual item line

Code: Select all

aI("text=<img src=xarrowdn.gif border=0>&nbsp;&nbsp;About&nbsp;Us;showmenu=aboutus;cursor=arrow;status=submenu about us;");
That means that the arrow won't change when the mouse goes over it, but that's all I could figure out. I even tried the image/overimage but that just gave the same problem you now have.
I had to change the 'pointer=arrow to cursor=arrow because the IE5.0 browser on my pc kept giving me an 'invalid cursor code' error message whenever I put it over the link instead of giving me the submenu. This is what I did to your data file

Code: Select all

with(xptopmain=new mm_style()){
oncolor="#ff0033";
offcolor="#6699ff";
borderstyle="miloborder";
offclass="miloborderoff";
onclass="miloborderon";
padding=3;
fontsize="11px";
fontfamily="tahoma, verdana, sans-serif";
pagecolor="#ff0033";
pagebgcolor="transparent";
menuwidth="100%";
itemheight="24px";
}
 
In your style sheet try changing the code to this

Code: Select all

.miloborder{
  border-bottom-width: 4px;
}
.miloborderoff{ 
  background: #ffffff; 
  border-top:0px;border-right:0px;border-left:0px;border-bottom: 4px solid #c5c5c5; 
   
  		 } 
  .miloborderon{ 
  background: #ffffff; 
  border-bottom: 4px solid #ff0033; 
  		 }  



Ruth
Post Reply