Scribd Logo
Upload

Welcome to Scribd!

  • 33 views

    CSS Tips & Tricks

    Uploaded by

    papu
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CSS Tips & Tricks

    Uploaded by

    papu
    33 views4 pages
    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.

    Original Description:

    css tips

    Original Title

    CSS Tips & Tricks (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    33 views4 pages

    CSS Tips & Tricks

    Uploaded by

    papu
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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