Re: [WSG] Centering all items in a li
I think semantically I would have gone for divs in the first place as it's not really a list perse... On Mon, May 19, 2008 at 12:04 AM, Darren Lovelock [EMAIL PROTECTED] wrote: Here's a example of what I'm doing http://www.munkyonline.co.uk/test.html I want the li's to behave the same as table cells set with valign:middle. I've had to float the li's left instead of displaying them inline otherwise they stack on top of each other in a mess! I suppose looking at it I could have used divs instead of a list but either way, I think it will still behave the same. Cheers, Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rahul Gonsalves Sent: 18 May 2008 13:46 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li Darren, On 17-May-08, at 8:09 PM, Darren Lovelock wrote: I've been trying to find a solution that will allow me to vertically center all the items in a li. The big problems i've got are that the li's are a non-fixed height and are floating to the left. A link to a stripped down test would be helpful. However, if you can't post a link, perhaps one of the links below will be helpful to you? Best, - Rahul. [1] http://www.brunildo.org/test/ [2] http://www.brunildo.org/test/vertmiddle.html [3] http://www.brunildo.org/test/valimid2.html [4] http://www.brunildo.org/test/va_lineheight.html *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Centering all items in a li
Hi Darren, First of all, I will have to agree with Matijs that it is probably not the best place to use li. Second, I was actually doing some research on these type of problems the other day, and I founded this: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html However, I did not get a chance to try it myself yet, but maybe this can give you some idea on where to start. ~Calvin On Mon, May 19, 2008 at 12:01 AM, Matijs [EMAIL PROTECTED] wrote: I think semantically I would have gone for divs in the first place as it's not really a list perse... On Mon, May 19, 2008 at 12:04 AM, Darren Lovelock [EMAIL PROTECTED] wrote: Here's a example of what I'm doing http://www.munkyonline.co.uk/test.html I want the li's to behave the same as table cells set with valign:middle. I've had to float the li's left instead of displaying them inline otherwise they stack on top of each other in a mess! I suppose looking at it I could have used divs instead of a list but either way, I think it will still behave the same. Cheers, Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rahul Gonsalves Sent: 18 May 2008 13:46 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li Darren, On 17-May-08, at 8:09 PM, Darren Lovelock wrote: I've been trying to find a solution that will allow me to vertically center all the items in a li. The big problems i've got are that the li's are a non-fixed height and are floating to the left. A link to a stripped down test would be helpful. However, if you can't post a link, perhaps one of the links below will be helpful to you? Best, - Rahul. [1] http://www.brunildo.org/test/ [2] http://www.brunildo.org/test/vertmiddle.html [3] http://www.brunildo.org/test/valimid2.html [4] http://www.brunildo.org/test/va_lineheight.html *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Calvin Chan Web Application Engineer [EMAIL PROTECTED] Office: 1.650.340.0044 Mobile: 1.510.508.8250 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Centering all items in a li
Hey Calvin,
I've kind of fixed it using divs now.
#container { display: table-row; padding: 0; margin: 0; width: 100%; }
#container div { display: table-cell; vertical-align: middle; }
div id=container
div id=left
content
/div
div id=right
content
/div
/div
This works perfectly in all standard compliant browsers (FF, Safari and
Opera) but not Internet Explorer 6 or 7. It will work in IE 8 though
apparently.
Because 67 dont support the display: table; styles. I fixed this by adding
float: left to separate stylesheets for the IE's using conditional
statements.
This way IE has the elements vertically aligned to the top of their
containing div instead of in the middle like on the compliant browsers
(serves them right for using IE lol).
Cheers,
Darren
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Calvin Chan
Sent: 19 May 2008 19:47
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Centering all items in a li
Hi Darren,
First of all, I will have to agree with Matijs that it is probably not the
best place to use li.
Second, I was actually doing some research on these type of problems the
other day, and I founded this:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
However, I did not get a chance to try it myself yet, but maybe this can
give you some idea on where to start.
~Calvin
On Mon, May 19, 2008 at 12:01 AM, Matijs [EMAIL PROTECTED] wrote:
I think semantically I would have gone for divs in the first place as it's
not really a list perse...
On Mon, May 19, 2008 at 12:04 AM, Darren Lovelock [EMAIL PROTECTED]
wrote:
Here's a example of what I'm doing http://www.munkyonline.co.uk/test.html
I want the li's to behave the same as table cells set with valign:middle.
I've had to float the li's left instead of displaying them inline otherwise
they stack on top of each other in a mess!
I suppose looking at it I could have used divs instead of a list but either
way, I think it will still behave the same.
Cheers,
Darren
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Rahul Gonsalves
Sent: 18 May 2008 13:46
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Centering all items in a li
Darren,
On 17-May-08, at 8:09 PM, Darren Lovelock wrote:
I've been trying to find a solution that will allow me to vertically
center all the items in a li. The big problems i've got are that the
li's are a non-fixed height and are floating to the left.
A link to a stripped down test would be helpful.
However, if you can't post a link, perhaps one of the links below will be
helpful to you?
Best,
- Rahul.
[1] http://www.brunildo.org/test/
[2] http://www.brunildo.org/test/vertmiddle.html
[3] http://www.brunildo.org/test/valimid2.html
[4] http://www.brunildo.org/test/va_lineheight.html
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Calvin Chan
Web Application Engineer
[EMAIL PROTECTED]
Office: 1.650.340.0044
Mobile: 1.510.508.8250
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Centering all items in a li
Неужели никто не знает про славного Стью Николса? anybody knows Stuart Nicholls? He found decision long time ago!! http://www.cssplay.co.uk/ie/valign.html Darren Lovelock пишет: Hi list, I've been trying to find a solution that will allow me to vertically center all the items in a li. The big problems i've got are that the li's are a non-fixed height and are floating to the left. So that kills the negative positioning http://www.jakpsatweb.cz/css/css-vertical-center-solution.html method and the table-cell http://www.w3.org/Style/Examples/007/center#vertical methods that I've found whilst scouring the web. Does anyone know a method that I can use that doesn't involve using tables? Any help will be greatly appreciated! Regards, Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk http://www.munkyonline.co.uk/ T: +44 (0)20-8816-8893 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***begin:vcard fn;quoted-printable:=D0=A1=D0=B5=D1=80=D0=B3=D0=B5=D0=B9 =D0=9A=D0=B8=D1=80=D0=B8=D1=87=D0=B5= =D0=BD=D0=BA=D0=BE n;quoted-printable;quoted-printable:=D0=9A=D0=B8=D1=80=D0=B8=D1=87=D0=B5=D0=BD=D0=BA=D0=BE;=D0=A1=D0=B5=D1=80=D0=B3=D0=B5=D0=B9 email;internet:[EMAIL PROTECTED] tel;cell:+79043334625 version:2.1 end:vcard
RE: [WSG] Centering all items in a li
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Darren Lovelock
Sent: Monday, May 19, 2008 12:20 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Centering all items in a li
I've kind of fixed it using divs now.
#container { display: table-row; padding: 0; margin: 0; width: 100%; }
#container div { display: table-cell; vertical-align: middle; }
Hi Darren,
You could have it working keeping the List Items:
http://www.tjkdesign.com/articles/thumbnail_and_caption/inline-block_table-c
ell_and_zoom.asp
--
Regards,
Thierry | http://www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Centering all items in a li
I seem to remember someone in a previous thread, about similar problem, suggested using, display: table-cell; vertical-align: middle; On Sat, May 17, 2008 3:39 pm, Darren Lovelock wrote: Hi list, I've been trying to find a solution that will allow me to vertically center all the items in a li. The big problems i've got are that the li's are a non-fixed height and are floating to the left. So that kills the negative http://www.jakpsatweb.cz/css/css-vertical-center-solution.html positioning method and the table-cell http://www.w3.org/Style/Examples/007/center#vertical methods that I've found whilst scouring the web. Does anyone know a method that I can use that doesn't involve using tables? Any help will be greatly appreciated! Regards, Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk http://www.munkyonline.co.uk/ T: +44 (0)20-8816-8893 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Centering all items in a li
Thanks, but as I said, that doesn't work in this case because the li is floating. Also I think it is dependant on the the li having a set height value which I cant do either. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stuart Foulstone Sent: 18 May 2008 10:01 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li I seem to remember someone in a previous thread, about similar problem, suggested using, display: table-cell; vertical-align: middle; On Sat, May 17, 2008 3:39 pm, Darren Lovelock wrote: Hi list, I've been trying to find a solution that will allow me to vertically center all the items in a li. The big problems i've got are that the li's are a non-fixed height and are floating to the left. So that kills the negative http://www.jakpsatweb.cz/css/css-vertical-center-solution.html positioning method and the table-cell http://www.w3.org/Style/Examples/007/center#vertical methods that I've found whilst scouring the web. Does anyone know a method that I can use that doesn't involve using tables? Any help will be greatly appreciated! Regards, Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk http://www.munkyonline.co.uk/ T: +44 (0)20-8816-8893 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Centering all items in a li
Shouldn't have to set a height, the line will wrap automatically (unless you specify not to). Thanks, but as I said, that doesn't work in this case because the li is floating. Do the li's have to float? On Sun, May 18, 2008 at 8:49 PM, Darren Lovelock [EMAIL PROTECTED] wrote: Thanks, but as I said, that doesn't work in this case because the li is floating. Also I think it is dependant on the the li having a set height value which I cant do either. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stuart Foulstone Sent: 18 May 2008 10:01 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li I seem to remember someone in a previous thread, about similar problem, suggested using, display: table-cell; vertical-align: middle; On Sat, May 17, 2008 3:39 pm, Darren Lovelock wrote: Hi list, I've been trying to find a solution that will allow me to vertically center all the items in a li. The big problems i've got are that the li's are a non-fixed height and are floating to the left. So that kills the negative http://www.jakpsatweb.cz/css/css-vertical-center-solution.html positioning method and the table-cell http://www.w3.org/Style/Examples/007/center#vertical methods that I've found whilst scouring the web. Does anyone know a method that I can use that doesn't involve using tables? Any help will be greatly appreciated! Regards, Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk http://www.munkyonline.co.uk/ T: +44 (0)20-8816-8893 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Matt Fellows http://www.onegeek.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Centering all items in a li
Hi Matt,
No worries. Still missing it though! Text-align:center will align the
elements horizontally centered.
I want to align the elements INSIDE the li to be vertically centered to the
height of the li.
So there is an even space above and below each of the elements inside the
li. At the moment they are sticking close to the top of the li.
I cant use a top margin because the list is used more than once in the page
and the li's each have different heights. % value for margin-top seem to use
the document height and not the height of the li.
Basically I want to achieve the same effect as valign: middle in a table
cell.
I just can find a logical solution that will work with a non-fixed height
container.
It's looking to me like it cant be done without a table!
I wonder if there is a way of doing this with javascript?
Thanks.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Matt Fellows
Sent: 18 May 2008 02:58
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Centering all items in a li
Sorry Darren - it was late an i was tired! Vertical/Horizontal,
Left/Right...
I don't think there is a need to do anything too exciting, the container of
the list should just need a text-align:center.
Is this basically what you are after? I have made the div only 300px wide so
you get the wrapping effect which I think is what is causing the grief.
div.container{text-align:center; width:300px} div.container ol
li{list-style-type:none; }
div class=container
ol
li class=elem
label for=dnameDisplay Name:/label
input type=text id=dname class=tinput /
/li
li class=desc
pInformation about preview box etc. If it is more than two
lines or ## characters link to./p
spana href=learn more/a/span
/li
/ol
/div
The list items will be centered. If you have multiple columns you can just
place them next to each other.
Or am i still missing something?
--
Matt Fellows
http://www.onegeek.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Centering all items in a li
lol I think I will leave this one alone, I think i'm making you're job more difficult instead of the other way around! Please do send through your solution when you find it so I can have that 'light bulb' moment. Cheers, -- Matt Fellows http://www.onegeek.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Centering all items in a li
Darren, On 17-May-08, at 8:09 PM, Darren Lovelock wrote: I've been trying to find a solution that will allow me to vertically center all the items in a li. The big problems i've got are that the li's are a non-fixed height and are floating to the left. A link to a stripped down test would be helpful. However, if you can't post a link, perhaps one of the links below will be helpful to you? Best, - Rahul. [1] http://www.brunildo.org/test/ [2] http://www.brunildo.org/test/vertmiddle.html [3] http://www.brunildo.org/test/valimid2.html [4] http://www.brunildo.org/test/va_lineheight.html *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Centering all items in a li
Yeah it is a bit of a tricky one lol! Looks like this is one example where tables are better for layout! Thanks very much for taking a look though :) Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Matt Fellows Sent: 18 May 2008 13:09 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li lol I think I will leave this one alone, I think i'm making you're job more difficult instead of the other way around! Please do send through your solution when you find it so I can have that 'light bulb' moment. Cheers, -- Matt Fellows http://www.onegeek.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Centering all items in a li
Darren, Try assigning a line-height and a height to the li, and make the two the same. Jo On Sun, May 18, 2008 at 8:54 AM, Darren Lovelock [EMAIL PROTECTED] wrote: Yeah it is a bit of a tricky one lol! Looks like this is one example where tables are better for layout! Thanks very much for taking a look though :) Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Matt Fellows Sent: 18 May 2008 13:09 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li lol I think I will leave this one alone, I think i'm making you're job more difficult instead of the other way around! Please do send through your solution when you find it so I can have that 'light bulb' moment. Cheers, -- Matt Fellows http://www.onegeek.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Centering all items in a li
Sounds like you can only change the CSS and not the (x)HTML, is that correct? You're also floating the li's... that puts them behind eachother right? Would displaying them inline help? On Sun, May 18, 2008 at 3:24 PM, Viable Design [EMAIL PROTECTED] wrote: Darren, Try assigning a line-height and a height to the li, and make the two the same. Jo On Sun, May 18, 2008 at 8:54 AM, Darren Lovelock [EMAIL PROTECTED] wrote: Yeah it is a bit of a tricky one lol! Looks like this is one example where tables are better for layout! Thanks very much for taking a look though :) Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Matt Fellows Sent: 18 May 2008 13:09 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li lol I think I will leave this one alone, I think i'm making you're job more difficult instead of the other way around! Please do send through your solution when you find it so I can have that 'light bulb' moment. Cheers, -- Matt Fellows http://www.onegeek.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Centering all items in a li
Cant set a height on the li, tried it though to see what would happen and it didnt work. Playing with line-height isnt the right way to fix this. Thanks anyway. _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Viable Design Sent: 18 May 2008 14:24 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li Darren, Try assigning a line-height and a height to the li, and make the two the same. Jo On Sun, May 18, 2008 at 8:54 AM, Darren Lovelock [EMAIL PROTECTED] wrote: Yeah it is a bit of a tricky one lol! Looks like this is one example where tables are better for layout! Thanks very much for taking a look though :) Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Matt Fellows Sent: 18 May 2008 13:09 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li lol I think I will leave this one alone, I think i'm making you're job more difficult instead of the other way around! Please do send through your solution when you find it so I can have that 'light bulb' moment. Cheers, -- Matt Fellows http://www.onegeek.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Centering all items in a li
Here's a example of what I'm doing http://www.munkyonline.co.uk/test.html I want the li's to behave the same as table cells set with valign:middle. I've had to float the li's left instead of displaying them inline otherwise they stack on top of each other in a mess! I suppose looking at it I could have used divs instead of a list but either way, I think it will still behave the same. Cheers, Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rahul Gonsalves Sent: 18 May 2008 13:46 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Centering all items in a li Darren, On 17-May-08, at 8:09 PM, Darren Lovelock wrote: I've been trying to find a solution that will allow me to vertically center all the items in a li. The big problems i've got are that the li's are a non-fixed height and are floating to the left. A link to a stripped down test would be helpful. However, if you can't post a link, perhaps one of the links below will be helpful to you? Best, - Rahul. [1] http://www.brunildo.org/test/ [2] http://www.brunildo.org/test/vertmiddle.html [3] http://www.brunildo.org/test/valimid2.html [4] http://www.brunildo.org/test/va_lineheight.html *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Centering all items in a li
A demo would be helpful, but have you tried something along the lines
of the following:
div id=footer
ul
lia href=/link1Link1/a/li
lia href=/link2Link2/a/li
...
/ul
/div
div#footer{text-align:center;}
div#footer ul li{display:inline;list-style-type:none; }
Cheers,
--
Matt Fellows
http://www.onegeek.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Centering all items in a li
Hi Matt,
I'm trying to vertically align all the items inside an li.
This could be achieved with the valign of a table cell, but tables are not
an option!
The li's are floating left. I want the labels, inputs, p's etc to be
vertically aligned in their containing li.
This is one of the lists I'm using:
ol
li class=elem
label for=dnameDisplay Name:/label
input type=text id=dname class=tinput /
/li
li class=desc
pInformation about preview box etc. If it is more than two
lines or ## characters link to./p
spana href=learn more/a/span
/li
/ol
Hope it makes more sense now!
Thanks.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Matt Fellows
Sent: 17 May 2008 15:57
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Centering all items in a li
A demo would be helpful, but have you tried something along the lines of the
following:
div id=footer
ul
lia href=/link1Link1/a/li
lia href=/link2Link2/a/li
...
/ul
/div
div#footer{text-align:center;}
div#footer ul li{display:inline;list-style-type:none; }
Cheers,
--
Matt Fellows
http://www.onegeek.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Centering all items in a li
On Sat, 17 May 2008 16:45:05 +0100, Darren Lovelock wrote: Hi Matt, I'm trying to vertically align all the items inside an li. This could be achieved with the valign of a table cell, but tables are not an option! The li's are floating left. I want the labels, inputs, p's etc to be vertically aligned in their containing li. This is one of the lists I'm using: ol li class=elem label for=dnameDisplay Name:/label input type=text id=dname class=tinput / /li li class=desc pInformation about preview box etc. If it is more than two lines or ## characters link to./p spana href=learn more/a/span /li /ol Hope it makes more sense now! Nope. Can't see why you'd put form elements in a list anyway. Perhaps you could post an example, with tables if necessary, to show us what you intend? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Centering all items in a li
I'm trying to achieve the same as a table cell set with valign=middle but with an li. This would be the list elements in a table: table tr td valign=middlelabel for=dnameDisplay Name:/label input type=text id=dname class=tinput //td td valign=middlepInformation about preview box etc. If it is more than two lines or ## characters link to./p spana href=learn more/a/span/td /tr /table The labels etc would be vertically aligned in the center of the td's. Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Hucklesby Sent: 17 May 2008 22:31 To: wsg@webstandardsgroup.org Subject: RE: [WSG] Centering all items in a li On Sat, 17 May 2008 16:45:05 +0100, Darren Lovelock wrote: Hi Matt, I'm trying to vertically align all the items inside an li. This could be achieved with the valign of a table cell, but tables are not an option! The li's are floating left. I want the labels, inputs, p's etc to be vertically aligned in their containing li. This is one of the lists I'm using: ol li class=elem label for=dnameDisplay Name:/label input type=text id=dname class=tinput / /li li class=desc pInformation about preview box etc. If it is more than two lines or ## characters link to./p spana href=learn more/a/span /li /ol Hope it makes more sense now! Nope. Can't see why you'd put form elements in a list anyway. Perhaps you could post an example, with tables if necessary, to show us what you intend? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Centering all items in a li
Have you tried playing around with line-height? On Sun, May 18, 2008 at 10:46 AM, Darren Lovelock [EMAIL PROTECTED] wrote: I'm trying to achieve the same as a table cell set with valign=middle but with an li. This would be the list elements in a table: table tr td valign=middlelabel for=dnameDisplay Name:/label input type=text id=dname class=tinput //td td valign=middlepInformation about preview box etc. If it is more than two lines or ## characters link to./p spana href=learn more/a/span/td /tr /table The labels etc would be vertically aligned in the center of the td's. Darren -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Hucklesby Sent: 17 May 2008 22:31 To: wsg@webstandardsgroup.org Subject: RE: [WSG] Centering all items in a li On Sat, 17 May 2008 16:45:05 +0100, Darren Lovelock wrote: Hi Matt, I'm trying to vertically align all the items inside an li. This could be achieved with the valign of a table cell, but tables are not an option! The li's are floating left. I want the labels, inputs, p's etc to be vertically aligned in their containing li. This is one of the lists I'm using: ol li class=elem label for=dnameDisplay Name:/label input type=text id=dname class=tinput / /li li class=desc pInformation about preview box etc. If it is more than two lines or ## characters link to./p spana href=learn more/a/span /li /ol Hope it makes more sense now! Nope. Can't see why you'd put form elements in a list anyway. Perhaps you could post an example, with tables if necessary, to show us what you intend? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Ben Wong e: [EMAIL PROTECTED] w: http://blog.onehero.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Centering all items in a li
Sorry Darren - it was late an i was tired! Vertical/Horizontal, Left/Right...
I don't think there is a need to do anything too exciting, the
container of the list should just need a text-align:center.
Is this basically what you are after? I have made the div only 300px
wide so you get the wrapping effect which I think is what is causing
the grief.
div.container{text-align:center; width:300px}
div.container ol li{list-style-type:none; }
div class=container
ol
li class=elem
label for=dnameDisplay Name:/label
input type=text id=dname class=tinput /
/li
li class=desc
pInformation about preview box etc. If it is more than two
lines or ## characters link to./p
spana href=learn more/a/span
/li
/ol
/div
The list items will be centered. If you have multiple columns you can
just place them next to each other.
Or am i still missing something?
--
Matt Fellows
http://www.onegeek.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Centering all items in a li
For those suggesting line-height. I think that is a very bad idea,
because if the line is more than 1 line, then the height will end up
being number of lines x line-height. For example - setting line-height
at 200px. 3 lines of text would make it 600px high with 200px between text.
Cheers
Adam
Matt Fellows wrote:
A demo would be helpful, but have you tried something along the lines
of the following:
div id=footer
ul
lia href=/link1Link1/a/li
lia href=/link2Link2/a/li
...
/ul
/div
div#footer{text-align:center;}
div#footer ul li{display:inline;list-style-type:none; }
Cheers,
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
