I'm working with some code I got here, but I'm stumped on one issue: I want to align the text (e.g. "Home", Timing Services", etc.) centered vertically in the buttons. I've looked at and tried various CSS options that would seem to do what I want, but nothing does so. 8<{{
Please advise. TIA
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Use CSS</title>
<style type="text/css">
.nav a span { font-size: .8em; }
.floating li { float: left; }
.inlineblock li
{
display: inline-block;
vertical-align: bottom;
}
In article <MPG.2979170eccbffed7989...@news.eternal-september.org>,
mrc2...@cox.net (Mike Copeland) wrote:
> I'm working with some code I got here, but I'm stumped on one issue: > I want to align the text (e.g. "Home", Timing Services", etc.) centered > vertically in the buttons. I've looked at and tried various CSS options > that would seem to do what I want, but nothing does so. 8<{{
> Please advise. TIA
...
Your markup made it look centred in the browsers I looked at it on. Are you sure you want the buttons to go down the page (as they do) instead of across (which is the main point really of inline-block). Why not post a URL to at least have it appear as
close to how you want it as you can get.
Your css is a little puzzling, margin-right of 800px; surely just added to test something or other? Some things like the float doing nothing much, your line-height of even 3em making some text disappear from your buttons. I did not see a start comment but an end comment in your CSS? URLs are best, then we see what you want us to see.
If the text in the buttons is of different number of lines, button to button, then there are HTML table ways to align the text to the middle and there are CSS display: table; ways.
> > I'm working with some code I got here, but I'm stumped on one issue: > > I want to align the text (e.g. "Home", Timing Services", etc.) centered > > vertically in the buttons. I've looked at and tried various CSS options > > that would seem to do what I want, but nothing does so. 8<{{
> > Please advise. TIA
> Your markup made it look centred in the browsers I looked at it > on. Are you sure you want the buttons to go down the page (as > they do) instead of across (which is the main point really of > inline-block). Why not post a URL to at least have it appear as
> close to how you want it as you can get.
> Your css is a little puzzling, margin-right of 800px; surely just > added to test something or other? Some things like the float > doing nothing much, your line-height of even 3em making some text > disappear from your buttons. I did not see a start comment but an > end comment in your CSS? URLs are best, then we see what you want > us to see.
I'm trying to modify the following URL:
www.raceplaceevents.com and although I have that working (more or less) I was investigating other ways to do such things. I'd like to tweak the look of the buttons (such as rounded corners) and liked what I saw in the code on which I based my query.
> If the text in the buttons is of different number of lines, > button to button, then there are HTML table ways to align the > text to the middle and there are CSS display: table; ways.
Your sample code didn't work, because the buttons weren't of the same size, as well as changing size and shape when any one of them was cursored over.
In article <MPG.297952712f42d6e4989...@news.eternal-september.org>,
mrc2...@cox.net (Mike Copeland) wrote:
> In article <dorayme-2E581D.11272913012...@news.albasani.net>, > dora...@optusnet.com.au says...
...
> Your sample code didn't work, because the buttons weren't of the same > size, as well as changing size and shape when any one of them was > cursored over.
My example markup does not work on say Firefox? Surely?
It works in Sydney. But then, it is lovely weather here at last.
It even works in IE8.
But you cannot count on IE6 or 7 or 8 or maybe even 9 in "compatibility" mode. But then, you have to be pretty careful with all sorts of things with earlier IE, even inline-box if you use it.
> ...
> > Your sample code didn't work, because the buttons weren't of the same > > size, as well as changing size and shape when any one of them was > > cursored over.
> My example markup does not work on say Firefox? Surely?
> It works in Sydney. But then, it is lovely weather here at last.
> It even works in IE8.
> But you cannot count on IE6 or 7 or 8 or maybe even 9 in > "compatibility" mode. But then, you have to be pretty careful > with all sorts of things with earlier IE, even inline-box if you > use it.
Well, using the link works nicely (in SeaMonkey, my default browser - I use others during development after rendering in SeaMonkey). However, the buttons line up across the top, and I'd really like to have them line up vertically on the left (as www.Raceplaceevents.com does), along with equal fixed widths. Is there a way to do that?
(The weather's quite nice here in Phoenix, Arizona, too!) 8<}}
> In article <dorayme-24EF4E.15305913012...@news.albasani.net>, > dora...@optusnet.com.au says...
> > ...
> > > Your sample code didn't work, because the buttons weren't of the same > > > size, as well as changing size and shape when any one of them was > > > cursored over.
> > My example markup does not work on say Firefox? Surely?
> > But you cannot count on IE6 or 7 or 8 or maybe even 9 in > > "compatibility" mode. But then, you have to be pretty careful > > with all sorts of things with earlier IE, even inline-box if you > > use it.
> Well, using the link works nicely (in SeaMonkey, my default browser - > I use others during development after rendering in SeaMonkey). However, > the buttons line up across the top, and I'd really like to have them > line up vertically on the left (as www.Raceplaceevents.com does), along > with equal fixed widths. Is there a way to do that?
...
Yes, certainly. One quick way is to adapt the CSS in my URL above. Let's see...
First, obviously, we have to remove the float on li so the list items stop floating and revert to their natural behaviour of one under the other. While we are at it, let's remove all the CSS for the UL element. And lessen the gap between the list items. And now no need for a right margin.
So far then, we start the new with
<style type="text/css">
li {
margin-right:
margin-bottom: .3em;
/* float: left; remove this line*/
text-align: center;
list-style-type: none;
}
...
Now note that the 'buttons' are only as wide as they need to be because table cells, like a few other display modes cause shrink-to-fit. We need to be rid of this as you want all your buttons to be neatly same width. One simple solution is to add a set width to the style of the anchor element. So:
Mike Copeland wrote:
> I'm working with some code I got here, but I'm stumped on one issue:
> I want to align the text (e.g. "Home", Timing Services", etc.) centered
> vertically in the buttons. I've looked at and tried various CSS options
> that would seem to do what I want, but nothing does so. 8<{{
> […]
> .nav li
> {
> margin-bottom: .1em;
> margin-right: 800px;
^^
There is a syntax error. Once that is fixed, declare the line-height of the `a' element (which text-in-a-line you want to be vertically centered), not (only) the `li' element. Of course, this only applies to a *line* of text, and cannot work as intended if the text is automatically or manually wrapped. You are currently doing the latter.
^^^^^^^^^^^^^^
You do not want to do that on the same element due to differences in box models: In the W3C box model the `a' element will have a CSS 2.1 computed height of 3.2em; in the MSHTML box model it will be 3em high instead.
I suggest you start your stylesheet from scratch, testing each step in all of the target environments.
> }
PointedEars
-- Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300d...@news.demon.co.uk>
