Re: [css-d] Can i vertically centre a UL?
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; ilevel3s.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/
Re: [css-d] Can i vertically centre a UL?
On 9/14/10 5:09 PM, Thierry Koblentz wrote: whizz-bang-blammo align centered vertically. Brilliant!!! But sadly not. If there is no height set for your DIV, then line-height should be enough If there is a height then the line-height must match that value I'm a bit late and maybe wet behind the ears, but would making the container display: table; and the UL display: table-cell; work? Perhaps with a spot of JavaScript to turn them into an HTML table for poor old IE 7 and older? You may need to add vertical-align: middle; as well... Cordially, David -- __ 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/
Re: [css-d] Can i vertically centre a UL?
I'm a bit late and maybe wet behind the ears, but would making the container display: table; and the UL display: table-cell; work? Perhaps with a spot of JavaScript to turn them into an HTML table for poor old IE 7 and older? I think there'd have to be a third element in there to set as display: table-row. ---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/
Re: [css-d] Can i vertically centre a UL?
CB, attaching a .html for ya; do tell if this is what was desired or not Regards, Gaurav On Tue, Sep 14, 2010 at 4:42 PM, Chris Blake ch...@3pointdesign.com wrote: Hi, I have a unordered list sitting in a div. I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? Cheers, CB *the lists been kinda quiet recently __ 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/ __ 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/
Re: [css-d] Can i vertically centre a UL?
Climis, Tim wrote: I'm a bit late and maybe wet behind the ears, but would making the container display: table; and the UL display: table-cell; work? Perhaps with a spot of JavaScript to turn them into an HTML table for poor old IE 7 and older? I think there'd have to be a third element in there to set as display: table-row. ---Tim Not quite true. If display: table-row is not given then, an anonymous table-row is generated [1]. | If the parent P of a 'table-cell' box T is not a 'table-row', | a box corresponding to a 'table-row' will be generated between P | and T. This box will span all consecutive 'table-cell' sibling | boxes of T. 1. http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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/
Re: [css-d] Can i vertically centre a UL?
HI, I have got over my fear of sending a ink to the site so you can see that it's level 3, from the websites drop down that could be improved by centering vertically. http://blakeys.com/ Thanks, CB On 15/09/2010, at 10:58 PM, Gaurav Saxena wrote: CB, attaching a .html for ya; do tell if this is what was desired or not Regards, Gaurav On Tue, Sep 14, 2010 at 4:42 PM, Chris Blake ch...@3pointdesign.com wrote: Hi, I have a unordered list sitting in a div. I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? Cheers, CB *the lists been kinda quiet recently __ 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/ __ 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/ __ 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/
Re: [css-d] Can i vertically centre a UL?
I have got over my fear of sending a ink to the site so you can see that
it's level 3, from the websites drop down that could be improved by
centering vertically.
http://blakeys.com/
/* this is the box that actually lays out the interior of level 2. It was hard
to find through all the extra stuff. */
.group-box2 {
overflow: hidden; /* this makes the div have the height of the internal box
(all the contents are floated, so it has no height by default. */
position: relative; /* this makes it the parent for the level3 absolute
positioning */
}
.level3 {
position: absolute; /* position relative to group-box2 */
top: 50%; /* top goes in the middle of the group-box2 */
margin-top: -2.8em; /* since the ul is 4 lines of text, this is half the
height of the ul (assuming no vertical margins or padding, and a default
line-height of 1.2em) */
width: 41%; /* makes the highlight go to the edge of the box -- needs some
tweaking */
}
Also, it looks like you have a whole lot of really useless divs in here. I
don't see the point of groupboxes 3, 4, or 5, or hoverboxes 2, 3, or 4. And
this solution makes div.sub useless as well.
---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/
Re: [css-d] Can i vertically centre a UL?
On 16/09/2010, at 1:38 AM, Climis, Tim wrote:
I have got over my fear of sending a ink to the site so you can see
that
it's level 3, from the websites drop down that could be improved by
centering vertically.
http://blakeys.com/
/* this is the box that actually lays out the interior of level 2.
It was hard to find through all the extra stuff. */
.group-box2 {
overflow: hidden; /* this makes the div have the height of the
internal box (all the contents are floated, so it has no height by
default. */
position: relative; /* this makes it the parent for the level3
absolute positioning */
}
.level3 {
position: absolute; /* position relative to group-box2 */
top: 50%; /* top goes in the middle of the group-box2 */
margin-top: -2.8em; /* since the ul is 4 lines of text, this is
half the height of the ul (assuming no vertical margins or padding,
and a default line-height of 1.2em) */
width: 41%; /* makes the highlight go to the edge of the box --
needs some tweaking */
}
Also, it looks like you have a whole lot of really useless divs in
here. I don't see the point of groupboxes 3, 4, or 5, or hoverboxes
2, 3, or 4. And this solution makes div.sub useless as well.
---Tim
Hi Tim,
yeh it's from a template that i have ripped apart in both CSS and
template.php. I've tried to strip it but some of the includes are just
appearing form thin air. I was ging to create it as I want ti and then
ask the developers how much to strip it of all the unneeded scripts.
It is however built on an unbelievable frame work - i just wish the
designs weren't so bloggy and fluffed up.
I'll give this code a try now and let you know. Cheers!
CB
__
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/
Re: [css-d] Can i vertically centre a UL?
Hi Alan, poor old IE 7 and older? I think there'd have to be a third element in there to set as display: table-row. ---Tim Not quite true. If display: table-row is not given then, an anonymous table-row is generated [1]. | If the parent P of a 'table-cell' box T is not a 'table-row', | a box corresponding to a 'table-row' will be generated between P | and T. This box will span all consecutive 'table-cell' sibling | boxes of T. I'd agree with Tim, it is better to have an element to create an explicit row as the implicit row is not enough to prevent some browsers from dropping the last item (cell). I ran into this issue before. If you check the archives you should find a few posts where I discuss this with Ingo (or was it Philippe?). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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/
Re: [css-d] Can i vertically centre a UL?
On Sep 16, 2010, at 1:38 PM, Thierry Koblentz wrote: I think there'd have to be a third element in there to set as display: table-row. ---Tim Not quite true. If display: table-row is not given then, an anonymous table-row is generated [1]. | If the parent P of a 'table-cell' box T is not a 'table-row', | a box corresponding to a 'table-row' will be generated between P | and T. This box will span all consecutive 'table-cell' sibling | boxes of T. I'd agree with Tim, it is better to have an element to create an explicit row as the implicit row is not enough to prevent some browsers from dropping the last item (cell). I ran into this issue before. If you check the archives you should find a few posts where I discuss this with Ingo (or was it Philippe?). (older) Gecko (1.9.1 and older) are especially affected by that 'drop'. I _think_ I've seen something similar happening with IE 8, if my memory isn't failing completely. But yeah, explicitly setting an element to display:table-row usually solves it (and was the recommended method in some gecko bugzilla entry). The display: table element will then be automatically generated (if you don't set it). Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ 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/
[css-d] Can i vertically centre a UL?
Hi, I have a unordered list sitting in a div. I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? Cheers, CB *the lists been kinda quiet recently __ 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/
Re: [css-d] Can i vertically centre a UL?
I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? As far as I know, not with anything with a dynamic height. You can do it with javascript, but that's off-topic for the list. And you can do it with CSS if the height is fixed. But I think that's it. *the lists been kinda quiet recently Maybe we've done our job and everyone knows everything about CSS... ;) ---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/
Re: [css-d] Can i vertically centre a UL?
On Tue, Sep 14, 2010 at 1:47 PM, Climis, Tim tcli...@indiana.edu wrote: I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? As far as I know, not with anything with a dynamic height. You can do it with javascript, but that's off-topic for the list. And you can do it with CSS if the height is fixed. But I think that's it. ---Tim Could you give a pointer on how to do this given fixed height ul? The only method I know of requires that both the containing element and the ul have fixed height. If there is a way to do this with dynamic containing element and fixed height ul that would be great. Regards, Claude __ 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/
Re: [css-d] Can i vertically centre a UL?
I have a unordered list sitting in a div. I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? If you can set height/line-height on the parent, then you can try this: For the DIV: height: 4em; line-height: 4em; text-align:center; For the LIs: display:inline; Whatever height you use make sure line-height as the same value -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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/
Re: [css-d] Can i vertically centre a UL?
-- From: Climis, Tim tcli...@indiana.edu Sent: Tuesday, September 14, 2010 9 Maybe we've done our job and everyone knows everything about CSS... ;) Or the papa has driven out everybody from these NGs. __ 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/
Re: [css-d] Can i vertically centre a UL?
-Original Message-
From: Claude Needham [mailto:gxx...@gmail.com]
Sent: Tuesday, September 14, 2010 5:04 PM
To: Climis, Tim
Cc: Chris Blake; css discuss discuss
Subject: Re: [css-d] Can i vertically centre a UL?
On Tue, Sep 14, 2010 at 1:47 PM, Climis, Tim tcli...@indiana.edu
wrote:
I'd like it to sit right in the middle both vertically and
horizontally without using padding or anything like that because it's
dynamically fed.
is there such a way using CSS?
As far as I know, not with anything with a dynamic height. You can do
it with javascript, but that's off-topic for the list. And you can do it with
CSS if the height is fixed. But I think that's it.
---Tim
Could you give a pointer on how to do this given fixed height ul?
The only method I know of requires that both the containing element
and the ul have fixed height. If there is a way to do this with dynamic
containing element and fixed height ul that would be great.
Maybe I'm too tired.
Given:
divul/ul/div
I think
div {position: relative};
ul {
position: absolute;
top: 50%;
height: 5em;
margin-top: -2.5em;
}
does it. Or does the div need a height too? Okay, in this case it would,
since there's nothing *in* the div, but in a similar case, where the div has
other contents to give it an implicit height.
---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/
Re: [css-d] Can i vertically centre a UL?
Given:
divul/ul/div
I think
div {position: relative};
ul {
position: absolute;
top: 50%;
height: 5em;
margin-top: -2.5em;
}
does it. Or does the div need a height too? Okay, in this case it
would, since there's nothing *in* the div, but in a similar case,
where the div has other contents to give it an implicit height.
---Tim
OK it makes perfect sense, but I couldn't get it to work. I forgot to
mention that my div is actually floating left - could this be the
cause of unordered chaos?
Answers on a postcard to...
Thanks, CB
__
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/
Re: [css-d] Can i vertically centre a UL?
Do you have the site live? On Tue, Sep 14, 2010 at 23:42, Chris Blake ch...@3pointdesign.com wrote: Hi, I have a unordered list sitting in a div. I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? Cheers, CB *the lists been kinda quiet recently __ 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/ __ 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/
Re: [css-d] Can i vertically centre a UL?
On 15/09/2010, at 6:30 AM, Boray ERIS wrote: Do you have the site live? Kind of, it's a CMS website that I am developing but I'm sort of hiding it from the world until the right time. Sorry, I know I should post a link. __ 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/
Re: [css-d] Can i vertically centre a UL?
This would be the best way to go. Presumably you can assign a height to the parent div, even if it is auto. By setting the height and line-height to a value your text will whizz-bang-blammo align centered vertically. On Tue, Sep 14, 2010 at 2:07 PM, Thierry Koblentz n...@tjkdesign.com wrote: If you can set height/line-height on the parent, then you can try this: For the DIV: height: 4em; line-height: 4em; text-align:center; For the LIs: display:inline; Whatever height you use make sure line-height as the same value __ 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/
Re: [css-d] Can i vertically centre a UL?
whizz-bang-blammo align centered vertically. Brilliant!!! But sadly not. If you, or anyone is till interested in helping in the next 30-45 mins then reply to me (don't click 'reply all') and I will put the site live and send you the link. Be warned this CMS template creates a whole load or wrappers so you'll have to expand about 100 divs before getting to the culprits. It is however one sexy menu that works even with javascript turned off. Whizz bang blammo, Chris __ 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/
Re: [css-d] Can i vertically centre a UL?
whizz-bang-blammo align centered vertically. Brilliant!!! But sadly not. If there is no height set for your DIV, then line-height should be enough If there is a height then the line-height must match that value -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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/
Re: [css-d] Can i vertically centre a UL?
On 9/14/10 7:55 PM, Chris Blake wrote: Be warned this CMS template creates a whole load or wrappers so you'll have to expand about 100 divs before getting to the culprits. It is however one sexy menu that works even with javascript turned off. Drink a warm cup of milk, maybe with some honey added in. Whizz bang blammo, Chris Best, ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ 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/
