Skip navigation
Currently Being Moderated

help a new guy

Aug 1, 2013 5:55 PM

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

 
Replies
  • Currently Being Moderated
    Aug 1, 2013 6:01 PM   in reply to fluidgridguy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2013 2:49 PM   in reply to fluidgridguy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2013 6:24 PM   in reply to fluidgridguy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 9:11 AM   in reply to fluidgridguy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 10:08 AM   in reply to fluidgridguy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 10:49 AM   in reply to fluidgridguy

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 12:21 PM   in reply to fluidgridguy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 1:21 PM   in reply to fluidgridguy

    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-responsiv e-web-design/

     

    Introduction to CSS Media Queries

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 4, 2013 1:17 PM   in reply to fluidgridguy

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points