This discussion is archived
3 Replies Latest reply: Jan 3, 2013 4:01 PM by tparvaiz RSS

CSS figcaption elements- not working

tparvaiz Newbie
Currently Being Moderated
Hi,

I am trying to put some text on an image using css functionality figcaption

I can put the 1st one with no issues but when I am trying to put a second text on to the image, it's behaving strangely (it's putting text to the bottom right side of it)

Plus, when I put a reference to the item (&P9_TEST.) it doesn't display at all.


Here is the sample that I've posted online @ APEX.ORACLE.COM




Workspace: TPARVAIZ1
Username: REDGREENRED@HOTMAIL.COM
Password: keroj7

Application 47883
user ID/PW: TEST/TEST

Thanks in advance
  • 1. Re: CSS figcaption elements- not working
    fac586 Guru
    Currently Being Moderated
    tparvaiz wrote:

    I am trying to put some text on an image using css functionality figcaption
    <tt>figcaption</tt> is HTML, not CSS. And in your case:
    <ul class="uFigures">
      
     
          <img src="#WORKSPACE_IMAGES#PICUTRE_1.png" border="0" alt="">
    
          <figcaption>Headding: </figcaption>
         <figcaption_TEXT>&P9_TEST.</figcaption_TEXT>
    
    
    
    </ul>
    it is very, very invalid HTML.

    An unordered list (<tt>ul</tt>) must contain at least one list element (<tt>li</tt>). An <tt>img</tt> cannot be a child of a <tt>ul</tt>. <tt>figcaption</tt> must be the first or last child of a <tt>figure</tt> element.

    What is <tt>figcaption_TEXT</tt>? It is not an HTML element.

    We've Re: mouse rollover - chainging image.
    I can put the 1st one with no issues but when I am trying to put a second text on to the image, it's behaving strangely (it's putting text to the bottom right side of it)
    You appear to be trying to persist in using a single image against Re: is there a way to add text to the image automatically. I have recreated the HTML5+CSS example app from that thread in your workspace so you can study it better. The correct HTML mark-up for 2 images with data overlays is in the Score Board region:
    <ul class="uFigures">
      <li>
        <figure title="Scotland">
          <img src="#APP_IMAGES#gb-sct.png" alt="Scotland">
          <figcaption>&P1_SCT.</figcaption>
        </figure>
      </li>
      <li>
        <figure title="England">
          <img src="#APP_IMAGES#gb-eng.png" alt="England">
          <figcaption>&P1_ENG.</figcaption>
        </figure>
      </li>
    </ul>
    Plus, when I put a reference to the item (&P9_TEST.) it doesn't display at all.
    That's very simple: <tt>P9_TEST</tt> doesn't have a value in session state when the <tt>&P9_TEST.</tt> reference in the FigCaption region is rendered. Page item values set using item Source or Default properties don't enter session state until the page is submitted. If you want the value to be available during page show it must be set using a computation or process that is evaluated before the item is rendered or referenced.
  • 2. Re: CSS figcaption elements- not working
    tparvaiz Newbie
    Currently Being Moderated
    fac586,

    thanks for your detailed reply and suggestions... I really appreciate it

    So here is the scenario explaining the rationale behind my approach. I have an image file that shows a process (something similar to a retail operation that has few arrows going into a shop to identify customers and products, and some arrows coming out of the shop identifying order dispatches and deliveries)... very basic stuff

    process diagram is pretty much the same for all the cities but the volumes get changed... depending on the selected city (from another linked report) I want to show volumes under each arrow (e.g. number of customers to appear below the customer arrow, and similarly for dispatches and deliveries I want to show associated numbers under each arrow)

    I tried your suggestion to use figcaption, which worked fine for me even when I used multiple texts. one of the things I still need to do is test it under different browsers. With Chrome and IE I don't see any issues as I tried with both of them.

    One of the challenge that I was facing with <li> is the size of the image... looked into your template but can't figure it out how to change it... I think you may change the image size by specifying dimensions (width/height) through the <img src> tag but I am not sure if it is the best practice or not. please advice

    Thanks again for your assistance
  • 3. Re: CSS figcaption elements- not working
    tparvaiz Newbie
    Currently Being Moderated
    any suggestions?

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points