17 Replies Latest reply: Aug 4, 2013 3:05 PM by fluidgridguy RSS

    help a new guy

    fluidgridguy Community Member

      Hi Guys,
      I am new to DW CC and have a question about fluid grid sites.
      I create a new fluid grid site and in the phone view I create a new fluid div tag. In that div I place an image. On that image I wish to put some text on to it and I cannot figure out how to do it. I wish to place the text in a certain spot on the image. Is there a tut or a way to help me?
      Thank you

        • 1. Re: help a new guy
          mytaxsite.co.uk MVP

          fluidgridguy wrote:

           

          I create a new fluid div tag. In that div I place an image. On that image I wish to put some text on to it and I cannot figure out how to do it. I wish to place the text in a certain spot on the image. Is there a tut or a way to help me?

           

          You don't insert an image in the DIV; Instead use a background-image property of CSS to get what you want. Your text goes in the normal way in the DIV and this can then be positioned "at a particular spot".

           

          Hope this helps.

          • 2. Re: help a new guy
            Nancy O. MVP

            Depends on what you're looking for. Background-images won't re-scale with the fluid grid layout.

             

            Another option is to open the image in your graphics editor and add a text layer.  The only downside to having text in images is that it wont be "seen" by search engines, translators and screen readers.

             

            If you need more help, please post a link to your test page so we can see it in our browsers.

             

             

            Nancy O.

            • 3. Re: help a new guy
              fluidgridguy Community Member

              Thank you Nancy for the reply. I have watched the DW CC  videos about fluid grid set up. It basically says to get rid of the  div DW creates and added a new one called top, delete the text and place an image in the div. Here is the video link

              http://tv.adobe.com/watch/learn-dreamweaver-cc/add-style-to-web-pages-with-css-in-dreamwea ver/

               

              It states to put the image in the div tag and I do and works and resizes. Than he creates a nav bar in the video which I can do. But my question is if I wish to put text in the cake image how do I?

               

              Thanks for the help

              • 4. Re: help a new guy
                CaramelMacchiato Community Member

                fluidrgidguy,

                fluidgridguy wrote:

                But my question is if I wish to put text in the cake image how do I?

                 

                To do this, use an image editing app such as Photoshop to put text on image.

                • 5. Re: help a new guy
                  fluidgridguy Community Member

                  Thank you for the reply. I know how to place text on my image in PS etc. What I notice when I do that in a fluid grid responsive site, is that the text added (embedded) to image gets pixelated on browser resize.

                  I wish to just place the image and use css or div tags to add text and make it clean on resize.

                  Make sense?

                  • 6. Re: help a new guy
                    Nancy O. MVP

                    This is likely to fail for 2 reasons.  1) APDivs or Layers are removed from the normal document flow.   2) Text won't re-scale with the image.

                     

                     

                    Nancy O.

                    • 7. Re: help a new guy
                      fluidgridguy Community Member

                      Once again thanks for the replies. Nancy here is a site I am working on from a template. If you see the slideshow that text is not on the original image. This is a responsive site so on browser resize it somewhat follows the media size.

                      I really like DW CC vs. word press and bootstrap, Muse will do it but will not resize in the browser.

                      There must be a way.

                      http://digitalprinthosting.com/

                      • 8. Re: help a new guy
                        Nancy O. MVP

                        Your example contains a FlexSlider which uses a combination of JavaScript and CSS positioning. 

                         

                        The relevant CSS code:

                         

                        =============================================

                        /* FlexSlider Necessary Styles

                        *********************************/

                        .flexslider {margin: 0; padding: 0;}

                        .flexslider .slides > li {display: none; position: relative; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

                        .flexslider .slides img {width: 100%; display: block;}

                        .flex-pauseplay span {text-transform: capitalize;}

                         

                        .banner {position:absolute; left:0px; top:140px; width:470px; padding:0px 0 0px 70px; }

                        .banner p { font-family: 'Dancing Script', cursive; font-size:36px; line-height:50px; color:#8b847e; text-align:left; letter-spacing:-2px; }

                        .banner p strong {font-weight:normal; font-size:40px; text-transform:uppercase;}

                        .banner p+p {margin-top:-10px; padding-left:20px; }

                         

                        ==========================================

                         

                        Also, did you notice how the slider text disappears from  mobile layouts?  That's because Absolutely Positioned elements are removed from the normal document flow.  On smaller screens the text won't line up properly so the designer used media queries & set the .banner to display:none.

                         

                        In general, AP should be avoided in primary layouts.  When used, do so with great care especially in Responsive Web Designs.

                         

                         

                        Nancy O.

                        • 9. Re: help a new guy
                          fluidgridguy Community Member

                          Thanks Nancy I did notice the text in the mobile view. So from what I am hearing on the forum there is no way to do what I wish. I put this quick site up to show you better. This was created in DW CC with fluid grids. The image was provided to me by a designer and the text is PART of the image.

                          In the full browser it looks ok but on browser resize the text just loses clarity. I thought if I had that image with no text and I placed in a div I could use a web font and add the text to the image myself and position it on top of the image. I explain things poorly so forgive me.

                          http://marylandgreenprint.com/

                          Thanks Nancy for caring enough to help a new guy

                          • 10. Re: help a new guy
                            Nancy O. MVP

                            Is that the correct URL?  I'm getting a Server Not Found error.

                             

                             

                            Nancy O.

                            • 11. Re: help a new guy
                              fluidgridguy Community Member

                              Yes nancy it is correct. I have dedicated servers with Host Gator and they are having issues.

                              I will attach the image13036BE_Reid25thWeb_Landing.png

                              • 12. Re: help a new guy
                                fluidgridguy Community Member

                                Site is back up

                                • 13. Re: help a new guy
                                  Nancy O. MVP

                                  This will be hard to pull off in a Responsive Layout.  I think the best you can do is put text into floated divisions that have the same background-color as your portrait image.

                                   

                                  Responsive Web Design is all about compromises.  Some design concepts work in RWD, others do not. 

                                   

                                   

                                  Nancy O.

                                  • 14. Re: help a new guy
                                    fluidgridguy Community Member

                                    Thank you Nancy I will try your good idea. I have much learning to do can you recomend any tuts?

                                    Your help is greatly appriciated by me

                                     

                                    Maybe the great folks at Adobe could add a feature like that.

                                    • 15. Re: help a new guy
                                      Nancy O. MVP

                                      This has nothing to do with Adobe or Dreamweaver and everything to do with how the web works.  APDivs don't work well in Fluid layouts.

                                       

                                      Responsive Web Design

                                      http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

                                       

                                      Introduction to CSS Media Queries

                                      http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html

                                       

                                       

                                      Nancy O.

                                      • 16. Re: help a new guy
                                        CaramelMacchiato Community Member

                                        If I may add to Nancy's awesome expertise related to Dreamweaver, I commend for her vaulable contribution to Dreamweaver community.

                                         

                                        Fluidgridguy, I am not quite sure if you realize this. But I think you realize this by now. To make Fluid Grid or responsive website works, or understand the "why" and "what's not working", it is imperative to understand how HTML, CSS and javascript such as jQuery script works... and how it behave in certain browsers as it stands variety with desktop, laptop, smartphone and tablets. Where we don't have control with how users chose to use whatever device they prefer to use to browse website.

                                         

                                        For working with responsive website, it takes an extra effort and lot of time and patience, perhaps plenty of coffee or espresso to make it work.

                                         

                                        As for putting 'text' into photo file you wanted, it is not feasible useful way to display info in responsive standpoint, where it is being resize to accommodate whatever "device" used. So, for any kind of text that is "burnt" in into photo is not recommend.

                                        • 17. Re: help a new guy
                                          fluidgridguy Community Member

                                          Thanks for the reply or should I thank Star Bucks? I was just wishing for more out of DW CC.

                                          Do not get me wrong I used DW for 5 years and well it looks like I have more to learn.

                                          Responsive is the way to go and I hope to see DW grow into that need. They are close.

                                          I just dislike Pinch and Zoom web sites on my IPhone and Windows 8 phone.

                                          Muse is cool but allows no browser resize from what I hear. I would encourage users here to show links to your responsive sites created in DW CC.

                                          Thanks