[
http://jira.magnolia-cms.com/browse/MGNLSTK-321?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=30490#action_30490
]
Matt Dertinger edited comment on MGNLSTK-321 at 10/19/10 7:35 PM:
------------------------------------------------------------------
Hi Andreas,
In the specific example shown in the screenshot above, adding a {{clear:both}}
rule to {{styles.css}} within the {{.text blockquote}} selector would be
enough. As a starting point, below is an example of the current markup from
the demo-project's [Article with TOC
page|http://demoauthor.magnolia-cms.com/demo-project/about/subsection-articles/large-article.html]
(HTML comments added by me).
{code:xml|title=Text and Image Paragraph in Main, followed by
blockquote|titleBGColor=#FFFFCE}
<div class="text">
...
<!-- START OF TEXT AND IMAGE PARAGRAPH -->
<h2 id="jump2">Second Sub-Heading</h2>
<!-- This element is floated left -->
<dl class="photo">
<dt><img
src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" alt="A metal lamp hanging from the ceiling"
/></dt>
<dd class="zoom"><a
href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" title="Zoom on this image"
rel="showbox">Zoom</a></dd>
<dd class="caption">A metal lamp hanging from the ceiling</dd>
<dd class="copyright">Magnolia International AG</dd>
<dd class="longdesc"><p>A metal lamp hanging from the ceiling in front
of a green wall. </p></dd>
</dl>
<!-- The content of this paragraph has been shortened so that it is not
longer than the floated dl.photo element -->
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es
un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
<!-- The ul has been removed so that the content is not longer than the
floated dl.photo element -->
<!-- END OF TEXT AND IMAGE PARAGRAPH -->
<!-- START OF QUOTED TEXT PARAGRAPH -->
<!-- Currently, no clearing is on this element, the effect shown in the
screenshot will be seen. If we add clear:both to the .text blockquote selector
in styles.css than it will be cleared. However, what happens if it is not a
blockquote element that comes next? -->
<blockquote>
<p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor
separat existentie es un myth. Por scientie, musica, sport etc, litot Europa
usa li sam vocabular.</p>
<p>
<cite>A. Miller</cite>
</p>
</blockquote>
<!-- END OF QUOTED TEXT PARAGRAPH -->
...
</div>
{code}
But we don't always have an element like {{blockquote}} as a hook to attach a
{{clear:both}} rule to. For example, if we move the Link List Paragraph at the
end of the page up above the {{blockquote}}, we would have the following:
{code:xml|title=Text and Image Paragraph in Main, followed by Link
List|titleBGColor=#FFFFCE}
<div class="text">
...
<!-- START OF TEXT AND IMAGE PARAGRAPH -->
<h2 id="jump2">Second Sub-Heading</h2>
<!-- This element is floated left -->
<dl class="photo">
<dt><img
src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" alt="A metal lamp hanging from the ceiling"
/></dt>
<dd class="zoom"><a
href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" title="Zoom on this image"
rel="showbox">Zoom</a></dd>
<dd class="caption">A metal lamp hanging from the ceiling</dd>
<dd class="copyright">Magnolia International AG</dd>
<dd class="longdesc"><p>A metal lamp hanging from the ceiling in front
of a green wall. </p></dd>
</dl>
<!-- The content of this paragraph has been shortened so that it is not
longer than the floated dl.photo element -->
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es
un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
<!-- END OF TEXT AND IMAGE PARAGRAPH -->
<!-- START OF LINK LIST PARAGRAPH -->
<div class="links">
<h2 id="jump3">Third Sub-Heading - Further Links</h2>
<ul>
<li>
<a
href="/demo-project/about/subsection-articles/article.html">Standard Article</a>
</li>
<li class="download">
<a
href="/demo-project/dms/demo-project/downloads/Magnolia_Flyer_4-0/Magnolia%20Flyer%204.0.pdf">Magnolia
Flyer 4.0 <em>(PDF, 129 KB)</em></a>
</li>
</ul>
</div>
<!-- END OF LINK LIST PARAGRAPH -->
<!-- START OF QUOTED TEXT PARAGRAPH -->
<!-- Currently, no clearing is on this element, the effect shown in the
screenshot will be seen. If we add clear:both to the .text blockquote selector
in styles.css than it will be cleared. However, what happens if it is not a
blockquote element that comes next? -->
<blockquote>
<p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor
separat existentie es un myth. Por scientie, musica, sport etc, litot Europa
usa li sam vocabular.</p>
<p>
<cite>A. Miller</cite>
</p>
</blockquote>
<!-- END OF QUOTED TEXT PARAGRAPH -->
...
</div>
{code}
Notice the Link List is now to the right of the image, and appears to be part
of the Text and Image paragraph. Admittedly, it doesn't look particularly
awful in this case, but was probably not what the author had in mind. If we
add some content to the paragraph, we may also notice that the link list items
wrap around the image, as shown in this screenshot.
!text-image-link-list-screen-shot.png!
To remedy this situation, and many others like it, what I'm proposing is to
contain the Text and Image paragraph in a {{div}} element, and then add class
{{clearfix}} to the container to expand the container around any floated
elements. Without the {{clearfix}} class, the container {{div}} would not
enclose any floated child elements. As can be seen in the example image from
the [original {{clearfix}}
article|http://www.positioniseverything.net/easyclearing.html].
!http://www.positioniseverything.net/articles/images/clear-box.gif!
For other paragraphs that already have a containing element, {{clearfix}} can
be added to their {{class}} attribute to ensure they properly contain any
floated child elements.
In the case of the Text and Image paragraph example we've been using, the
markup would now look like this:
{code:xml|title=Text and Image Paragraph in Main, followed by Link
List|titleBGColor=#FFFFCE}
<div class="text">
...
<!-- START OF TEXT AND IMAGE PARAGRAPH -->
<div class="clearfix">
<h2 id="jump2">Second Sub-Heading</h2>
<!-- This element is floated left -->
<dl class="photo">
<dt><img
src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" alt="A metal lamp hanging from the ceiling"
/></dt>
<dd class="zoom"><a
href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" title="Zoom on this image"
rel="showbox">Zoom</a></dd>
<dd class="caption">A metal lamp hanging from the ceiling</dd>
<dd class="copyright">Magnolia International AG</dd>
<dd class="longdesc"><p>A metal lamp hanging from the ceiling in
front of a green wall. </p></dd>
</dl>
<!-- The content of this paragraph has been shortened so that it is not
longer than the floated dl.photo element -->
<p>Li Europan lingues es membres del sam familie. Lor separat
existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam
vocabular. Li Europan lingues es membres del sam familie. Lor separat
existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam
vocabular.</p>
</div>
<!-- END OF TEXT AND IMAGE PARAGRAPH -->
<!-- START OF LINK LIST PARAGRAPH -->
<div class="links">
<h2 id="jump3">Third Sub-Heading - Further Links</h2>
<ul>
<li>
<a
href="/demo-project/about/subsection-articles/article.html">Standard Article</a>
</li>
<li class="download">
<a
href="/demo-project/dms/demo-project/downloads/Magnolia_Flyer_4-0/Magnolia%20Flyer%204.0.pdf">Magnolia
Flyer 4.0 <em>(PDF, 129 KB)</em></a>
</li>
</ul>
</div>
<!-- END OF LINK LIST PARAGRAPH -->
<!-- START OF QUOTED TEXT PARAGRAPH -->
<!-- Currently, no clearing is on this element, the effect shown in the
screenshot will be seen. If we add clear:both to the .text blockquote selector
in styles.css than it will be cleared. However, what happens if it is not a
blockquote element that comes next? -->
<blockquote>
<p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor
separat existentie es un myth. Por scientie, musica, sport etc, litot Europa
usa li sam vocabular.</p>
<p>
<cite>A. Miller</cite>
</p>
</blockquote>
<!-- END OF QUOTED TEXT PARAGRAPH -->
...
</div>
{code}
And here's a screenshot of how it would be rendered:
!text-image-link-list-screen-shot-fix.png!
Note: This is just one example. There are other approaches to self-clearing
containing elements, such as using {{overflow:hidden}} (which is the current
STK approach) or {{overflow:auto}} but IMHO, the {{overflow}} methods introduce
some pretty nasty gotchas, especially if you still need to support IE6. In
addition, the overflow clearing methods react very strangely when using
negative margins. Another issue with the {{overflow}} method is that it clips
relatively position elements.
Please also note that there's been some [improvements made to the {{clearfix}}
method|http://perishablepress.com/press/2009/12/06/new-clearfix-hack/].
Ok, that was really long, I apologize. I hope that helps explain my thinking a
bit.
Thanks,
Matt
was (Author: mderting):
Hi Andreas,
In the specific example shown in the screenshot above, adding a {{clear:both}}
rule to {{styles.css}} within the {{.text blockquote}} selector would be
enough. As a starting point, below is an example of the current markup from
the demo-project's [Article with TOC
page|http://demoauthor.magnolia-cms.com/demo-project/about/subsection-articles/large-article.html]
(HTML comments added by me).
{code:xml|title=Text and Image Paragraph in Main, followed by
blockquote|titleBGColor=#FFFFCE}
<div class="text">
...
<!-- START OF TEXT AND IMAGE PARAGRAPH -->
<h2 id="jump2">Second Sub-Heading</h2>
<!-- This element is floated left -->
<dl class="photo">
<dt><img
src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" alt="A metal lamp hanging from the ceiling"
/></dt>
<dd class="zoom"><a
href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" title="Zoom on this image"
rel="showbox">Zoom</a></dd>
<dd class="caption">A metal lamp hanging from the ceiling</dd>
<dd class="copyright">Magnolia International AG</dd>
<dd class="longdesc"><p>A metal lamp hanging from the ceiling in front
of a green wall. </p></dd>
</dl>
<!-- The content of this paragraph has been shortened so that it is not
longer than the floated dl.photo element -->
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es
un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
<!-- The ul has been removed so that the content is not longer than the
floated dl.photo element -->
<!-- END OF TEXT AND IMAGE PARAGRAPH -->
<!-- START OF QUOTED TEXT PARAGRAPH -->
<!-- Currently, no clearing is on this element, the effect shown in the
screenshot will be seen. If we add clear:both to the .text blockquote selector
in styles.css than it will be cleared. However, what happens if it is not a
blockquote element that comes next? -->
<blockquote>
<p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor
separat existentie es un myth. Por scientie, musica, sport etc, litot Europa
usa li sam vocabular.</p>
<p>
<cite>A. Miller</cite>
</p>
</blockquote>
<!-- END OF QUOTED TEXT PARAGRAPH -->
...
</div>
{code}
But we don't always have an element like {{blockquote}} as a hook to attach a
{{clear:both}} rule to. For example if you if we move the Link List Paragraph
at the end of the page up above the {{blockquote}}, we would have the following:
{code:xml|title=Text and Image Paragraph in Main, followed by Link
List|titleBGColor=#FFFFCE}
<div class="text">
...
<!-- START OF TEXT AND IMAGE PARAGRAPH -->
<h2 id="jump2">Second Sub-Heading</h2>
<!-- This element is floated left -->
<dl class="photo">
<dt><img
src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" alt="A metal lamp hanging from the ceiling"
/></dt>
<dd class="zoom"><a
href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" title="Zoom on this image"
rel="showbox">Zoom</a></dd>
<dd class="caption">A metal lamp hanging from the ceiling</dd>
<dd class="copyright">Magnolia International AG</dd>
<dd class="longdesc"><p>A metal lamp hanging from the ceiling in front
of a green wall. </p></dd>
</dl>
<!-- The content of this paragraph has been shortened so that it is not
longer than the floated dl.photo element -->
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es
un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
<!-- END OF TEXT AND IMAGE PARAGRAPH -->
<!-- START OF LINK LIST PARAGRAPH -->
<div class="links">
<h2 id="jump3">Third Sub-Heading - Further Links</h2>
<ul>
<li>
<a
href="/demo-project/about/subsection-articles/article.html">Standard Article</a>
</li>
<li class="download">
<a
href="/demo-project/dms/demo-project/downloads/Magnolia_Flyer_4-0/Magnolia%20Flyer%204.0.pdf">Magnolia
Flyer 4.0 <em>(PDF, 129 KB)</em></a>
</li>
</ul>
</div>
<!-- END OF LINK LIST PARAGRAPH -->
<!-- START OF QUOTED TEXT PARAGRAPH -->
<!-- Currently, no clearing is on this element, the effect shown in the
screenshot will be seen. If we add clear:both to the .text blockquote selector
in styles.css than it will be cleared. However, what happens if it is not a
blockquote element that comes next? -->
<blockquote>
<p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor
separat existentie es un myth. Por scientie, musica, sport etc, litot Europa
usa li sam vocabular.</p>
<p>
<cite>A. Miller</cite>
</p>
</blockquote>
<!-- END OF QUOTED TEXT PARAGRAPH -->
...
</div>
{code}
Notice the Link List is now to the right of the image, and appears to be part
of the Text and Image paragraph. Admittedly, it doesn't look particularly
awful in this case, but was probably not what the author had in mind. If we
add some content to the paragraph, we may also notice that the link list items
wrap around the image, as shown in this screenshot.
!text-image-link-list-screen-shot.png!
To remedy this situation, and many others like it, what I'm proposing is to
contain the Text and Image paragraph in a {{div}} element, and then add class
{{clearfix}} to the container to expand the container around any floated
elements. Without the {{clearfix}} class, the container {{div}} would not
enclose any floated child elements. As can be seen in the example image from
the [original {{clearfix}}
article|http://www.positioniseverything.net/easyclearing.html].
!http://www.positioniseverything.net/articles/images/clear-box.gif!
For other paragraphs that already have a containing element, {{clearfix}} can
be added to their {{class}} attribute to ensure they properly contain any
floated child elements.
In the case of the Text and Image paragraph example we've been using, the
markup would now look like this:
{code:xml|title=Text and Image Paragraph in Main, followed by Link
List|titleBGColor=#FFFFCE}
<div class="text">
...
<!-- START OF TEXT AND IMAGE PARAGRAPH -->
<div class="clearfix">
<h2 id="jump2">Second Sub-Heading</h2>
<!-- This element is floated left -->
<dl class="photo">
<dt><img
src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" alt="A metal lamp hanging from the ceiling"
/></dt>
<dd class="zoom"><a
href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp
with green background 588x368" title="Zoom on this image"
rel="showbox">Zoom</a></dd>
<dd class="caption">A metal lamp hanging from the ceiling</dd>
<dd class="copyright">Magnolia International AG</dd>
<dd class="longdesc"><p>A metal lamp hanging from the ceiling in
front of a green wall. </p></dd>
</dl>
<!-- The content of this paragraph has been shortened so that it is not
longer than the floated dl.photo element -->
<p>Li Europan lingues es membres del sam familie. Lor separat
existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam
vocabular. Li Europan lingues es membres del sam familie. Lor separat
existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam
vocabular.</p>
</div>
<!-- END OF TEXT AND IMAGE PARAGRAPH -->
<!-- START OF LINK LIST PARAGRAPH -->
<div class="links">
<h2 id="jump3">Third Sub-Heading - Further Links</h2>
<ul>
<li>
<a
href="/demo-project/about/subsection-articles/article.html">Standard Article</a>
</li>
<li class="download">
<a
href="/demo-project/dms/demo-project/downloads/Magnolia_Flyer_4-0/Magnolia%20Flyer%204.0.pdf">Magnolia
Flyer 4.0 <em>(PDF, 129 KB)</em></a>
</li>
</ul>
</div>
<!-- END OF LINK LIST PARAGRAPH -->
<!-- START OF QUOTED TEXT PARAGRAPH -->
<!-- Currently, no clearing is on this element, the effect shown in the
screenshot will be seen. If we add clear:both to the .text blockquote selector
in styles.css than it will be cleared. However, what happens if it is not a
blockquote element that comes next? -->
<blockquote>
<p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor
separat existentie es un myth. Por scientie, musica, sport etc, litot Europa
usa li sam vocabular.</p>
<p>
<cite>A. Miller</cite>
</p>
</blockquote>
<!-- END OF QUOTED TEXT PARAGRAPH -->
...
</div>
{code}
And here's a screenshot of how it would be rendered:
!text-image-link-list-screen-shot-fix.png!
Note: This is just one example. There are other approaches to self-clearing
containing elements, such as using {{overflow:hidden}} (which is the current
STK approach) or {{overflow:auto}} but IMHO, the {{overflow}} methods introduce
some pretty nasty gotchas, especially if you still need to support IE6. In
addition, the overflow clearing methods react very strangely when using
negative margins. Another issue with the {{overflow}} method is that it clips
relatively position elements.
Please also note that there's been some [improvements made to the {{clearfix}}
method|http://perishablepress.com/press/2009/12/06/new-clearfix-hack/].
Ok, that was really long, I apologize. I hope that helps explain my thinking a
bit.
Thanks,
Matt
> Text Image Paragraph in article renders incorrectly if text is too short
> ------------------------------------------------------------------------
>
> Key: MGNLSTK-321
> URL: http://jira.magnolia-cms.com/browse/MGNLSTK-321
> Project: Magnolia Standard Templating Kit
> Issue Type: Bug
> Environment: 4.0 RC 4
> Reporter: Boris Kraft
> Assignee: Philipp Bärfuss
> Priority: Minor
> Attachments: Text image paragraph overlay issue.jpg,
> text-image-link-list-screen-shot-fix.png, text-image-link-list-screen-shot.png
>
>
> If you create a new article with a text / Image p and a short text, such that
> the image is left of the text (default), then the following new bar will be
> to the right of the image, not below; as will the subsequent paragraph once
> created. For instance, if you create a quote, it will overly the image of the
> preceding text/image p.
> See attached screenshot.
> I consider this issue minor as an article will normally have more text and
> you can work around it by selecting "image above text".
--
This message is automatically generated by JIRA.
-
If you think it was sent incorrectly contact one of the administrators:
http://jira.magnolia-cms.com/secure/Administrators.jspa
-
For more information on JIRA, see: http://www.atlassian.com/software/jira
----------------------------------------------------------------
For list details see
http://www.magnolia-cms.com/home/community/mailing-lists.html
To unsubscribe, E-mail to: <[email protected]>
----------------------------------------------------------------
