SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Location
    Surrey, British Columbia Canada
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question h2 in an unordered list

    Hi,

    I have been struggling with this and cannot find a solution. I have an ul that contains an img, an h2 and a span as below:

    <ul class="column-one">
    <li>
    <img src="images/thumb1.png">
    <h4>Purus Egastas Fusce</h4>
    <span>Cras justo aid idifh theis<br>
    egaste quit quam.</span><br>
    </li>

    I am trying to get the h4 to not leave a gap between it and the span. I have tried to make it inline block and then remove the margin which works to get rid of the gap - but then my li's are all screwed up.
    Would really appreciate any thoughts on how I might fix this...

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,402
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Just add a little CSS to target the H4 element...

    Code:
    .column-one h4 { margin: 0; }

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Location
    Surrey, British Columbia Canada
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - that worked Much appreciated bluedreamer!!

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,402
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    No problem... always glad to help

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Just as an aside, you can improve that code a lot. As a general rule, it's better not to have inline elements (img, span etc.) butting up against block elements (h4 etc.) (It can lead to layout problems in some circumstances.)

    Rather than using <br> for spacing, use margin/padding instead.

    And don't just use heading elements based on appearance. <h4> has meaning in HTML, and really should only be a heading within a section of text headed by an h3, which is within a section headed by a h2 etc.

  6. #6
    SitePoint Member
    Join Date
    Jan 2014
    Location
    Surrey, British Columbia Canada
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your insight. I changed the code to this and used padding to move the spans down to the next line.

    <ul class="column-one">
    <li>
    <img src="images/thumb1.png">
    <span class="head">Purus Egastas Fusce</span>
    <span class="para1">Cras justo aid idifh theis</span>
    <span class="para2">egaste quit quam.</span>
    </li>

    Is this more along the lines of good coding - any further suggestions would be greatly appreciated.

    Gayle

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The first <br> tag in your original code was fine, the second was apparently being used as a spacer at the bottom. Replaced it with padding applied to the bottom of the <li>, as Ralph recommended, would be a better method. Break tags aren't necessarily "bad" code, but like all HTML, should be used "appropriately".
    Code:
    <span>Cras justo aid idifh theis<br>
    egaste quit quam.</span><br>

  8. #8
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not to bump this thread, but I'm trying to recall when and where i was discouraged to use <br> tags - I think i was told that it was on the outs... was this erroneous info?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,521
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Henri Helvetica View Post
    Not to bump this thread, but I'm trying to recall when and where i was discouraged to use <br> tags - I think i was told that it was on the outs... was this erroneous info?
    Break tags are bad when you use them just to make space. They are fine when you want a line break but not fine when you want to end a paragraph because that's what the p element is for.

    Breaks can be used to break a line mid-sentence for a visual effect while you are still in the same paragraph. They are also useful to break lines in poems, addresses and form elements.

    They are bad when you use them when there is a more semantic available. They should never be used just to make space though.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Henri Helvetica View Post
    I'm trying to recall when and where i was discouraged to use <br>
    I mentioned it in post 5 above. <br> has a purpose in HTML, such as breaking lines in an address or in a poem. But that effectively add meaning or clarity to the content, which is what HTML is for. Using HTML purely for styling (creating visual space etc.) is a misuse of <br>. Use CSS for that instead—things such as margin and padding.

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,255
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Guilty (a long long time ago and thankfully for only a very short while)
    HTML Code:
    <html>
    <head>
    <style type="text/css">
    /* CSS, what's that? */
    </style>
    </head>
    <body>
    <div id="content">Lorem ipsum, blah, blah, blah</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="footer">Powered by poor mark-up</div>
    </body></html>

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Gayle,
    you should code the HTML of your page FIRST. While doing so consider the MEANINg of each piece of content and use the a appropriate HTML tag ( at this point don't worry about how it looks).

    AFTER you ave done so you can use CSS to style any tag to any way you want it to look.

    There is really nothing wrong with using H2-H6 inside LIs IF you mean them to be headings and that depends on the SEMANTIC of your content.



    Code:
     
    <h1>The title of your specific  page</h1>
    ....
    <h2>Section title?</h2>
    ....
    <h3>sub section?</h3>
    <ul class="column one">
        <li>
           <img src="images/thumb1.png">
           <h4 >Purus Egastas Fusce</h4>
           <p class="introP">Cras justo aid idifh theis</p>
          <p>egaste quit quam.</p>
         <p>egaste quit quam.</p>
       </li>
    
    </ul>
    
    
    CSS
    
    .one  {}
    .two  {}
    .column  {}
    .column h4{ margin:0; 
    /** other rules for any h4 inside a col**/
    }
    
    .column.one h4{  /** other rules for any h4 inside the FIRST (.one) col**/}
    .column p{ margin:0; }
    .column .introP{ font-style:italic; color:#ccc;  /** rules for the first paragraph, in an item of a column**/}
    /** other rules**/

    So the question is are you using a list because your content is meant to be a list of other content or simply because you want to lay out "columns". If it's the latter I'd recommend the use of DIVs over ULs.


    hope that helps


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
  •