4 Replies Latest reply on Jun 2, 2011 7:38 AM by adninjastrator

    How do I duplicate or make a style out of a custom made div

    cardinaluk

      Hi,

       

      I am building a website from a dreamweaver CS4 - 2 column template. I make my articles on my home page by creating a div under the premade one. The premade on is perfect but I can't just copy and paste it and have it retain all its headings and picture placements.....

      Is there anyway I can do this? I'm thinking its a CSS style, I have experimented by the "New CSS Style" button and it appears that I have made a said div to my style but how do I apply it to a pre-existing div?

       

      I've been through tutorials and 2 books but need someone to tell me....I've found I'm not good at tutorials.

       

      I understand that this is a fundamental skill to have when working with CSS but could someone please give it to me in some simple steps?

       

      Thanks to the people who have helped me in the past over a few tech issues I had.

       

      Tom.

        • 1. Re: How do I duplicate or make a style out of a custom made div
          adninjastrator Level 4

          Not really clear on whether you want new styles or re-use existing ones, but you should look into using classes. You can make up various styles ahead of time, store those styles in CSS "classes" and then apply one or more of those styles on any <div> you want.

          <div id="my_div" class="large red">

          applies both the large and the red class to "my_div".

          http://www.w3schools.com/Css/css_id_class.asp

          Best wishes,

          Adninjsatrator

          1 person found this helpful
          • 2. Re: How do I duplicate or make a style out of a custom made div
            Nancy OShea Adobe Community Professional & MVP

            Why don't you simply put all of your content into the exisiting pre-made division block?

             

            <div id="DivName">

             

                 <p>your content goes here..................</p>

             

                 <p>Some more content goes here.......</p>

             

                 <p>And a little more content goes here.......</p>

             

            </div>

             

             

            Then hit File > SaveAs > newFileName.html

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists 
            http://alt-web.com/
            http://twitter.com/altweb

            1 person found this helpful
            • 3. Re: How do I duplicate or make a style out of a custom made div
              cardinaluk Level 1

              Great thank you both.

               

              I'm just copying and pasting the HTML blocks from <div> to </div> and its working. No problems with display on any browser it seems to work.

              Can you think of any potential problems with this?

               

              I don't think I'm relying too much on styles or CSS at the moment as this method is working.

               

              What I would like to be able to achieve is a simple way of typing text into some program and it appears on my front page pushing all other articles down the page or into the archives section. I'm sure its spry technology? I will attempt to learn a tutorial on this but I hold little hope of understanding it.

               

              Tom.

              • 4. Re: How do I duplicate or make a style out of a custom made div
                adninjastrator Level 4

                If you are just copy/pasting the block of <div> code, you will not be able to re-use the id="your_div" name over and over.

                The id is suppose to be unique on that page. So if you do eventually assign a style to that particular div, you must rename every other div with a different ID (if you are using IDs). But if you assign a "class" to the div, then you can use that same class over and over, just using the copy/paste as you are now.

                As for wanting to quickly and easily add more text to the top of the page... you might want to look into a blog application like WordPress. Very popular and well supported and many Web hosts have auto install scripts to make the installation a breeze. Check with your Web host.

                http://wordpress.org/

                Best of luck!

                Adninjastrator