Captions
Few days ago I tried to create captions. Unexpectedly it appeared to be more difficult then I thought ;). So below there are few solutions I created/found with examples :).
IMAGE and CAPTION in a TABLE
(inspired with this thread )
In code view I wrote:
<table style="text-align: left; width: 270px; float: left" border="0" class="">
<tr>
<td style="text-align: center; width: 270px" class=""><img src="http://www.nietoperzka.com/wptraining/wp-content/uploads/2007/06/church.JPG" alt="church.JPG" /></td>
</tr>
<tr>
<td style="text-align: left; width: 270px; color: #3674d2; font-size: 8px" class=""><strong><em>Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia</em></strong></td>
</tr>
</table>
And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below?<div style=clear:both;></div>
And that’s what I got:
 |
| Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia |
And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below?
CAPTION as part of STYLE.CSS inspired with Donna’s blog:
In style.css I added:
.caption
{
text-align: left;
margin: 5px;
padding: 5px;
font-style: italic;
font-size:90%;
color: #6699e7;
}
In code view:
<p class="caption" style="width: 270px"><img SRC="http://www.nietoperzka.com/wptraining/wp-content/uploads/2007/06/church.JPG" ALT="church.JPG" /></br>Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia</p>And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below? In this case should be BELOW.
Result:
Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia
And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below? In this case should be BELOW.
One more time -> to have text wrapped around image (text takes LESS place then image)
In code view:
<p class="caption" style="width: 270px; float: left"><img src="http://www.nietoperzka.com/wptraining/wp-content/uploads/2007/06/church.JPG" alt="church.JPG" /></br>Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia</p><p>And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below? In this case should be NEXT TO.</p><div style=clear:both;></div>
Result:
Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia
And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below? In this case should be NEXT TO.
And one more time -> to have text wrapped around image (text takes MORE place then image)
In code view:
<p class="caption" style="width: 270px; float: left"><img src="http://www.nietoperzka.com/wptraining/wp-content/uploads/2007/06/church.JPG" alt="church.JPG" /></br>Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia</p><p>And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below? In this case should be NEXT TO and BELOW (...)
Result:
Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia
And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below? In this case should be NEXT TO and BELOW.
Church of Peace in Jawor is one of three (two only still exist) built as a result of Westfal Peace Agreement that ended the Thirty-Years War (1618 – 1648). Catholic tsar Ferdinand Habsburg the Third gave permission to Lutherans in Silesia Province to built three churches.
There were additional rules regulating that permission:
- buildings had to be erected using only no-permanent materials like wood, sand, clay, straw
- churches had to be erected outside city borders but not further then cannon shot from city walls
- no towers and carillons were allowed
- had to be finished within one year from the date erection began
- Protestant had to pay all expenses
22nd June 2007 4 comments
There is mysterious thing with: <div style=clear:both;></div>
1) that code need to be used when you want to wrap text around image and that text takes LESS space then image itself; when text is longer and will ‘drop’ below picture as well -> you can (actually should) skip that code
2) when you add it in code view and save -> you won’t see it there anymore
3) even don’t try to check if it is there! I really don’t understand why any further changes in post result in DISAPPEARING of that piece of code….
BUT…
If your post is ready (REALLY READY) just add that code in place you need (->after text that will wrap image but which is too short to go also below it) and SAVE. That’s all. Don’t touch it!!!!
K.
PS. Found solution, have a look here.
Zamiast tworzyć pusty znacznik div, możesz dodać do pliku stylów klasę:
.clear { clear:both; }i dodawać ją do paragrafu, od którego ma się skończyć okalanie elementów pływających:
treśćOj, wcieło kod, miało być: (p class=”clear”)treść(/p)
oczywiście mają być “dziubki” zamiast nawiasów
Hmm… a ja sie zastanawiałam, jak wykorzystać klasę:
.clear {
clear:both;
height:20px;
}
którą mam w moim style.css…
Nowa lekcja przyswojona i gotowa do wykorzystania następnym razem :D.