SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone help with first-letter pseudo class?

    Hi,
    I am having trouble trying to get the first-letter pseudo class to work. My aim at the moment is simply to make the first letter of the two words in my heading larger than the rest of the letter. To do this my html is:

    HTML Code:
    <div class="paragraph_title">
    <em>DANAMAR</em> <em>PRODUCTIONS</em>
    </div>
    And my css is:

    HTML Code:
    .paragraph_title {
    	float:left;
    	margin-top:12px;
    }
    .paragraph_title em {
    	font-size:1.4em;
    	margin-top:12px;
    	font-family:'BodoniSvtyTwoITCTT-BookIta','Bodoni SvtyTwo ITC TT','Times New Roman','serif';
    }
    .paragraph_title em:first-letter {
    	font-size:1.8em;
    }
    However, at the moment the first-letter of the words are no bigger than the rest of the words. If I move the float:left property to the .paragraph_title em class then I do get larger first letters, but then there is a huge space between the two words which I can't get rid of. Does anyone know how I can resolve this?

    Thanks,
    Russ

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way off the top of my head to do it.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
     
    .paragraph_title {
    line-height: 2em;
    font-size: 1em
    }
     
    .first_letter {
    font-size: 2em
    }
    
    </style>
    
    </head>
    <body>
     
    <div class="paragraph_title">
    
         <span class="first_letter">D</span>ANAMAR <span class="first_letter">P</span>RODUCTIONS
    
    </div>
     
    </body>
    </html>

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Rather than using a div and em to simulate a title/heading I think I would just go ahead and use an h-tag for the job.

    Then just follow that up with your p-tags and carry on. All that can be done in one wrapping div with a class so you can reuse it.

    As far as styling the first-letter of the second word, just nest that first letter in a b-tag and group it together with your first-letter styles.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font:100%/1.3 'Times New Roman','serif';
        background:#CCC;
    }
    h1 {
        margin:12px;
        font-size:1.8em;
    }
    .wrap {
        float:left;
        width:450px; /*for demo*/
        margin:12px 0 0;
        background:#FFF;
        text-align:justify;
    }
    .wrap h2 {
        font-size:1.4em;
        margin:0 12px;
        font-family:'BodoniSvtyTwoITCTT-BookIta','Bodoni SvtyTwo ITC TT','Times New Roman','serif';
        text-transform:uppercase;
    }
    .wrap h2:first-letter,
    .wrap h2 b {
        font-size:1.8em;
        color:red;
    }
    .wrap p {
        margin:0 12px 12px;
    }
    </style>
     
    </head>
    <body>
     
    <h1>Danmar Page Title</h1>
     
    <div class="wrap">
        <h2>Danbar <b>P</b>roductions</h2>
        <p>
            Lorem ipsum dolor sit amet consectetuer euismod laoreet et amet id. Ante turpis feugiat nec 
            cursus Phasellus vitae dapibus sodales interdum faucibus. Pellentesque nunc amet condimentum.
        </p>
    </div>
     
    </body>
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! That works a treat, thanks!

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Slater please read the following link, it may help as to why you are having issues: http://reference.sitepoint.com/css/p...nt-firstletter
    Ryan B | My Blog | Twitter


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •