CSSTips&Tricks(1)

Imageswithcaptions
HTMLdoesn'thaveanelementthatallowstoinsertanimagewitha
caption.Buttherearemanywaystorealizesucheffect,andthe
followingisjustoneofthem.
<divid="captioned_image">
<p><imgsrc="images/Hopetoun_falls.jpg"width="180"
height="135"alt="Hopetounfalls"/></p>
<p>Amoresteadystateviewofnature</p>
</div>

TheCSSstylesheetforformatting:
Amoresteadystateviewofnature
#captioned_image{
float:right
width:28%
border:1pxsilversolid
margin:0.5em
padding:0.5em
}

#captioned_imagep{
textalign:center
fontstyle:italic
fontsize:smaller
textindent:0
padding:0
}

Thereisoneproblemhere,andthatisthattheimagemaybetoowide.Inthiscase,theimageis180px
wideandthedivis28%ofthesurroundingtext.Soifyoumakethewindownarrower,itmaybethatthe
imageoverflowsthediv(tryit!).

Coupleofwaystofixtheproblem:

addaminimumwidthtothediv
addawidthtotheimg
editthesizeofeveryimagebeforeinsertingintoyourwebpage(notsowelcomed).

Addaminimumwidth
Ifyouknowthewidthofallimagesinthedocument,youcanaddaminimumwidthtothediv,likemin
width:150px(inthiscaseweknowtheminimumwidthofallimages)totherule
div.captioned_image.

Addaimagewidth

Anotherwayistoscaletheimageitself.Addthefollowingrule:
#captioned_imageimg{
width:100%
}

Displaythecaptionontop
#captioned_imagep{
display:tablecell
width:100%
}

#captioned_imagep+p{
display:tablecaption
captionside:top
}

Exercisefiles:clickhere.

ImageReplacement
YouhavethefollowingHTML:
<div>
<span>Welcome</span>
</div>

Oryouhavethis:
<h1>Welcome</h1>

Andyouwanttoshowanimageinsteadofshowingthetext"Welcome",let'ssayanimageofthetext
"Welcome"writteninafancyfontface.Forexample:

Thereareseveralwaysofdoingthis.Hereisoneway:
div#welcomeImg{
background:url("cssimages/welcome.gif")norepeat
height:42px
}

#welcomeImgspan{display:none}

ThenyourHTMLcodeshouldbemodifiedas:
<divid="welcomeImg"><span>Welcome</span></div>

Thedeclarationblockdisplay:noneinsidethespanrulemakesanythingplacedinsidespandisappear.

Exercise:Ihave3different<h1>headers,
<h1>Home</h1>
<h1>Demo</h1>
 <h1>Tour</h1>

andIwanttospecifydifferentimagesfordifferentheadersusingimagereplacement
technique.IhavethepartoftheimagereplacementCSSasfollowing:
h1.imgReplace{
height:<YOUSPECIFYTHEHEIGHT>
backgroundrepeat:norepeat}
h1.imgReplacespan{
display:none}

Ihaveimageshome_icon.gif,demo_icon.gif,andtour_icon.gif.Iwanttoreplacethe
text"Home"withhome_icon.gif,andsoonsoforth.IneedtobothchangemyXHTML
codelittlebit(maybeaddidorclassattributesto<h1>tag)andwriterestofmyCSS.
PleasehelpmewriterestofCSSforimplementingtheimagereplacement,andthenecessary
modificationtocurrentXHTMLcodetoimplementtheimagereplacementeffect.

Filesprovidedtoyou:exer1.zip

Thinkaboutit,whydoweneedimagereplacement.Giveafewexampleofpossibleusage
forimagereplacement.

Otherimagereplacementtechniques
Thefollowingmethodeliminatesthespanbysettingheightoftheparentelementto0andoverflowto
hidden,whichhidesthetext.Thenitusestoppaddingtoforcetheelementtotheheightoftheimagein
thebackground.
#ID_OF_ELEMENT{
padding:HEIGHT_OF_IMAGEpx000
overflow:hidden
backgroundimage:url("URL_OF_THE_IMAGE")
backgroundrepeat:norepeat
height:0px!important/*formostbrowsers*/
height/**/:HEIGHT_OF_IMAGEpx/*forIE5.5'sbadboxmodel*/
}

ReplacetheID_OF_ELEMENT,HEIGHT_OF_IMAGE,andURL_OF_THE_IMAGEwith
correspondingid,heightvalueofimage,andimageurlinyourcase.

ThefollowingmethodusestheCSStextindentpropertytoshiftcontainedtextoutsidethevisible
elementwindow.
#ID_OF_ELEMENT{
textindent:9999px
overflow:hidden
}

ReplacetheID_OF_ELEMENTwiththeidoftheelementyouwanttoapplythisimagereplacement
techniuqefor.

ControlledDropCaps

Inthefollowingexamplethefirstletter"N"oftheword"Nature"isreplacedbyanimageof"N"ina
nicefontfaceandbiggerfontsize.

ature, in the broadest sense, is equivalent to

the natural world, physical universe, material
world or material universe. "Nature" refers to
thephenomenaofthephysicalworld,andalsotolifein
general. The term generally does not include
manufactured objects and human interaction unless
qualified in ways such as, e.g., "human nature" or "the
wholeofnature".Natureisalsogenerallydistinguished
from the supernatural. It ranges in scale from the
subatomictothegalactic.

Thetechniqueweusehereisthesameweusedfortheimagereplacement.Seethefollowingexample
code:
#dropcap_n{
display:block
float:left
width:62px
height:56px
marginright:5px
backgroundimage:url("cssimages/dropcap_n.gif")
backgroundrepeat:norepeat
}
#dropcap_nspan{display:none}

TheHTMLcodelookslike:
<p><spanid="dropcap_n"><span>N</span></span>ature,....</p>

Exercisefiles:exer2.zip

2007MehmudAbliz