User:Eabrace/Sandbox

Experiments

Experiment #1

Question:

Can a wikitable be created with a background image?

CSS for background images:

background-image:url('<image>')

Test image:

Test table code:

{| style="width:75%; height:200px; background-image:url('http://img.photobucket.com/albums/v623/cohosi/badges/OSI_ID.jpg')" border="1"
|-
|Test
|}

Test table:

Test

Test table code (without background image specification):

{| style="width:75%; height:200px" border="1"
|-
|Test
|}

Test table:

Test

Suggestion from Titan forums

<table style="background: url(http://img.photobucket.com/albums/v623/cohosi/badges/OSI_ID.jpg) center center no-repeat transparent;width:450px;height:320px;border: solid 1px #000000;border-collapse: collapse;">
  <tr>
    <td>sd54f6s5df4
    s5df4s6d5f4<br /><br /><br /><br />S4d6f5</td>
  </tr>
</table>

sd54f6s5df4 s5df4s6d5f4 S4d6f5

Removing background image from code:

<table style=";width:450px;height:320px;border: solid 1px #000000;border-collapse: collapse;">
  <tr>
    <td>sd54f6s5df4
    s5df4s6d5f4<br /><br /><br /><br />S4d6f5</td>
  </tr>
</table>

sd54f6s5df4 s5df4s6d5f4 S4d6f5

Conclusion:

It would appear that wikitables do not allow background images. Either that or this just isn't the right way to make it work. Based on the loss of size formatting in the first table, it would seem that inserting the background image specification invalidates the entire style spec.

Further reading from outside sources indicates that MediaWiki invalidates style tags with "url" components.

Experiment #2

Using an HTML table with wiki images.

B. Samson DIRECTOR Date of Activation: 2004 DEC 06 @B Samson

Experiment #3

Line spacing between badge rows using CSS font-size and line-height properties.

Experiment #4

Using Div tags to create an overlay.

B. Samson
DIRECTOR

Date of Activation: 2004 DEC 06
@B Samson

The upper half of the content (character image and info) are disappearing. It appears that they are being slid behind the background image instead of appearing on top of it.

In fact, if I substitute in a different image:

B. Samson
DIRECTOR

Date of Activation: 2004 DEC 06
@B Samson

It's more obvious who's obscuring who.

This probably isn't helping, though:

B. Samson
DIRECTOR

Date of Activation: 2004 DEC 06
@B Samson

Those two sections should be bound within a 375 pixel container. Instead, they are being forced to the outer right and left margins.

Floating the entire container to the right:

B. Samson
DIRECTOR

Date of Activation: 2004 DEC 06
@B Samson

The left side should be 160 pixels wide with the image centered. The image is 86 pixels wide, which should leave 74 pixels for margin, 37 on each side. Instead, the image is pressing right up against the right side content.

Adding the badge icons on the bottom provides an anchor for the margins of the container, but shouldn't be required as the width is already specified in the container's definition.

B. Samson
DIRECTOR

Date of Activation: 2004 DEC 06
@B Samson

Very frustrating. Time to take a break.

Experiment #5

Combining div tags with an HTML table.

B. Samson DIRECTOR Date of Activation: 2004 DEC 06 @B Samson

That appears to work, but the final parsed HTML produces a lot of extra <p> tags that I think are causing some slight differences in how I want the content to lay out and how it actually does lay out. I suspect I can do something about that, but that it will make the markup even more difficult to read/maintain than it already is.