Posted by Brunhilda on 03 Jun 2008 09:48, last edited by gerdami on 02 Jun 2010 10:18
To put pictures inside the text and to align them to the left side or right side of the text, aligning it also withe the text was almost impossible task for me. But with a "little help of my wikidot friends", we came to this solution. Thank you guys! :)
To align the picture to the RIGHT side of the page:
[[div style="float:right; margin:0 2em 1em 2em; width:300px; border:0;"]]
|||| [[image URL of the picture width="300px"]] ||
||||~ ^^TEXT under the picture^^ ||
[[/div]]Start the text HERE if you want to have the text and the photo at the same level.
In action:
| Boudica, Icenian queen |
|---|
Her husband, Prasutagus, an Icenian king who had ruled as a nominally independent ally of Rome, left his kingdom jointly to his daughters and the Roman Emperor in his will, but when he died his will was ignored, possibly because the Romans, unlike the Britons, did not recognise daughters as heirs. The kingdom was annexed as if conquered, Boudica was flogged and her daughters raped, and Roman financiers called in their loans.
To align the picture to the LEFT side of the page:
[[div style="float:left; margin:0 3em 1em 0; width:300px; border:0;"]]
|||| [[image URL of the picture width="300px"]] ||
||||~ ^^TEXT under the picture^^ ||
[[/div]]Start the text HERE if you want to have the text and the photo at the same level.
In action:
| Boudica, Icenian queen |
|---|
Her husband, Prasutagus, an Icenian king who had ruled as a nominally independent ally of Rome, left his kingdom jointly to his daughters and the Roman Emperor in his will, but when he died his will was ignored, possibly because the Romans, unlike the Britons, did not recognise daughters as heirs. The kingdom was annexed as if conquered, Boudica was flogged and her daughters raped, and Roman financiers called in their loans.
Notes
- If you want to change the size of the picture, it is very important to change BOTH picture and table size parameter. The numbers have to be always the same. If not, the picture will go to the left or to the right and it won't be centered inside the table.
- Text format under the picture can be changed.
| ~ ^^Boudica, Icenian queen^^ | Boudica, Icenian queen |
|---|---|
| ~ Boudica, Icenian queen | Boudica, Icenian queen |
| ^^Boudica, Icenian queen^^ | Boudica, Icenan queen |
| Boudica, Icenian queen | Boudica, Icenian queen |
- Note that margin parameters are also different: left: margin:0 3em 1em 0; and right is margin:0 2em 1em 2em; This is necessary for aligning the picture table with the text to the left or to the right. If you use left parameters for right position, or vice versa, the alignment of the picture and the text is gone!
- If you want to justify the text as in my examples, the opening text align sign ([[==]]) should be put in front of the picture table.
Other solutions
Author
Brunhilda. Please visit his/her userPage.
The example used in this entry has a caption of only one line. If one wanted to format a multi-line caption underneath a photo, how would one do it? I tried table, but the visibility of the grids complicates things (never mind having some cells centered and others aligned left). I tried embedded divs, but that didn't get me very far.
Many thanks.
david
Please stop spamming:
This is you, asking about the same problem in four (4) other places, other than this one:
You have asked the same question over and over, in numerous different places, and are not responding to the original threads. It is impossible for anyone to help you out this way. You've done it before… please only post in one place… if it's anywhere on the community site, we will see it , and we'll help you out regardless of whether it's in the right place or not.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)