SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help please....basic?? padding problem

    Hi there

    Can someone please point me in the right direction for the css

    I want to add padding Bottom-padding:25px <a> tag on this line. It has an ID of bran4.

    <a href='/selplus3/index.php?option=com_content&amp;view=article&amp;id=50:article-2-practical-horse-nutrition&amp;catid=37:articles&amp;Itemid=56' class='readon bran4 ' >Read more...</a>

    I managed to change the H2 size using this CSS
    div.bran4 h2 {
    font-size: 16px;
    }

    So i thought it should be
    div.bran4.a {
    padding-bottom:25px;
    }

    Currently this piece of CSS styles it
    #main-content a, #main-content .separator, #main-content .item {
    font-weight:bold;

    I cant change this as i need this elsewhere on the site. How do i change the <a> tag using m class suffix????

    Many thanks in advance


    <span class=' bran4 '>
    </span><div class='contentpaneopen bran4 ' ><h2 class='contentheading bran4 '>Article 1 Dispelling the Myths</h2><span class=' bran4 '><p><strong></strong>Do you buy </p>
    </span><br/><a href='/selplus3/index.php?option=com_content&amp;view=article&amp;id=49:article-1&amp;catid=37:articles&amp;Itemid=55' class='readon bran4 ' >Read more...</a><span class="article_separator"> </span>
    <div style="clear: both;"></div></div><div class='contentpaneopen bran4 ' ><h2 class='contentheading bran4 '>Article 2 Practical Horse Nutrition</h2><span class=' bran4 '><p>Understanding.<br /><br /> horses.
    </span><br/><a href='/selplus3/index.php?option=com_content&amp;view=article&amp;id=50:article-2-practical-horse-nutrition&amp;catid=37:articles&amp;Itemid=56' class='readon bran4 ' >Read more...</a><span class="article_separator"> </span>
    <div style="clear: both;"></div></div><div class='contentpaneopen bran4 ' ><h2 class='contentheading bran4 '>Article 3 Thoughts on Winter Care &amp; Feeding</h2><span class=' bran4 '><p><br /> THOUGHTS.<br /><br /> short.<br /><br />Winter riding, especially in ice and snow, <br /><br /><br />A DOZEN WAYS <br /><br /> 1. Get an early start..<br /><br />If you would like to read or publish the full article in your club magazine or newsletter please email us !!

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    You can't apply padding-bottom to an <a> element because it's an inline element (more info &#187;). You should make it display block

    Code CSS:
    div.bran4 a {
    padding-bottom:25px !important;
    display: block;
    }

    You need the !important because #main-content a takes precedence over .bran4 a (id vs class, id wins).

    PS. Use double quotes for attributes in HTML, not single quotes.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, really need to get myself a book!!!! That works perfectly. Thanks v much for taking the time to explain.

    will !important always elevate a class above an id?

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Hm, come to think of it, !important isn't the best way to go here, and it's a tricky statement that can create more problems than it solves if you over-use it.
    Better do it this way:

    Code CSS:
    #main-content div.bran4 a {
    padding-bottom:25px;
    display: block;
    }

    Take a look at this article.

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Good citation, Scallio. Steven Bradley does good work.


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
  •