2

Website: kancolle.wikia.com/wiki/User:Rimedimichelangelo

Code in use: wiki markup (en.wikipedia.org/wiki/Wiki_markup)

MediaWiki version at the time of writing: MediaWiki version 1.19.24 (community.wikia.com/wiki/Help:MediaWiki)

Wikia built-in extension in use: tabber (community.wikia.com/wiki/Help:Tabber)

Particular constraint: non being able to use 'div style' in wikia as reported by one of the moderators: kancolle.wikia.com/wiki/Thread:390020

Specific Issue: Unlike other "vertical line in html" questions I have searched in Stack Overflow, I would like to place a vertical line between two linked images from the server of my wikia to my wikia profile ( {{name-of-the-image}} ), with the contraint that I cannot assemble HTML "div" with CSS, or Java with HTML and CSS because CSS appears as plain text inside tabber, which is the built-in extension in wikia which I am using.

Story so far:

<div style="border-right:thin solid #FE2E2E: float:right;">
[[Image]]
</div>
[[Image]]

http://imgur.com/idOfmJX

<div style="border-right:thin solid #FE2E2E;">
[[Image]]
</div>
[[Image]]

The line is still too much to the right, but now the height is perfect. http://imgur.com/WmpZ3S4

After changing "border-right" to "align-center" the line completely disappeared.

At this point I searched for the answer in Stack Overflow and tried other things.

[[Image]]
<td style="border-right:1px solid #FE2E2E;padding 5px;" 
[[Image]]
</td>

imgur.com/sz0vo3H

<div style="border-right:thin solid #FE2E2E: float:right;">
[[Image]]
</div>
<td style="border-right:1px solid #FE2E2E;padding 5px;" 
[[Image]]
</td>

imgur.com/5lDy1Eu

<div class="wrapper">
<div>
[[Image]]
</div>
<div class="leftBorder">
[[Image]]
</div>
<div class="clear">
<div>
[[Image]]
</div>
<div class="leftBorder">
[[Image]]
</div>

Line doesn't appear: imgur.com/Fc5VxuY

<hr class="vertical"/>

Line is horizontal: imgur.com/zHpoEp3

Hr with anything CSS invariably results in plain text: imgur.com/UZl1UOO

<hr style="transform: rotate(90deg);" />

Makes a neat and centered line but above the images and no matter where I put the code, I haven't managed to put one the left and one on the right of it: imgur.com/wvCO2Xc

 <hr style="width:0.5px;height:500px;"/>

and:

<hr width="1" size="400">

both add a fixed centered line: imgur.com/a/AdkuL

In conclusion, I would like the short red line I obtained with 

<div style="border-right:thin solid #FE2E2E;">
[[Image]]
</div>
[[Image]]

to be at the center between one image and the other.

Here you can find the gallery of screenshots apart from the first two: imgur.com/a/3JoXx Thank you in advance.

@zgood reminded me of the padding.

{{image on the left}}
<div style="border-left:thin solid #FE2E2E; padding-left:450px;">
{{image on the right}}
</div>

imgur.com/a/cyO7Y

ClimbingHTMLmountain
  • 21
  • 4
  • Can't you just add the border to the image itself? i.e add this style `.tabbertab img { border-right: 1px thin #FE2E2E; padding-right: 5px; }` or is there something I am missing? See [this](http://imgur.com/MaGWYWi) – zgood Feb 01 '16 at 18:26
  • If you meant for me to add a CSS line in a tabber code which displays CSS lines as plain text, I have already tried but I have tried yours just in case and it came out as plain text. However, if you meant for me to add the parameters to the {{image}} designation, I have, but no line appeared. I have, however, forgot to try to add the "padding-right 150 px" to my "div style" code and it centered the image but still left the line fixed to the right. – ClimbingHTMLmountain Feb 01 '16 at 19:50
  • I meant to add the CSS to your stylesheet your site uses. Like `site.css` or `tabber.css` – zgood Feb 01 '16 at 20:13
  • Maybe drafting a vertical centered line is not within the realm of html after all. I will try again after a good night's sleep, thanks! – ClimbingHTMLmountain Feb 01 '16 at 20:41
  • 1
    I can't see any logic to what the site does. Why would `
    ` be displayed as plain text, but `
    ` work fine? So it's probably my lack of knowledge on wikia, but I would try `
    `
     – Mr Lister Feb 01 '16 at 21:56
  • Frigging inline-block. Of course. Thank you. The different 'hr style' results made me laugh for hours. Maybe I shouldn't have picked wikia for my only-HTML web design assignment. If you wish to see the result(s) of your advice, here are some links: http://imgur.com/a/mvyot - http://imgur.com/a/5RdOl - http://imgur.com/a/up0DO - http://imgur.com/a/Dm3dh – ClimbingHTMLmountain Feb 02 '16 at 22:17

0 Answers0