SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide first part of content

    I have been given the task hiding the first part of a paragraph from view. I cannot edit the HTML on the CSS

    The HTML content that I need CSS to edit is:

    <div class="FormID">
    <p>HelloWorld Form #27-356</p>
    <p id="Form Date"> YYYY-MM-DD </p>
    </div>

    Basically I need hide the HelloWorld portion of the paragraph and leave the Form #27-356 and the rest alone

    I have tried different versions of image replacement and the best I can do is blank out the entire paragraph.

    <style>
    div.FormID p{

    background: url(blank.GIF);
    overflow: hidden;

    }
    </style>

    Does anyone have any suggestions/solutions?

    Thanks in advance
    J

  2. #2
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't understood the requirement exactly. See if this can answer your requirement:

    <div class="FormID">
    <p><div style="display:none">HelloWorld</div> Form #27-356</p>
    <p id="Form Date"> YYYY-MM-DD </p>
    </div>

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you want to just hide it then to
    Code:
    #FormID p{visibility:hidden;}
    If you want the whitespace left from the <p> gone then give it display:none; instead of visibility:hidden
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick replies guys but neither works.
    Winwinmantra - I am unable to edit the html code at all but I have complete authority over the CSS code. So this cannot change:

    <div class="FormID">
    <p>HelloWorld Form #27-356</p>
    <p id="Form Date"> YYYY-MM-DD </p>
    </div>

    RyanReese - That hide the entire portion of the paragraph, I just want to hide the "HelloWorld" portion and leave the "Form #27-356" visible

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If "ID" was used in place of "class" in the div tag then it could have been possible by using Javascript. Otherwise as per my knowledge, it can't be done.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You'd have to wrap an element around the HelloWorld and then give that display:none;

    So the other posters code does work, you probably implimented it wrongly

    @ winwinmantra,

    document.getElementByID('idhere'); That's for IDs.

    document.getElementsByClassName('class'); That's for classes.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Assuming that the id on the p element is a typo as you can't have 2 ids on the same element then you could do this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    p {
        margin:30px;
    }
    .FormID p {
        text-indent:-4.5em;
        overflow:hidden;
        position:relative;
    }
    * html .FormID p{zoom:1.0}
    .FormID p#Form-Date {
        text-indent:0;
        overflow:visible
    }
    </style>
    </head>
    <body>
    <div class="FormID">
        <p>HelloWorld Form #27-356</p>
        <p id="Form-Date"> YYYY-MM-DD </p>
    </div>
    </body>
    </html>
    It's a little fragile though as it depends on font-size.

  8. #8
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B

    That is exactly what I am looking for. I have been assured that the HTML will not change for a long time so the font isn't an issue.

    Thanks so much

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You don't have control over the font size however . Users can increase/decrease the font size and which is why I shyed away from that solution because it can be broken very easily . Though if you can't change the HTML I guess that will have to do.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tested it in Firefox, Chrome and IE.

    It looks like there is sufficient space between the words for this solution to work in all but the extreme large font sizes and screen resolutions (went down to 800x600)

    Thanks to everyone who posted.

    J


Bookmarks

Posting Permissions

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