 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008CSS/DIV equivalent of ALIGN=BASELINE
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?  SignatureSteve Swift http://www.swiftys.org.uk/swifty.html http://www.ringers.org.uk > I'm still trying to learn CSS and the use of DIV, and a few examples > will get me started. [quoted text clipped - 11 lines] > > 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 > 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. SignatureSteve Swift http://www.swiftys.org.uk/swifty.html http://www.ringers.org.uk > <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} SignatureBerg > I'm still trying to learn CSS and the use of DIV, and a few examples > will get me started. [quoted text clipped - 4 lines] > > <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> Signaturedorayme In article <doraymeRidThis-AC45CF.18101616072008@news-vip.optusnet.com.au>, > span {position:relative; font-size: 50%;} should be span {font-size: 50%;} I meant to delete position: relative;, it was from an earlier fiddling. Signaturedorayme In article <doraymeRidThis-AC45CF.18101616072008@news-vip.optusnet.com.au>, > > 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;} </style> </head> <body> <h2>Header <span>Comment</span></h2> </body> </html> Signaturedorayme > Sorry to come in again, but a further thought, to make the comment plain > text, not bold: [quoted text clipped - 12 lines] > </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. SignatureSteve Swift http://www.swiftys.org.uk/swifty.html http://www.ringers.org.uk > > 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. Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.