How to determine the size of a HTML box

[jcaywood]

I've looked and searched for this but can't find it - although I bet there is an answer that is evading me.

I'm using a CSS Master Menu and I have placed the HTML box on each page where I want the menu to appear. How can I figure out the size of the menu so I can size the box on each page the same size as the menu?

I've been putting a text box and publishing and looking at it, and then adjusting it and publishing and looking, and ...
Is there an easier way? A few test pages are at:

http://www.thegoofygiftshop.com/mchc

Thanks

[Marincky]

Re: How to determine the size of a HTML box

Place an html box OVER the area in your master page, match it to the size, cut it and place it on your pages.

[jcaywood]

Re: How to determine the size of a HTML box

Well, my problem is I can't figure out what size to make the HTML box on the master page either. I don't believe the size of the box affects the size of the menu. Or does it? I can make it larger or smaller and the menu seems to stay the same.
By placing a text box with background color, I can get it close after a few publishes. For example I just did that and after publishing 3 times I see my menu is approx 150w and 230h.

I guess I'm just a bit lazy and looking for the easy way.

Thanks

[Collectors-info]

Re: How to determine the size of a HTML box

Hi have a play around with numbers in the highlighted areas of the CSS code to adjust the menu characteristics. The boarders in the main area & hover area should match. All best done one at a time, then save & preview.


<style type="text/css">
#menu a, #menu a:visited {
text-decoration:none;
text-align:center;
font-family:lucinda console;
background-color:#7ED0F2;
color:#ffffff;
display:block;
width:8em;
padding:0.1em;
margin:0.2em auto;
border-right:3px solid #7ED0F2;
border-left:3px solid #7ED0F2;
}
#menu a:hover {
border-right:3px solid #000000;
border-left:3px solid #000000;
color:#000000;
}
</style>

[jcaywood]

Re: How to determine the size of a HTML box

Thanks Chris,
I'm just playing around with the pages now. I didn't want to do much to the menu colors until I figure out what the pages will look like - background colors, etc.
Actually though, I sorta liked the borders changing to a different color when you hover on them. Of course, I do have a good sense of humor and perhaps different tastes...
That is the css code you gave me a year ago for the high school class website. I play around with it a lot trying to figure out what each does. I appreciate the red text above.
Thanks

[Collectors-info]

Re: How to determine the size of a HTML box

Hi, there is a whole load of different menus on this site with very similar layouts to play with. LINK. Good luck.

[jcaywood]

Re: How to determine the size of a HTML box

In determining the size of HTML boxes, Firefox has an addon - Measureit - which allows you to get the dimensions of a CSS menu or anything else on a page. I published my page with CSS menu and can get its size so I can make the boxes on my other pages the correct size.