SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Disappearing h6 Elements

    Hello all,

    I'm trying to implement some paragraph headings in a page I'm working on. I put them into <h6> elements. You'll see that at line 44, I have used a containing div temporarily named .bumpmeplease. Because overflow is hidden on this and other divs, the h6 headings disappear and the words do not wrap to a new line when the browser window is small. How can this be fixed?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I couldn't see any class of bumpmeplease in that page?

    Have you changed it since you posted this?

    If text is being hidden with overflow:hidden then it is likely that you have given it dimensions and your content exceeds those dimensions.

    Note that you shouldn't just insert h6 elements willy nilly as heading tags are the most important tags in your page and create a document outline. You should start with a h1 as the main heading and then follow with h2 for sub headings in the page. In each sub heading you would then start with and h3 followed by h4 etc. You would never start with an h6 unless you had used h5 before it (and you wouldn't use an h5 unless there was an h4 before it also and so on...).

    Don't confuse the default look of a heading tag with a page's hierarchy. You can change how any tag looks so choose your tags semantically and not for visual effect.

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Yes, it has changed several times today. Now, the containing divs on that page are given a class of listwrapper. On this page, the headers - the elements that overflow and don't wrap in narrow viewports- say "bold reputation" and "largest video database".

    I guess I'll need to change these to <p> elements with a unique class for them.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,204
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    don't wrap in narrow viewports
    You have a min-width here:

    Code:
    #outer {
    display: table;
    table-layout: fixed;
    border-spacing: 0 0;
    max-width: 960px;
    min-width: 470px;
    margin: 0 auto;
    }
    I don't really see what you are talking about, though. The question isn't clear.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Hi, etidd. If I'm following you correctly, then you need to add {margin-right:2em} as shown in the following snippit:
    Code:
    .listwrapper h6 {
        font-size: 1em;
        font-style: italic;
        left: 2em;
        margin: 0.3em 2em 0.3em 0;
        position: relative;
    }

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thank you very much, Ronpat! Adding margin-right:2em; to the specified element has solved the issue.

    edit: changed everything to <p> elements with a class of .italicheader and all issues are solved here.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Very cool. Thanks for the feedback!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by etidd View Post
    edit: changed everything to <p> elements with a class of .italicheader and all issues are solved here.
    That's not very semantic Remember what I said about confusing look with structure.

    If the item is a header then it must be a header tag of appropriate level.

    Header tags create a document outline and are one of the most important aspects of a web page. Screen readers and Search engines use them extensively to build the outline of the page and most accessibility aids (screen readers etc) use them as jumps to important sections as you can tab through the headings only.

    Don't be concerned with what regular elements look like by default as they can easily be changed with css.


Tags for this Thread

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
  •