Help:How to fix bunched-up edit links: Difference between revisions

Browse history interactively ← Previous edit Next edit →Content deleted Content addedVisual WikitextInline

Revision as of 13:28, 5 May 2007 editFabartus (talk \| contribs)Extended confirmed users21,651 edits Heading para in examples with tips← Previous edit		Revision as of 13:30, 5 May 2007 edit undoFabartus (talk \| contribs)Extended confirmed users21,651 edits →Using a floated div: ++{unclear\|"below" has no reference to text... please give context and defs for the technically handicapped!}Next edit →
Line 31:		Line 31:
	This method has the advantage of not visibly changing anything in the article; the resulting appearance is almost identical to the original, with the only differences being that the section edit links flow naturally as expected, instead of ending bunched up to the left of the last image, slightly different spacing between the images, and a slightly different margin size. It also has the advantage of being possible to do mechanically (either with a ] or manually). However, it can only be used when the images have identical width (usually happens when all are either <code>\|thumb\|</code> or a fixed size in px, and all are more wide than tall; can also happen when thumbnails are not used).		This method has the advantage of not visibly changing anything in the article; the resulting appearance is almost identical to the original, with the only differences being that the section edit links flow naturally as expected, instead of ending bunched up to the left of the last image, slightly different spacing between the images, and a slightly different margin size. It also has the advantage of being possible to do mechanically (either with a ] or manually). However, it can only be used when the images have identical width (usually happens when all are either <code>\|thumb\|</code> or a fixed size in px, and all are more wide than tall; can also happen when thumbnails are not used).

	To do this, first remove any <code>\|right\|</code> from the images, and add a <code>\|none\|</code> to them (this stops them from floating). Then wrap them in '''<code><nowiki><div style="float: right; clear: right">...</div></nowiki></code>''' (this makes them float together, and ''also puts them '''below any other right float''' instead of to the left of it''; it's also what's normally used for the right-floated images). See ] for an example.		To do this, first remove any <code>\|right\|</code> from the images, and add a <code>\|none\|</code> to them (this stops them from floating). Then wrap them in '''<code><nowiki><div style="float: right; clear: right">...</div></nowiki></code>''' (this makes them float together, and ''also puts them '''below any other right float''' {{unclear\|"below" has no reference to text... please give context and defs for the technically handicapped!}} instead of to the left of it''; it's also what's normally used for the right-floated images). See ] for an example.

	== Using a floated table ==		== Using a floated table ==

Revision as of 13:30, 5 May 2007

Shortcut

]

When you have a long strip of right floated images together with a number of sections, it usually causes the section editing for the sections which start after the first image and on the screen start before the last image to bunch up to the left of the last image (see Example 1). Template:TOCnestright This causes several problems:

It often partially overlaps with the text, making it harder to read.
It makes it harder to actually use section editing, sometimes causing edit tabs to intermingle sans clear pattern, or do so awkwardly, and worse, this typically varies browser to browser.

also

It's ugly to some, or the way things should render to others.

There are several ways to either avoid or work around this and similar issues, as is discussed below.

Clearing the floats

This can be done if there is no problem adding extra whitespace before the next section (for instance, because the problem only shows in uncommon font sizes, or if the images are logically attached to sections). This can be accomplished by adding an element with either of the CSS properties: clear: both or clear: right before the next section. An easy way to do it is to use the template {{clear}} , preferentially using {{subst:clear}}.

Moving the images around

When the article is long enough, it's possible to spread the images around, instead of having them together. It's also possible to make some of the images float left instead of right. This often is enough to fix the issue, and generally results in a prettier article.

Using a gallery

When you have too many images, it might make sense to move some or most of them to a gallery. However, while this avoids the issue, it has issues of its own (for instance, the captions can be small to the point of being unreadable in some cases, and the image size is fixed).

Removing some of the images

It might be a good idea to question yourself whether all these images are really necessary. The images are supposed to be to illustrate the subject, not to turn an article into a gallery. If images are too dense, but none of them warrant removal, it may mean that the article needs to be expanded. The ideal solution might be to create a page or category combining all of them at Wikimedia Commons and use a relevant template ({{commons}}, {{commonscat}}, {{commons-inline}} or {{commonscat-inline}}) and link to it instead,so that further images are readily found if the article is expanded.

Using a floated div

This method has the advantage of not visibly changing anything in the article; the resulting appearance is almost identical to the original, with the only differences being that the section edit links flow naturally as expected, instead of ending bunched up to the left of the last image, slightly different spacing between the images, and a slightly different margin size. It also has the advantage of being possible to do mechanically (either with a bot or manually). However, it can only be used when the images have identical width (usually happens when all are either |thumb| or a fixed size in px, and all are more wide than tall; can also happen when thumbnails are not used).

To do this, first remove any |right| from the images, and add a |none| to them (this stops them from floating). Then wrap them in <div style="float: right; clear: right">...</div> (this makes them float together, and also puts them below any other right float

This "below" has no reference to text... please give context and defs for the technically handicapped! may be confusing or unclear to readers. Please help clarify the "below" has no reference to text... please give context and defs for the technically handicapped!. There might be a discussion about this on the talk page. (Learn how and when to remove this message)

instead of to the left of it; it's also what's normally used for the right-floated images). See Example 2 for an example.

Using a floated table

This method shares many of the advantages and disadvantages of using a floated div; the resulting code is also slightly harder to read. It also works in some situations where a floated div doesn't (for instance, if your problem is not with images, but with infoboxes—which is perhaps the more common and serious problem).

To do this, first remove any |right| from the images, and add a |none| to them (this stops them from floating). Then put them in a table, giving it the following style attribute: style="float: right; clear: right" (this makes the table float, and also puts it below any other right float instead of to the left of them; it's also what's used for the right-floated images). See Example 3 for an example.

Using a stacking template

The templates Template:ImageStackRight(edit talk links history) and Template:ImageStackLeft(edit talk links history) are applications of the two methods above. The syntax is the following:

{{ImageStackFoo|width|]}}
or more commonly something like:
{{ImageStackFoo|width|]]]]}}
(Use the links in the {{tl|lts}} above to see some applied examples)
ImageStackRight code:
<div style="float:right; clear:right;<!--
  -->border:none; width:{{{1}}}px;<!--
  -->margin: 0 0 1em 1em; padding:0"><!--
  -->{{{2}}}</div>

When using the templates, be careful to use a width larger than that of the images, so maintain the same margin around them.

Examples

Example 1

This example will demonstrate that the images on the right and sections on the right create rendering issues for each other. This manifests opposite the top edge of the bottom image where the three section edit links line up like this: Template:I

]
]
]

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 2

Section 3

Example 2

Demonstrates placing the recommended div style block around the images will allow the bunched to float to the proper places on their respective section headings.

Note-: This a common problem with long infoboxes, particularly in 'Battle of ___' articles pages where two stacked templates create a similar boxed problem. The problem occasions also when an image follows an infobox in other sorts of articles. This technique can be used to clear those situations in many cases. (i.e. assume the template calls are two of the images of the example-- and HTML element is an HTML element is an HTML is an...)

<div style="float: right; clear: right; margin-left: 1.4em">
]
]
]
</div>

Section 1

Section 2

Section 3

Example 3

Example uses a wikitable format, where the width parameter can be left to default to auto, or specified in the style line (not shown).

Tip: If the HTML element being enclosed is an local infobox in table format (Code will begin with {| vice {{) then the '{|' must begin on the line following the pipe of the table.

{| style="float: right; clear: right; background-color: transparent; margin-left: 1.4em"
| ]
|-
| ]
|-
| ]
|}

Revision as of 13:28, 5 May 2007 editFabartus (talk \| contribs)Extended confirmed users21,651 edits Heading para in examples with tips← Previous edit		Revision as of 13:30, 5 May 2007 edit undoFabartus (talk \| contribs)Extended confirmed users21,651 edits →Using a floated div: ++{unclear\|"below" has no reference to text... please give context and defs for the technically handicapped!}Next edit →
Line 31:		Line 31:
	This method has the advantage of not visibly changing anything in the article; the resulting appearance is almost identical to the original, with the only differences being that the section edit links flow naturally as expected, instead of ending bunched up to the left of the last image, slightly different spacing between the images, and a slightly different margin size. It also has the advantage of being possible to do mechanically (either with a ] or manually). However, it can only be used when the images have identical width (usually happens when all are either <code>\|thumb\|</code> or a fixed size in px, and all are more wide than tall; can also happen when thumbnails are not used).		This method has the advantage of not visibly changing anything in the article; the resulting appearance is almost identical to the original, with the only differences being that the section edit links flow naturally as expected, instead of ending bunched up to the left of the last image, slightly different spacing between the images, and a slightly different margin size. It also has the advantage of being possible to do mechanically (either with a ] or manually). However, it can only be used when the images have identical width (usually happens when all are either <code>\|thumb\|</code> or a fixed size in px, and all are more wide than tall; can also happen when thumbnails are not used).

	To do this, first remove any <code>\|right\|</code> from the images, and add a <code>\|none\|</code> to them (this stops them from floating). Then wrap them in '''<code><nowiki><div style="float: right; clear: right">...</div></nowiki></code>''' (this makes them float together, and ''also puts them '''below any other right float''' instead of to the left of it''; it's also what's normally used for the right-floated images). See ] for an example.		To do this, first remove any <code>\|right\|</code> from the images, and add a <code>\|none\|</code> to them (this stops them from floating). Then wrap them in '''<code><nowiki><div style="float: right; clear: right">...</div></nowiki></code>''' (this makes them float together, and ''also puts them '''below any other right float''' {{unclear\|"below" has no reference to text... please give context and defs for the technically handicapped!}} instead of to the left of it''; it's also what's normally used for the right-floated images). See ] for an example.

	== Using a floated table ==		== Using a floated table ==

Misplaced Pages