View Full Version : How to determine the size of a HTML box

01-29-2009, 01:29 AM
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:



01-29-2009, 01:33 AM
Place an html box OVER the area in your master page, match it to the size, cut it and place it on your pages.

01-29-2009, 02:40 AM
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.


01-29-2009, 08:49 AM
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 {
font-family:lucinda console;
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;

01-29-2009, 10:39 AM
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.

01-29-2009, 11:32 AM
Hi, there is a whole load of different menus on this site with very similar layouts to play with. LINK (http://www.cssplay.co.uk/menus/). Good luck.

02-09-2009, 01:12 PM
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.