6 Replies Latest reply: Dec 26, 2011 3:01 PM by Nancy O. RSS

    DW CS 4 Layout Question

    pcford Community Member

      I have three elements: an image and two line of text. In the footer using CSS, I want to put the image at the right of the body. Directly under the image I want one line of text aligned left and one line aligned right.

       

      I have not been able to get them to behave...in the most recent implimentation the top of image pops down to to the same line as the text. It's frustrating. Thanks in advance.

        • 1. Re: DW CS 4 Layout Question
          Nancy O. CommunityMVP

          Divide your footer into 2 elements and use floats to make them site side by side.

           

          #footer1 {

          float:left;

          width: 40%;

          text-align:left;

          border: 1px dotted red; /**for demo purposes**/

          }

           

          #footer2 {

          float:right;

          width:40%;

          text-align:right;

          border: 1px dotted gold; /**for demo purposes**/

          }

           

           

          HTML:

           

          <div id="footer1">

          <p>Here is footer1 text </p>

          </div>

           

          <div id="footer2">

          <p><img src="some-image.jpg"> <br>

          Caption below image </p>

          </div>

           

           

          ❄  ☃  ❄

          Season's Greetings

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          • 2. Re: DW CS 4 Layout Question
            pcford Community Member

            Well, thanks, I appreciate the help...however:

             

            I want the two text taglines aligned left and right and on the same line. I want the footer image to be above the right hand aligned text.

             

            Your formulation has the text on two different lines with the image above the right hand text.

             

            I put the image in a div and right aligned it but it goes under the right hand text...it is likely I am not understanding something basic. Thanks for any help.

            • 3. Re: DW CS 4 Layout Question
              Nancy O. CommunityMVP

              You can use margins and padding to align text where needed.

              For better answers, please post a link to your test page. 

              Or as a less preferable 2nd choice, paste your HTML and CSS code into a reply in the web forum.

               

               

              Nancy O.

              Alt-Web Design & Publishing

              Web | Graphics | Print | Media  Specialists 

              http://alt-web.com/

              • 4. Re: DW CS 4 Layout Question
                pcford Community Member

                Ok, Nancy, thanks again for your help...I have use padding and margins but when I do, the image will not stay above the text line. Maybe it's inheiriting something? Dunno.

                 

                As you suggest, later today I will get more concrete examples to show you...thanx again. pcf

                • 5. Re: DW CS 4 Layout Question
                  pcford Community Member

                  Here ya go:

                  I changed your html to get text on same line but then the image goes below...as it goes with my efforts.

                  1000px box hold:

                  html:

                    <!--FOOTER-->
                   
                    <div><img src="images/footer_icon.gif" width="54" height="96" vspace="100" align="right"></div>

                  <div id="footer1">

                    <p>Here is footer1 text </p>

                    </div>

                  <div id="footer2">

                  Caption below image </p>

                   

                  </div>

                   

                  CSS as your suggestions:

                  #footer1 {

                   

                  float:left;

                   

                  width: 40%;

                   

                  text-align:left;

                   

                  border: 1px dotted red; /**for demo purposes**/

                   

                  }

                   

                   

                  #footer2 {

                   

                  float:right;

                   

                  width:40%;

                   

                  text-align:right;

                   

                  border: 1px dotted gold; /**for demo purposes**/

                   

                  }

                  • 6. Re: DW CS 4 Layout Question
                    Nancy O. CommunityMVP

                    I can't tell much from what you posted.

                    Is this close to what you want?  (view source in browser to see the code)

                    http://alt-web.com/TEST/Floated-Footer.html

                     

                     

                    Nancy O.

                    Alt-Web Design & Publishing

                    Web | Graphics | Print | Media  Specialists 

                    http://alt-web.com/