Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts

    <p> tags in a stylesheet

    How do I put <p> tags in a style sheet. For example, what I want to happen is for text to appear on mouseover.

    Code:
    <style type=text/css">
    .on { <p>text appear</p> }
    .off { }
    </style>

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by GardenGnome2 View Post
    How do I put <p> tags in a style sheet. For example, what I want to happen is for text to appear on mouseover.

    Code:
    <style type=text/css">
    .on { <p>text appear</p> }
    .off { }
    </style>
    Code:
    <style type=text/css">
    .on { <p>text appear</p> }
    .off { }
    p {
      line-height: 1000px;
     font-size: 4px;
    }
    </style>
    http://www.htmldog.com/reference/

    regards

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    But, that didn't work. The text didn't appear. The <p> tag is enclosed by < >, so they wouldn't work in the style sheet, I presume...

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by GardenGnome2 View Post
    But, that didn't work. The text didn't appear. The <p> tag is enclosed by < >, so they wouldn't work in the style sheet, I presume...
    must be other reason that text didn't appear. where did you see < >?

    Code:
    p {
      line-height: 1000px;
     font-size: 4px;
    }
    regards

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by GardenGnome2 View Post
    How do I put <p> tags in a style sheet. For example, what I want to happen is for text to appear on mouseover.

    Code:
    <style type=text/css">
    .on { <p>text appear</p> }
    .off { }
    </style>
    sorry, I see now. But this is invalid!!!

    I missread your post. This can't be done only with html/css. You must use javascript.

    best regards

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Okay, thanks.

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Well, no, it CAN be done with CSS, using the visibility property, but only to a certain degree. We need specific context.

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by GardenGnome2 View Post
    How do I put <p> tags in a style sheet. For example, what I want to happen is for text to appear on mouseover.

    Code:
    <style type=text/css">
    .on { <p>text appear</p> }
    .off { }
    </style>
    Quote Originally Posted by CyanLight View Post
    Well, no, it CAN be done with CSS, using the visibility property, but only to a certain degree. We need specific context.
    this one? I'm curios how?

    Edit: hmm, this?
    Code:
    p { visibility: hidden; }
    p:hover { visibilty: visible; }

    best regards
    Last edited by oesxyl; 11-14-2008 at 11:33 PM.

  • #9
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    My question is how can someone find something on the page if it is hidden?

    Code:
    <style>
    p { visibility: hidden; }
    p:hover { visibility: show; }
    Code:
    <p>Text to hide and show.
    This is supported only by some browsers though.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by jeremywilken View Post
    My question is how can someone find something on the page if it is hidden?
    is not the only question,

    This is supported only by some browsers though.
    old IE with a javascript fix for hover, could work, probably this is one of the limitation mentioned by CyanLight.

    best regards

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You'd use the parent element's hover.
    Code:
    <!doctype html>
    <html xml:lang="en">
      <head>
        <meta http-equiv="content-type"
          content="application/xhtml+xml;charset=utf-8"/>
        <title>Visibility tricks.</title>
        <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        html {
          font: .814em/1.8 'lucida grande', 'lucida sans unicode', 'dejavu sans', sans-serif;
        }
        #container {
          height: 100px;
          width: 200px;
          background: #39f;
        }
        #content {
          color: #fff;
          visibility: hidden;
          text-align: center;
          line-height: 100px;
        }
        #container:hover #content {
          visibility: visible;
        }
        </style>
      </head>
      <body>
        <div id="container">
          <p id="content">Look at me! Peekaboo!</p>
        </div>
      </body>
    </html>
    Of course, not supported by IE6, but where would we be without theory?

  • Users who have thanked Apostropartheid for this post:

    oesxyl (11-14-2008)

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by CyanLight View Post
    You'd use the parent element's hover.
    Code:
    <!doctype html>
    <html xml:lang="en">
      <head>
        <meta http-equiv="content-type"
          content="application/xhtml+xml;charset=utf-8"/>
        <title>Visibility tricks.</title>
        <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        html {
          font: .814em/1.8 'lucida grande', 'lucida sans unicode', 'dejavu sans', sans-serif;
        }
        #container {
          height: 100px;
          width: 200px;
          background: #39f;
        }
        #content {
          color: #fff;
          visibility: hidden;
          text-align: center;
          line-height: 100px;
        }
        #container:hover #content {
          visibility: visible;
        }
        </style>
      </head>
      <body>
        <div id="container">
          <p id="content">Look at me! Peekaboo!</p>
        </div>
      </body>
    </html>
    Of course, not supported by IE6, but where would we be without theory?
    smart idea with this div#container,
    to solve the "how could be find", can put another p inside div,

    best regards

  • #13
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    The only thing with that is that it works once. I'm only testing in IE. Oh wait. Maybe Nevermind.
    Last edited by GardenGnome2; 11-15-2008 at 01:49 PM.

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    There is a content property in CSS, but this is also not supported by IE. See http://htmldog.com/reference/cssproperties/content/

    eg:
    Code:
    p:hover:after{
    content: 'how are you?';
    }
    Code:
    <p>Hello...</p>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    would CyanLight's 'theory' work in IE6 as well, if the 'p' tag was inside an 'a' tag?

    if so, you could style that specific link, to have the same style as you would want for a normal paragraph.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •