Scribd
Upload
61 views

CSS Tips & Tricks

1. The document discusses different techniques for image replacement and controlled drop caps using CSS, including hiding text with display: none or text-indent and replacing it with background images. 2. One technique described is adding a class or ID to HTML elements and using background images, height, and hiding text to replace element content with images. 3. Controlled drop caps are also demonstrated by floating a styled element containing replaced drop cap text at the start of a paragraph.

Uploaded by

papu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

CSS Tips & Tricks

1. The document discusses different techniques for image replacement and controlled drop caps using CSS, including hiding text with display: none or text-indent and replacing it with background images. 2. One technique described is adding a class or ID to HTML elements and using background images, height, and hiding text to replace element content with images. 3. Controlled drop caps are also demonstrated by floating a styled element containing replaced drop cap text at the start of a paragraph.

Uploaded by

papu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like