5 replies [Last post]
rainjam
Offline
Regular
London, UK
Last seen: 15 years 45 weeks ago
London, UK
Joined: 2006-05-22
Posts: 11
Points: 0

I think the answer to this is probably going to be "No", but just in case: is it possible to determine the width of an element that hasn't had its width explicitly declared? I'm trying to make a menu system where the titles, and the contents of each menu, are drawn from an xml file. The titles are plonked into divs, and then I'm trying to line the menus up underneath each div. The only way I can think of doing it reliably, without using images instead of text for the titles, is by giving each title div a fixed width, but this looks crap (and isn't reliable anyway, because at some point there might be a title which would be longer than the space allows). Is there a way of returning how wide each title div is, so I can find out exactly where to put each menu?

Cheers

Nick

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

[Solved] Finding out how wide something is

I think there is, using the DOM. I think that sifr uses a method to generate the text header, calculate the width and height, then generate an swf file. So it must be possible.

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 19 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[Solved] Finding out how wide something is

You can by using javascript to query DOM properties. You have to be careful, because to do this properly you need to be able to spot user changes in font-size or anything else that means the width will change.

But ...

If you place the related menu items adjacent to the heading in the html and wrap them all in a common element. Then they will automatically line up according to the text-align you choose.

rainjam
Offline
Regular
London, UK
Last seen: 15 years 45 weeks ago
London, UK
Joined: 2006-05-22
Posts: 11
Points: 0

Aha...

... so, something like:

<div style="position:relative;">
<div id="title">Menu title</div>
<div style="position:absolute; top:8px; left:0px;"><!-- or whatever-->
Menu item 1
Menu item 2
etc
</div>
</div>

would that work?

the main content div is centred on the page so I can't position the menus absolutely unless they're in a relatively positioned div... i think. Presumably they'll have to have absolute positioning though, so they don't take up space on the page?

thanks for the help - i'll see if i can get it working and then put it up here in case it helps anybody Smile

N

rainjam
Offline
Regular
London, UK
Last seen: 15 years 45 weeks ago
London, UK
Joined: 2006-05-22
Posts: 11
Points: 0

Hurrah!

It works, exactly like Chris..S said.

Relatively positioned div containing the title and the menu (with absolute positioning) - menu lines up like it should.

Yay Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

[Solved] Finding out how wide something is

Good stuff, glad you got it sorted Wink

Verschwindende wrote:
  • CSS doesn't make pies