Re: [WSG] Center aligning links with a specified height
Adam Burmister (DSL AK) wrote: Hi everybody, Long time reader - first time poster here. I've currently got a doozie that I've been struggling with for hours. The final product looks simple enough, but I can't for the life of me get it - help me WSG, you're my only hope. is there a url where we can take a look? dwain -- Dwain Alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The Savior replied; There is no such thing as sin;... 'The Gospel of Mary of Magdala' ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Center aligning links with a specified height
Sorry for delays in replying - http://labs.flog.co.nz/css-help/ has an example image of what I'm after and some XHTML and CSS code to look at. Hopefully that will explain it far better than I have previously :) - A -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of dwain alford Sent: Monday, 22 August 2005 6:23 p.m. To: wsg@webstandardsgroup.org Subject: Re: [WSG] Center aligning links with a specified height Adam Burmister (DSL AK) wrote: Hi everybody, Long time reader - first time poster here. I've currently got a doozie that I've been struggling with for hours. The final product looks simple enough, but I can't for the life of me get it - help me WSG, you're my only hope. is there a url where we can take a look? dwain -- Dwain Alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The Savior replied; There is no such thing as sin;... 'The Gospel of Mary of Magdala' ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Center aligning links with a specified height
Try keeping them inline, and setting line-height to 40px. As long as word-wrap doesn't become a factor, that should work fine. But since you're using pixels, I'm guessing word-wrap would already cause problems anyway.
Re: [WSG] Center aligning links with a specified height
On 23 Aug 2005, at 7:48 AM, Kenny Graham wrote:
Try keeping them inline, and setting line-height to 40px. As long as
word-wrap doesn't become a factor, that should work fine. But since
you're using pixels, I'm guessing word-wrap would already cause
problems anyway.
Hmm... line-height on the a works for me in Safari 1.3/OSX 10.3.9 and
IE6/WInXP, but not in Firefox - strange.
I do, however, offer this solution to the centering issue - see my
modifications to your code at
http://www.omnivision.com.au/test/center_test.htm
Note that, when testing, I use backgrounds rather than borders to
identify the various elements; I find this gives a more accurate idea
of layout. If you have a number of nested elements, all those borders
add up to extra space...
I've left your CSS rules that I've disabled in the code, but commented
out so you can see what they were.
Note also that the inline-block solution doesn't work in IE5/Mac...
I think the key to centering the list is in an extra containing div
(id=shell) that allows the whole footer to be centered, with no fixed
width, so that {margin: 0 auto} works to center it, and it then expands
to the the width of its content (the ul). This extra div is
semantically null, I guess, but I'll take it as a viable solution!
Now for that height issue...
HTH
N
___
Omnivision. Websight.
http://www.omnivision.com.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Center aligning links with a specified height
I got it working in firefox and almost in IE/Win (height is way bigger
than it's supposed to be in IE) by changing the li a in Nick's
example to:
li a {
background: #eee;
display: inline-block ;
/*height: 50px;*/
line-height: 50px;
font-size: 14px;
padding: 17px 20px;
}
Now, keep in mind as soon as someone resizes the text, it won't work
anymore. So I'd keep looking, even if you fix it in IE. But maybe it's
a step in the right direction? I stopped trying to make stuff work in
IE when it started to give me ulcers and gray hairs (and I'm only
21). Good luck.
RE: [WSG] Center aligning links with a specified height
Title: RE: [WSG] Center aligning links with a specified height
I think Ive found a solution it requires a separate padding style for IE though.
http://labs.flog.co.nz/css-help/solution.htm
ul {
list-style-type:none;
background: #cfc;
height: 40px;
overflow: hidden;
}
li a {
background: #eee;
display: inline-block;
padding: 0 20px;
line-height: 40px;
}
li a {
padding: 20px;
}
Could somebody please check it in Safari?
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]] On Behalf Of Kenny Graham
Sent: Tuesday, 23 August 2005 10:22 a.m.
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Center aligning links with a specified height
I got it working in firefox and almost in IE/Win (height is way bigger than it's supposed to be in IE) by changing the li a in Nick's example to:
li a {
background: #eee;
display: inline-block ;
/*height: 50px;*/
line-height: 50px;
font-size: 14px;
padding: 17px 20px;
}
Now, keep in mind as soon as someone resizes the text, it won't work anymore. So I'd keep looking, even if you fix it in IE. But maybe it's a step in the right direction? I stopped trying to make stuff work in IE when it started to give me ulcers and gray hairs (and I'm only 21). Good luck.
Re: [WSG] Center aligning links with a specified height
On 23 Aug 2005, at 8:41 AM, Adam Burmister ((DSL AK)) wrote: Could somebody please check it in Safari? Hmm again - not quite. See http://www.omnivision.com.au/test/safari.gif Sorry, gotta go to work right now - I'll check in later and see how you're doing... N ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Center aligning links with a specified height
Hi everybody, Long time reader - first time poster here. I've currently got a doozie that I've been struggling with for hours. The final product looks simple enough, but I can't for the life of me get it - help me WSG, you're my only hope. What I want is a center aligned list (UL LI's) of links with a rollover state on the links. div id=footer ul lia href=#Test/a/li lia href=#Test/a/li lia href=#Test/a/li /ul pCopyright line goes here/p /div The kicker is that I need to be able to specify a height on the anchor link (40px in this case; as the background image is this height). Since it's an inline element I can't set a height on it directly, so if I convert it to block it takes up the whole row, if I float it it won't be centered, I can't set a width value on the LI because it's a content managed section... everything I've tried doesn't work, and I'm pretty sure I've tried everything. Does anybody have a solution to this one? Looking forward to your responses, Cheers, Adam. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
