Loading ...
Sorry, an error occurred while loading the content.
 

Popup in CSS

Expand Messages
  • Axel Berger
    By default the CITE attribute (not tag) as in Peace in our time does nothing. I had hoped to find something in CSS to make it
    Message 1 of 10 , Aug 14, 2014
      By default the CITE attribute (not tag) as in
      <Q CITE="Neville Chamberlain">Peace in our time</Q>
      does nothing. I had hoped to find something in CSS to make it behave like
      the TITLE attribute, i.e. pop up the content while hovering over the
      element.

      Am I overlooking something or is this really impossible?

      Danke
      Axel
    • Marcelo Bastos
      Interviewed by CNN on 14/08/2014 11:27, Axel Berger ... The cite attribute intended use is to contain the URL of the cited document, not other kinds of
      Message 2 of 10 , Aug 14, 2014
        Interviewed by CNN on 14/08/2014 11:27, Axel Berger
        Axel@... [ntb-html] told the world:
        > By default the CITE attribute (not tag) as in
        > <Q CITE="Neville Chamberlain">Peace in our time</Q>
        > does nothing. I had hoped to find something in CSS to make it behave like
        > the TITLE attribute, i.e. pop up the content while hovering over the
        > element.
        >
        > Am I overlooking something or is this really impossible?
        >
        >
        The cite attribute intended use is to contain the URL of the cited
        document, not other kinds of content. So the usage you are attempting is
        technically invalid HTML.

        http://www.w3.org/TR/html401/struct/text.html#adef-cite-Q
        http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element



        --
        MCBastos

        This message has been protected with the 2ROT13 algorithm. Unauthorized use will be prosecuted under the DMCA.
        -=-=-
        ... Sent from my Apple Lisa.
        * Added by TagZilla 0.7a1 running on Seamonkey *
        Get it at http://xsidebar.mozdev.org/modifiedmailnews.html#tagzilla
      • Greg Chapman
        Hi Axel, On 14 Aug 14 15:27 Axel Berger Axel@Berger-Odenthal.De [ntb-html] ... I read that it does nothing in visual browsers but can be rendered by screen
        Message 3 of 10 , Aug 14, 2014
          Hi Axel,

          On 14 Aug 14 15:27 "Axel Berger Axel@... [ntb-html]"
          <ntb-html@yahoogroups.com> said:
          > By default the CITE attribute (not tag) as in
          > <Q CITE="Neville Chamberlain">Peace in our time</Q>
          > does nothing.

          I read that it does nothing in visual browsers but can be rendered by
          screen readers.

          > I had hoped to find something in CSS to make it behave like the
          > TITLE attribute, i.e. pop up the content while hovering over the
          > element.
          >
          > Am I overlooking something or is this really impossible?

          I can't think of any CSS code that will work on attributes only the
          tags themselves.

          If you want sophisticated popups you could simplify the techniques
          that Stu Nichols uses at:
          http://www.cssplay.co.uk/menu/tool_links.html
          http://www.cssplay.co.uk/menu/balloons.html

          Greg
        • Mike Breiding - Morgantown WV
          On 8/14/2014 11:55 AM, Marcelo Bastos bytext@guaiuvira.com.br [ntb-html] ... ++++++++++ This is how I use cite:
          Message 4 of 10 , Aug 14, 2014
            On 8/14/2014 11:55 AM, Marcelo Bastos bytext@... [ntb-html]
            wrote:

            > The cite attribute intended use is to contain the URL of the cited
            > document, not other kinds of content. So the usage you are attempting is
            > technically invalid HTML.
            >
            > http://www.w3.org/TR/html401/struct/text.html#adef-cite-Q
            > http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element
            >
            > --
            > MCBastos
            ++++++++++
            This is how I use cite:
            <div class="quote">
            <div class="content">
            <blockquote cite='http://epicroadtrips.us/index.php'>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            ex ea commodo consequat.</p>
            <p class="source"><strong>Source: </strong><a
            href='http://epicroadtrips.us/index.php' title='Road Trips'
            target="_blank">Mike's Epic Road Trips</a></p>
            </blockquote>
            </div>
            </div>


            ---
            This email is free from viruses and malware because avast! Antivirus protection is active.
            http://www.avast.com
          • Greg Chapman
            Hi Axel, On 14 Aug 14 17:00 Greg Chapman gregchapmanuk@yahoo.co.uk [ntb-html] ... Or: http://www.cssplay.co.uk/menu/cssplay-tooltips.html Greg
            Message 5 of 10 , Aug 14, 2014
              Hi Axel,

              On 14 Aug 14 17:00 "Greg Chapman gregchapmanuk@... [ntb-html]"
              <ntb-html@yahoogroups.com> said:
              > If you want sophisticated popups you could simplify the techniques
              > that Stu Nichols uses at:
              > http://www.cssplay.co.uk/menu/tool_links.html
              > http://www.cssplay.co.uk/menu/balloons.html

              Or:

              http://www.cssplay.co.uk/menu/cssplay-tooltips.html

              Greg
            • Axel Berger
              ... Thanks, I had sloppily misread the manual I go by and will use TITLE now. Danke Axel
              Message 6 of 10 , Aug 14, 2014
                "Marcelo Bastos bytext@... [ntb-html]" wrote:
                > So the usage you are attempting is
                > technically invalid HTML.

                Thanks, I had sloppily misread the manual I go by and will use TITLE now.

                Danke
                Axel
              • Axel Berger
                ... Well yes, but you can specify. P[ALIGN=right] {text-align: left;} Axel
                Message 7 of 10 , Aug 14, 2014
                  "Greg Chapman gregchapmanuk@... [ntb-html]" wrote:
                  > I can't think of any CSS code that will work on attributes only the
                  > tags themselves.

                  Well yes, but you can specify.

                  P[ALIGN=right] {text-align: left;}

                  Axel
                • Axel Berger
                  ... Not quite what I had been looking for but a nice technique to remember. Danke Axel -- /¯ No | Dipl.-Ing. F. Axel Berger Tel: +49/ 2174/ 7439 07
                  Message 8 of 10 , Aug 14, 2014
                    "Greg Chapman gregchapmanuk@... [ntb-html]" wrote:
                    > > http://www.cssplay.co.uk/menu/balloons.html

                    Not quite what I had been looking for but a nice technique to remember.

                    Danke
                    Axel

                    --
                    /¯\ No | Dipl.-Ing. F. Axel Berger Tel: +49/ 2174/ 7439 07
                    \ / HTML | Johann-Häck-Str. 14 Fax: +49/ 2174/ 7439 68
                    X in | D-51519 Odenthal-Heide http://berger-odenthal.de
                    / \ Mail | -- No unannounced, large, binary attachments, please! --
                  • loro
                    ... That said, you can make it display with CSS. q:after {content:attr(cite) } And you can style it further (move it, color it, whatever). But I can t figure
                    Message 9 of 10 , Aug 19, 2014
                      Axel wrote:
                      >"Marcelo Bastos bytext@... [ntb-html]" wrote:
                      > > So the usage you are attempting is
                      > > technically invalid HTML.
                      >
                      >Thanks, I had sloppily misread the manual I go by and will use TITLE now.

                      That said, you can make it display with CSS.

                      q:after {content:attr(cite) }

                      And you can style it further (move it, color it, whatever). But I
                      can't figure out how to make it display only on :hover with only CSS.

                      With a little JavaScript you could do like this, even if there
                      probably are fancier ways. Add these rules.

                      q.on:after { display: block /* or whatever, make it visible */ }
                      q.off:after { display; none }

                      And change the first one so the attribute value initially does not display.

                      q:after { content:attr(cite); display: none }

                      And then...
                      <q cite="Neville Chamberlain" onmouseover="this.className='on'"
                      onmouseout="this.className='off'">Peace in our time</q>

                      Lotta
                    • Axel Berger
                      ... Thanks to you too, all good stuff to have in your arsenal. Still for me it suffices just to correct my misunderstanding and use the right attribute, TITLE,
                      Message 10 of 10 , Aug 20, 2014
                        "loro tabbie@... [ntb-html]" wrote:
                        > q:after { content:attr(cite); display: none }
                        > And then...
                        > <q cite="Neville Chamberlain" onmouseover="this.className='on'"
                        > onmouseout="this.className='off'">Peace in our time</q>

                        Thanks to you too, all good stuff to have in your arsenal. Still for me it
                        suffices just to correct my misunderstanding and use the right attribute,
                        TITLE, for the job. Anyway these half hidden things can only be nice extras
                        and never contain essential parts of content.

                        Danke
                        Axel
                      Your message has been successfully submitted and would be delivered to recipients shortly.