css tips & tricks- it solution in jalandhar
TRANSCRIPT
![Page 1: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/1.jpg)
CSS Tips & Tricks
IT Solution In JalandharBy Virtuous Valley
![Page 2: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/2.jpg)
Images with Captions
HTML doesn't have an element that allows to insert an image with the caption.
But there are many other ways to use such effect, and the following is just one of them.
![Page 3: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/3.jpg)
HTML Coding<div id="captioned_image">
<p><img src="images/Hopetoun_falls.jpg" width="180"
height="135" alt="Hopetoun falls" /></p>
<p>A more steady-state view of nature</p></div>
![Page 4: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/4.jpg)
The CSS style-sheet for formatting:
#captioned_image {
float: right;
width: 28%;
border: 1px silver solid;
margin: 0.5em;
padding: 0.5em;
}
#captioned_image p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
padding: 0;
}
There is one problem here, and that is that the image may be too wide. In this case, the image is 180 px wide and the div is 28% of the surrounding text. So if you make the window narrower, it may be that the image overflows the div.
![Page 5: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/5.jpg)
Couple of ways to fix the problem by IT solution in jalandhar:
Add a minimum width to the div Add a width to the img Edit the size of every image before
inserting into your web page.
![Page 6: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/6.jpg)
Add a minimum width
If you know the width of all images in the document, you can add a minimum width to the div, like min-width: 150px; (in this case we know the minimum width of all images) to the rule div.captioned_image.
Add a image width
Another way is to scale the image itself. Add the following rule:
#captioned_image img { width: 100%;}
![Page 7: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/7.jpg)
Display the caption on top
#captioned_image p { display: table-cell; width: 100%;}
#captioned_image p + p { display: table-caption; caption-side: top;}
![Page 8: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/8.jpg)
Controlled Drop CapsThe technique we use here is the same we used for the image replacement. See the following example code:
#dropcap_n {
display:block;
float:left;
width: 62px;
height:56px;
margin-right:5px;
background-image:url("cssimages/dropcap_n.gif");
background-repeat:no-repeat;
}
#dropcap_n span {display:none;}
The HTML code looks like:
<p><span id="dropcap_n"><span>N</span></span>ature, ....</p>
![Page 9: Css tips & tricks- IT solution in jalandhar](https://reader036.vdocuments.net/reader036/viewer/2022062503/58ecbb121a28abfe628b47b3/html5/thumbnails/9.jpg)
Be In Touch With Virtuous ValleyContact@
+91-9803329610
Website: www.virtuousvalley.com
Facebook: https://www.facebook.com/virtuousvalley/
Twitter: https://twitter.com/virtuousvalley
Google+: ttps
://plus.google.com/u/0/107078111188408241781Pinterest:
https://www.pinterest.com/virtuousvalley/