CSS/DIV equivalent of ALIGN=BASELINE
Steve Swift
will get me started.
My challenge at the moment is to place some text to the right of a
header (a sort of footnote) and to have the baselines of the text
aligned. I can do this with a table:
<TABLE><TR VALIGN=BASELINE><TD><H2>Header</H2><TD>Comment</TABLE>
But my feeble attempt with DIVs fails:
<DIV STYLE="float:left;vertical-align:baseline"><H2>Header 2</H2></DIV>
<DIV STYLE="float:left;vertical-align:bottom">text</DIV>
Am I missing something obvious, or is this harder than it looks?
--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
Ben C
> I'm still trying to learn CSS and the use of DIV, and a few examples
> will get me started.
>
> My challenge at the moment is to place some text to the right of a
> header (a sort of footnote) and to have the baselines of the text
> aligned. I can do this with a table:
>
><TABLE><TR VALIGN=BASELINE><TD><H2>Header</H2><TD>Comment</TABLE>
>
> But my feeble attempt with DIVs fails:
>
><DIV STYLE="float:left;vertical-align:baseline"><H2>Header 2</H2></DIV>
><DIV STYLE="float:left;vertical-align:bottom">text</DIV>
>
> Am I missing something obvious, or is this harder than it looks?
No, and it is harder than it looks :)
Vertical-align only applies to things that are display: inline or
table-cell, and it isn't inherited, so it does nothing on your divs.
Will this do:
h2 { display: inline }
...
<h2>Header 2</h2> text
dorayme
Steve Swift <Steve....@gmail.com> wrote:
> I'm still trying to learn CSS and the use of DIV, and a few examples
> will get me started.
>
> My challenge at the moment is to place some text to the right of a
> header (a sort of footnote) and to have the baselines of the text
> aligned. I can do this with a table:
>
> <TABLE><TR VALIGN=BASELINE><TD><H2>Header</H2><TD>Comment</TABLE>
>
Well, that does not align the baselines.
> But my feeble attempt with DIVs fails:
>
> <DIV STYLE="float:left;vertical-align:baseline"><H2>Header 2</H2></DIV>
> <DIV STYLE="float:left;vertical-align:bottom">text</DIV>
>
> Am I missing something obvious, or is this harder than it looks?
Is this what you want:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
h2 {font-size: 200%;}
span {position:relative; font-size: 50%;}
</style>
</head>
<body>
<h2>Header <span>Comment</span></h2>
</body>
</html>
--
dorayme
dorayme
<doraymeRidThis-AC4...@news-vip.optusnet.com.au>,
dorayme <dorayme...@optusnet.com.au> wrote:
> span {position:relative; font-size: 50%;}
should be
span {font-size: 50%;}
I meant to delete position: relative;, it was from an earlier fiddling.
--
dorayme
dorayme
<doraymeRidThis-AC4...@news-vip.optusnet.com.au>,
dorayme <dorayme...@optusnet.com.au> wrote:
> In article <487e...@news.greennet.net>,
> Steve Swift <Steve....@gmail.com> wrote:
>
> > I'm still trying to learn CSS and the use of DIV, and a few examples
> > will get me started.
> >
> > My challenge at the moment is to place some text to the right of a
> > header (a sort of footnote) and to have the baselines of the text
> > aligned. I can do this with a table:
> Is this what you want:
>
Sorry to come in again, but a further thought, to make the comment plain
text, not bold:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
h2 {font-size: 200%;}
span {font-size: 50%;font-weight: normal;}
Steve Swift
> Will this do:
>
> h2 { display: inline }
> ...
> <h2>Header 2</h2> text
I wouldn't want to change all H2 instances, but I can certainly use this
approach. Thanks for showing me something I hadn't come across before.
One of my colleagues at work suggested this:
<h2>Part 2 <span style="font-size:small;font-weight:normal">(Experts
Only)</span></h2>
Which is perfect for my occasional use.
Steve Swift
> Sorry to come in again, but a further thought, to make the comment plain
> text, not bold:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <style type="text/css" media="screen">
> h2 {font-size: 200%;}
> span {font-size: 50%;font-weight: normal;}
> </style>
> </head>
> <body>
> <h2>Header <span>Comment</span></h2>
> </body>
> </html>
That's almost exactly what a colleague at work suggested (see my post
above). Thanks!
I've now splashed out on a book to help me with CSS, so maybe you won't
see me here again in the near future.
dorayme
Steve Swift <Steve....@gmail.com> wrote:
> dorayme wrote:
> > Sorry to come in again, but a further thought, to make the comment plain
> > text, not bold:
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
...
>
> That's almost exactly what a colleague at work suggested (see my post
> above). Thanks!
>
> I've now splashed out on a book to help me with CSS, so maybe you won't
> see me here again in the near future.
That's what I call optimism! Good luck.
--
dorayme
Bergamot
Steve Swift wrote:
>
> <h2>Part 2 <span style="font-size:small;font-weight:normal">(Experts
> Only)</span></h2>
<h2>Part 2 <small>(Experts Only)</small></h2>
Inline styles are a PITA so put the font settings in your CSS, i.e.
h2 small {font-weight:normal}
--
Berg