4 Replies Latest reply: Sep 1, 2010 12:56 PM by mattaca RSS

    CSS in CS4: Can I create "nested styles" similar to InDesign's?

    L Hickle Community Member

      I am working on the obituary archive section of a newspaper website. I have lists of similar 3-line "units", and I have a different class style set up for each line. A typical "unit" would be:

       

      (Person's name) - bold weight, soft return

      (Person's age/residence) - regular weight, soft return

      (Date of obit publication) - smaller text, hard return

       

      In InDesign, I could easily set up a nested paragraph style (with the help of defined character styles) to automatically format this, but I haven't been able to figure out a quick way to do so in Dreamweaver. So I waste a lot of time selecting different class styles for each line to make it look how I want it. Is it possible to make this simpler? Am I making it too hard?

        • 1. Re: CSS in CS4: Can I create "nested styles" similar to InDesign's?
          L Hickle Community Member

          In case I didn't describe my situation very well, here is a link to a sample page to show the type of set up

          I'm talking about:

           

          http://www.kkspc.com/argus/ObitsFull/Surnames/D-SurnameObits/Da/Davis.html

           

          I'd love to be able to select all the names at once and apply a "nested" style that would automatically apply the three different class styles. It would save me a lot of formatting time.

          • 2. Re: CSS in CS4: Can I create "nested styles" similar to InDesign's?
            MurraySummers CommunityMVP

            Am I making it too hard?

             

            You are in a way.  What are your skills with HTML and CSS?  If 'minimal' then you are in for a rough ride.  DW doesn't take kindly to that....

             

            It would be a simple matter to define a few descendent selectors that would style everything in each of those units automatically.  Does that mean anything to you?

             

            For example -

             

            #obitUnit { .... }

            #obitUnit div { ... }

            #obitUnit h1 { font-size:1.6em;margin:1em 0 0; /* gives a 'soft return' along with the next rule */ }

            #obitUnit h1+p { margin:0 0 1em; }

            #obitUnit p+p { font-size:x-small; }

             

            would style -

             

            <div id="obitUnit">

                 <h1>Person's Name</h1>

                 <p>Person's age/residence</p>

                 <p>Date of publication</p>

            </div>

            • 3. Re: CSS in CS4: Can I create "nested styles" similar to InDesign's?
              BobLevine CommunityMVP

              Off the top of my head, since you have InDesign you could actually do the text there using three paragraph styles. You can apply it easily using the "apply style then next style" command after selecting all the text.

               

              Export that file for Dreamweaver and all the classes will be assigned. Copy and paste the code into your page and you're home free to simply create the rules for the three classes for the <p> tags.

               

              Bob

              • 4. Re: CSS in CS4: Can I create "nested styles" similar to InDesign's?
                mattaca Community Member

                I'm facing a simliar issue to this, only the differing styles are not on individual lines. Is there a way to mirror nested character styles that can not be broken up into individual paragraphs without creating additional tags? For example, "TO BAKE THE CAKE: Take 2 cups of flour..." In this style, the caps always go through one colon. There are so many instances where things like this happen and I'd love to be able to avoid tagging them with a separate XML tag. Possible?