Infobox and Alignment

summary:

Can't seem to get the text to wrap around an infobox!

Infobox and Alignment

trudy 1210866658|%e %b %Y, %H:%M %Z|agohover

Using the code I found here, I tried to make an infobox using the following code:

[[div style="float:right;text-size:80%;margin-left:1%width:35%"]]
||||~ CHARACTER NAME ||
|||| [[=image http://imageurlhere.com/image.jpg]] ||
||||~ IC Information ||||
||~ Full Name ||  FULL NAME HERE ||
||~ Gender || GENDER HERE ||
||~ Age || AGE HERE ||
||~ Species || SPECIES HERE ||
||~ Height || HEIGHT HERE ||
||~ Build || BUILD HERE ||
||~ Eye Color || EYE COLOR HERE || 
||~ Hair Color || HAIR COLOR HERE ||
[[/div]]
TEXT HERE

However, I can't seem to get the text to wrap around the table no matter where I place it. Am I doing something wrong? Your suggestions are greatly appreciated.

last edited on 1210869618|%e %b %Y, %H:%M %Z|agohover by trudy + show more

Re: Infobox and Alignment

strathview 1210873645|%e %b %Y, %H:%M %Z|agohover

I couldn't find an easy solution though I hope someone proves me wrong. But you can wrap text around an image. So what I did with your infobox was to take a screenshot of the screen, crop the stuff out of it that I didn't want so just the table was kept, then save and upload that as a file. The result is at http://rbmp.wikidot.com/sandbox and as you can see the text does now wrap round the infobox. The downside is that if the data in the info box needs to change then you have to re-do the saving, graphics manipulation and uploading, but it is one solution and I hope it helps.

Rob

Re: Infobox and Alignment

Brunhilda 1210877510|%e %b %Y, %H:%M %Z|agohover

Try this, I use this for photos like here

[[div style="float:right; margin:0 2em 1em 2em; width:250px; border:0;"]]
||||~ CHARACTER NAME ||
|||| [[image URL of the photo width="250px"]] ||
||||~ IC Information ||||
||~ Full Name || FULL NAME HERE ||
||~ Gender || GENDER HERE ||
||~ Age || AGE HERE ||
||~ Species || SPECIES HERE ||
||~ Height || HEIGHT HERE ||
||~ Build || BUILD HERE ||
||~ Eye Color || EYE COLOR HERE ||
||~ Hair Color || HAIR COLOR HERE ||
[[/div]]TEXT HERE IF YOU WANT TO BE LEVELED WITH THE TOP OF THE BOX

This one is if you want to put the infobox on the right side, To put it on the left side of hte page, then just margin part is changed: you should put everything the same except margin:0 3em 1em 0; and of course, float:left.

It is also very important to have the same width number for the div frame and for the picture. Note that I put 250px in both. If you want to change the size, change in both places, or else the photo will go to one side…

On the other hand, Why don't you try to make some real infoboxes? The layer is a little bit complicated, but once you do it, you only have to put your template… Look. Look the source of thi s page, for example…

http://istorijska-biblioteka.wikidot.com/infobox:bitka

This is what you actually have to put in your article:

http://istorijska-biblioteka.wikidot.com/forum/t-54510/infobox:bitka

And this is how it looks like finished:

http://istorijska-biblioteka.wikidot.com/art:kosovska-bitka

Other types of infoboxes you have here:
http://istorijska-biblioteka.wikidot.com/system:list-all-pages

Click the last but one tab.

last edited on 1210878068|%e %b %Y, %H:%M %Z|agohover by Brunhilda + show more

Re: Infobox and Alignment

trudy 1210900496|%e %b %Y, %H:%M %Z|agohover

Thank you guys! Brunhilda, your solution worked perfectly!

Re: Infobox and Alignment

Brunhilda 1210935299|%e %b %Y, %H:%M %Z|agohover

I'm glad that I could be of help! ;)