Paragraph with caption in margin
in [CSS]
|
Prev: Top Align Div and Paragraph
Next: How to place a picture centered on a webpage / with fixed offset of 300 pixels from left border?
From: Stan Brown on 2 Jan 2010 09:36 Sat, 2 Jan 2010 08:41:06 -0500 from Stan Brown <the_stan_brown(a)fastmail.fm>: > > Mon, 21 Dec 2009 13:01:22 -0500 from Jonathan N. Little > <lws4art(a)gmail.com>: > > > > Stan Brown wrote: > > > Mon, 21 Dec 2009 08:37:28 +1100 from dorayme > > > <doraymeRidThis(a)optusnet.com.au>: > > >> > > >> In article<hglsk0$a5m$1(a)news.eternal-september.org>, > > >> "Jonathan N. Little"<lws4art(a)gmail.com> wrote: > > > > > >>> p.summarize span { > > >>> display: block; position: relative; left: -6em; top: 1.25em; > > >>> } > > >> > > >> Perhaps not so simple in Stan's context. Take a look at it. > > > > > > Thanks to you both for responding. > > > > > > Replacing a float with a position:relative seems to be the nub of > > > Jonathan's suggestion. Jonathan, can you say why you prefer one over > > > the other, and Dorayme, can you say what you expect to go wrong? I'm > > > not generally comfortable with position, so I take this as a learning > > > opportunity. > > > > IE especially IE6 has problems with floats and margins...This way just > > bypasses it even works in old IE5x > > Thanks for responding. What with the holidays, I'm just now getting > back to things that require intellectual effort. :-) > > I have IE6 at home, so I'll have to try the position:relative at work > on Monday. However, I just now tried it in Firefox, and it greatly increases the top margin of paragraphs. The text you provided is uploaded as http://www.tc3.edu/instruct/sbrown/zonk.htm and the screen shot is at http://www.tc3.edu/instruct/sbrown/zonk-firefox356.jpg I understand why you had to make the left captions display:block: with display:inline the first line of the paragraph gets pushed right. But why top:-1.25em? I see that in practice it positions the caption at nearly the same height as the paragraph, but I don't understand the logic. I would have thought top:0, to make the heights the same. Any way to fix the top-margin problem? I've reread the spec sections 9.4 and 9.8 yet again, but I still don't understand it. Is there a correct but clearer explanation somewhere? -- Stan Brown, Oak Road Systems, Tompkins County, New York, USA http://OakRoadSystems.com/ HTML 4.01 spec: http://www.w3.org/TR/html401/ validator: http://validator.w3.org/ CSS 2.1 spec: http://www.w3.org/TR/CSS21/ validator: http://jigsaw.w3.org/css-validator/ Why We Won't Help You: http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
From: Ben C on 2 Jan 2010 12:06 On 2010-01-02, Stan Brown <the_stan_brown(a)fastmail.fm> wrote: > Sat, 2 Jan 2010 08:41:06 -0500 from Stan Brown ><the_stan_brown(a)fastmail.fm>: >> >> Mon, 21 Dec 2009 13:01:22 -0500 from Jonathan N. Little >> <lws4art(a)gmail.com>: >> > >> > Stan Brown wrote: >> > > Mon, 21 Dec 2009 08:37:28 +1100 from dorayme >> > > <doraymeRidThis(a)optusnet.com.au>: >> > >> >> > >> In article<hglsk0$a5m$1(a)news.eternal-september.org>, >> > >> "Jonathan N. Little"<lws4art(a)gmail.com> wrote: >> > > >> > >>> p.summarize span { >> > >>> display: block; position: relative; left: -6em; top: 1.25em; >> > >>> } >> > >> >> > >> Perhaps not so simple in Stan's context. Take a look at it. >> > > >> > > Thanks to you both for responding. >> > > >> > > Replacing a float with a position:relative seems to be the nub of >> > > Jonathan's suggestion. Jonathan, can you say why you prefer one over >> > > the other, and Dorayme, can you say what you expect to go wrong? I'm >> > > not generally comfortable with position, so I take this as a learning >> > > opportunity. >> > >> > IE especially IE6 has problems with floats and margins...This way just >> > bypasses it even works in old IE5x >> >> Thanks for responding. What with the holidays, I'm just now getting >> back to things that require intellectual effort. :-) >> >> I have IE6 at home, so I'll have to try the position:relative at work >> on Monday. > > However, I just now tried it in Firefox, and it greatly increases the > top margin of paragraphs. The text you provided is uploaded as > http://www.tc3.edu/instruct/sbrown/zonk.htm > and the screen shot is at > http://www.tc3.edu/instruct/sbrown/zonk-firefox356.jpg > > I understand why you had to make the left captions display:block: > with display:inline the first line of the paragraph gets pushed > right. But why top:-1.25em? I see that in practice it positions the > caption at nearly the same height as the paragraph, but I don't > understand the logic. I would have thought top:0, to make the heights > the same. Position: relative moves an element relative to _where it would have been if it was position: static_. The normal static position for the spans, since they are display: block, is above the text and aligned to the left of the Ps (you can see exactly where it is by turning off position: relative temporarily). It should be clear why they have to move both left and down to get to the desired positions. Note also that position: relative leaves a "hole" behind _which still takes up space_. In other words, everything else on the page flows around where the element would have been if you hadn't whisked it away with top and left. That's why you're getting the apparent extra top margin. > Any way to fix the top-margin problem? Here's one: p.summarize { margin-left: 6em; position: relative; } p.summarize span { display: block; position: absolute; left: -6em; top: 0; } Here we make the Ps relatively positioned, not so we can move them themselves, but so they become "containing blocks" for the spans. Then we move the spans relative to the Ps' top left corners by 6em to the left. It's not necessary to move them up or down, so we use top: 0 (top: auto will work too, but the spec does not provide cast-iron guarantees-- better to use top: 0). Position: absolute doesn't leave a hole behind the way position: relative does, so we avoid the top-margin problem. Instead of relative to an element's _own_ static position, it positions relative to the containing block's top-left corner. That's why we had to make the Ps into containing blocks for the spans. Relative positioning is actually not very useful in practice mainly because of the "hole". Apart from using it as a better subscript and superscript (because vertical-align alters line box height in a way that is both baffling and annoying) I would probably only ever use it for the side-effects of creating containing blocks (as in my example above) or stacking contexts-- i.e. without setting top, bottom, left or right. > I've reread the spec sections 9.4 and 9.8 yet again, but I still > don't understand it. Is there a correct but clearer explanation > somewhere? All there is to know about position: relative is: 1. The offset specified with top/left/bottom/right is relative to where the box would have been if it were position: static. 2. It leaves a hole behind-- everything else flows around its original un-offsetted position as if it hadn't moved. 3. It creates a containing-block for positioned descendents. 4. Relatively positioned boxes are stacked higher than normal, and you can control their stacking with z-index.
From: Gus Richter on 2 Jan 2010 14:24 On 1/2/2010 8:46 AM, Stan Brown wrote: > > Am I missing something? > Note the title of the stuff below and try it. <!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=iso-8859-1"> <meta http-equiv="content-language" content="en-us"> <title>KISS Way</title> <style type="text/css"> ..summarize { margin-left:6em;width:40em;background:tan; } span { float:left;background:magenta; } /*span or div*/ </style> </head> <body> <span>Summary:</span> <p class="summarize"> From the sample correlation it is possible to estimate the population correlation. This page previews the techniques of inferential statistics that can estimate the correlation coefficient of the population. </p> <span>See also: </span> <p class="summarize"> A downloadable Excel workbook does all these calculations. The downloadable TI-83/84 program Extra Statistics Utilities part 6 computes confidence intervals and hypothesis tests. </p> <span>Contents: </span> <div class="summarize"> <ul> <li><a href="#Overview"><code>MATH200B</code> Program Overview</a>: <small><a href="#Download">Getting the Program</a></small> | <small><a href="#Using">Using the Program</a></small> </li><li><a href="#MenuSkurt">1. Skewness and Kurtosis</a>: <small><a href="#MenuSkurtUsing">Using the Program</a></small> | <small><a href="#MenuSkurtExampleHeight">Example: College Students� Heights</a></small> | <small><a href="#MenuSkurtExampleDice">Example: Throwing Dice</a></small> </li><li><a href="#MenuTimeser">2. Time Series Plots</a> </li><li><a href="#MenuCriticalt">3. Critical t or Inverse t</a> </li><li>Blah, blah... </li><li><a href="#WhatsNew">What�s New</a> </li></ul> </div> <div style="width:90%;margin-left:5%;"> <h1>Two points:</h1> <p>1. The magenta items are floated left. The tan items have a left margin applied and flow to the right of the floats. I also gave them a width.</p> <p>2.You don't have a background color in your page, but I used two for clarification. Because of the can of worms with List from browser to browser, place the List within a div and don't move the List if you want to bring the bullets closer to the left, but rather move the div.</p> </div> </body> </html>
From: dorayme on 2 Jan 2010 16:51 In article <hho6gj$7um$1(a)news.eternal-september.org>, Gus Richter <gusrichter(a)netscape.net> wrote: > On 1/2/2010 8:46 AM, Stan Brown wrote: > > > > Am I missing something? > > > Note the title of the stuff below and try it. > > <!DOCTYPE html ... Great quoting Gus, demonstrates comprehensive reading! Never mind third party readers though ... Happy New Year! -- dorayme
From: Gus Richter on 3 Jan 2010 03:03
On 1/2/2010 4:51 PM, dorayme wrote: > In article<hho6gj$7um$1(a)news.eternal-september.org>, > Gus Richter<gusrichter(a)netscape.net> wrote: > >> On 1/2/2010 8:46 AM, Stan Brown wrote: >>> >>> Am I missing something? >>> >> Note the title of the stuff below and try it. >> >> <!DOCTYPE html ... > > Great quoting Gus, demonstrates comprehensive reading! Never mind third > party readers though ... > > Happy New Year! > Thank you for the cynical sentiment following the terse comment. It really does pain me that I didn't do justice by being careful, check my work and validate. Get out your cat o' nine tails. In any case, here is a corrected and validated version. Oh and Happy New Year to you too. <!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=iso-8859-1"> <meta http-equiv="content-language" content="en-us"> <title>KISS Way</title> <style type="text/css"> ..summarize { margin-left:6em;width:40em;background:#CC9966; } div.summary { float:left;background:#FF00CC; } </style> </head> <body> <div class="summary">Summary:</div> <p class="summarize"> From the sample correlation it is possible to estimate the population correlation. This page previews the techniques of inferential statistics that can estimate the correlation coefficient of the population. </p> <div class="summary">See also:</div> <p class="summarize"> A downloadable Excel workbook does all these calculations. The downloadable TI-83/84 program Extra Statistics Utilities part 6 computes confidence intervals and hypothesis tests. </p> <div class="summary">Contents:</div> <div class="summarize"> <ul> <li><a href="#Overview"><code>MATH200B</code> Program Overview</a>: <small><a href="#Download">Getting the Program</a></small> | <small><a href="#Using">Using the Program</a></small> </li><li><a href="#MenuSkurt">1. Skewness and Kurtosis</a>: <small><a href="#MenuSkurtUsing">Using the Program</a></small> | <small><a href="#MenuSkurtExampleHeight">Example: College Students' Heights</a></small> | <small><a href="#MenuSkurtExampleDice">Example: Throwing Dice</a></small> </li><li><a href="#MenuTimeser">2. Time Series Plots</a> </li><li><a href="#MenuCriticalt">3. Critical t or Inverse t</a> </li><li>Blah, blah... </li><li><a href="#WhatsNew">What's New</a> </li></ul> </div> <div style="width:90%;margin-left:5%;"> <h1>Two points:</h1> <p>1. The magenta items are floated left. The tan items have a left margin applied and flow to the right of the floats (I also gave them a width).</p> <p>2.You don't have a background color in your page, but I used two for clarification. Because of the can of worms with List from browser to browser, place the List within a div and don't move the List if you want to bring the bullets closer to the left, but rather move the div.</p> </div> </body> </html> |