Hey,
Having given the best solution to what is impossible via CSS comes Tim
with an impressive (off-list) javascript solution!
Mad props Tim!
This list has been here from day one (4yrs for me) and I am a self-
taught webmaster (lol) bordering on having a decent career. It's only
cos of peeps like you (mad props open source) that we can get on with
things, independent of upbringing and/or opportunity. I am definitely
going to give back whenever I can.
CSS-discuss up for Presidency.
Respect to you all, especially TIM!
(solved)
Thanks, CB :-D
On 16/09/2010, at 4:39 AM, Climis, Tim wrote:
-----Original Message-----
From: Chris Blake [mailto:ch...@3pointdesign.com]
Sent: Wednesday, September 15, 2010 3:41 PM
To: Climis, Tim
Subject: Re: [css-d] Can i vertically centre a UL?
change the selector from ".level3" to "#menu ul.level3", and I think
you'll be good.
---Tim
That's great, thanks! I was wondering if there was any chance that it
could always stay in the middle whether it had one link or six?
Only with javascript.
Keep the same CSS as you currently have, but add this to a function
that gets called in the body onload.
level3s =
document.getElementByID("menu").getElementsByClassName("level3");
for (var i=0; i<level3s.length; i++)
if(level3s[i].tagName = "UL")
level3s[i].style.marginTop = level3s[i].offsetHeight/-2 + "px";
Just a note, getElementsByClassName is a newish function in
javascript, and I don't recall what browser support it has. But if
you use a frame work, there's probably a reliable way to get a list
of elements to loop through.
jQuery, for example (I believe, as I haven't used it) would be
something like
level3s = $("#menu ul.level3");
and then the same from there. (that method would let you get rid of
the if check for the UL tag.)
This works because the menus are displayed, but hidden way off to
the left side of the screen. If they were hidden with display:
none, you'd have to set them as visible first, then get the height,
and then make it disappear again.
---Tim
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
