SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Strategy for styling disparate content

    I could use some help with coming up with a strategy to more easily style disparate content in my Slide-Show which consists of 3-4 slides.

    The purpose of the Slide-Show is to display specific content that causes people to think or act. It is usually short and to the point. And I use lots of different formatting (e.g. LARGE and small fonts, bold, italics, and underlining) to draw attention to key points!!


    The problem is that each line usually has it's own style. (In fact, certain words in a line may have their own style too?!)

    For example...
    Think that BIG BUSINESS runs America??

    You might be interested to know that...
    * There are an estimated 29.6 million small businesses in the U.S.
    * Small Businesses employ roughly 50% of the private sector
    * Small Businesses represent 99.7% of all employer firms in the U.S.

    The reality is that Small Business is the heart-beat of America!!
    Last night I tried to style a slide similar to this using your standard <p> styles, but it soon became clear that this was a problem.

    I ended up creating a bunch of classes and used some SPANs, but I just don't feel satisfied and that I have an easy way to manage things.

    Hopefully you guys follow what I'm getting at, and can offer a more standardized approach to managing my styles and markup.

    Thanks,


    Debbie

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Why are you doing a presentation slide show in HTML?

    If you want something that's available online, there's a few online services like:

    • authorSTREAM
    • Docstoc
    • Google Docs
    • Prezi
    • Scribd
    • wePapers

    But yes, if you're wildly changing styles within a paragraph of text, <span> with a class defined is the best option.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Say you have 3 slides. Each in a div. Give each div an id (#slide1, #slide2, #slide3). Then you say...

    #slide1 p span {}

    and

    #slide2 h2 span.dif {}

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Force Flow View Post
    Why are you doing a presentation slide show in HTML?
    Because it is free, accessible, and looks damn good thanks to Rayzur adn Paul O'!!


    But yes, if you're wildly changing styles within a paragraph of text, <span> with a class defined is the best option.
    Do SPANs have to be encapsulated in something like a <p>??


    Debbie

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Say you have 3 slides. Each in a div. Give each div an id (#slide1, #slide2, #slide3). Then you say...

    #slide1 p span {}

    and

    #slide2 h2 span.dif {}
    I guess I was being dumb this early a.m. and forgot to tap into using #slide1, #slide2, #slide3 and so on...


    Also, I was/am confused if it is better to make one-off styles that don't ever get used again, e.g.

    #slide1 p{red bold 24pt Georgia}

    or if I should create reusable classes, e.g.

    .redText, .largePrint, etc

    and then chain things together?!


    Debbie

  6. #6
    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)
    And I use lots of different formatting (e.g. LARGE and small fonts, bold, italics, and underlining) to draw attention to key points!!
    Those text formatting styles you mention there can actually be used by the elements that represent them.

    <big>
    <small>
    <b>

    I would not use <u> though as it is deprecated. However where you are wanting that underline in your example I would just use and style a <b> tag since it would slide in that bold sentence just fine and then just style text-decoration to it.

    Using those elements I only need to add one span to do everything that your example requests.
    (it could actually be a <big> tag also, like shown in the H2)

    This example uses a div as the parent but in your case it would be the LI, your slides are list-items with ID's on them.

    In this standalone example I really did not need the .bold class on the <p>, it's just there to show how to style it by itself without conflicting with other <p> tags that may be in there.

    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.2 arial;
    }
    div {
        width:600px;
        margin:0 auto;
        padding:15px;
        background:#EEF;
    }
    div h2 {
        margin:0;
        font:1.1em/1.2 arial;
    }
        div h2 big {
            font-size:115%;
            text-transform:uppercase;
        }
        div h2 small {
            display:block;
            margin:10px 0 0;
            font-size:80%;
        }
    div li {
        font-style:italic;
    }
    div p.bold {
        font:bold .9em/1.2 arial;
    }
        div p.bold span {
            font-size:130%;
            text-transform:uppercase;
        }
        div p.bold b {
            text-decoration:underline;
        }
    </style>
     
    </head>
    <body>
     
    <div>
        <h2>
            Think that <big>Big Business</big> runs America??
            <small>You might be interested to know that...</small>
        </h2>
        <ul>
            <li>There are an estimated 29.6 million small businesses in the U.S.</li>
            <li>Small Businesses employ roughly 50% of the private sector</li>
            <li>Small Businesses represent 99.7% of all employer firms in the U.S.</li>
        </ul>
        <p class="bold">The reality is that <span>Small Business</span> is the <b>heart-beat</b> of America!!</p>
    </div>
     
    </body>
    </html>

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Rayzur,

    You never cease to amaze me!

    A very unique - and much more organized - approach than I was hacking out at 2:00a.m. this morning!

    I'm really beat tonight but will pick up on your code tomorrow.

    Thanks for once again helping me to grow with my HTML and CSS!


    Debbie

  8. #8
    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)
    Glad you found it helpful!

    The only thing I might do different would be to replace that <span> with a <big>. Just adjust the CSS according to the tag name.

    Then I would add a <br> tag in the H2, those two changes would keep the highlights pointed out with CSS turned off.

    Code:
    <div>
        <h2>
            Think that <big>Big Business</big> runs America??<br>
            <small>You might be interested to know that...</small>
        </h2>
        <ul>
            <li>There are an estimated 29.6 million small businesses in the U.S.</li>
            <li>Small Businesses employ roughly 50% of the private sector</li>
            <li>Small Businesses represent 99.7% of all employer firms in the U.S.</li>
        </ul>
        <p class="bold">The reality is that <big>Small Business</big> is the <b>heart-beat</b> of America!!</p>
    </div>
    That leaves you with the ability to still slip a generic span in there if needed for additional styling.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Just remember a basic GRAPHIC DESIGN rule, over emphasizing or over differentiating is the same as not differentiating at all. This actually works semantically as well if everything is is an h3 or an EM or STRONG... then nothing stands out either for for search engines.. but I digress.

    If you must insist in making your content look like a tag cloud, us the same strategy: dedicate a segment of your style sheet to "styling spans" and then apply siad spans as you see fit...

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Just remember a basic GRAPHIC DESIGN rule, over emphasizing or over differentiating is the same as not differentiating at all. This actually works semantically as well if everything is is an h3 or an EM or STRONG... then nothing stands out either for for search engines.. but I digress.
    You are right, and that is a problem of mine for which there is likely no cure?!

    (Then again, have you never been to the circus as a child, and seen how they do the same eye-grabbing styling that I am guilty of?!)


    If you must insist in making your content look like a tag cloud, us the same strategy: dedicate a segment of your style sheet to "styling spans" and then apply siad spans as you see fit...
    It is a work in progress, and your points are as helpful as Rayzur's stying suggestions.

    If I do keep to my evil ways, then at least Rayzur's code is cleaner than mine was.

    Thanks guys!



    Debbie
    Last edited by DoubleDee; Mar 29, 2011 at 08:15. Reason: Type-O's

  11. #11
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've used Prezi and if done correctly it's very cool, and visually friendly for the people you're presenting to. if used incorrectly it can be very nauseating for teh people who are trying to follow the show. ?
    TIP - while at first the transitions look fun and you want to use as many as possible, keep it to a minimum


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
  •