SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How To Deal With Reference Links

    SitePoint Members,

    On my css I have p{margin:5% 0} which sets a space between paragraphs at 5%.
    For many consecutive paragraphs, this is what I want. But I have reference links under some paragraphs and I don't want 5% between the bottom of these paragraphs and the top of the first link under these paragraphs. I can always put the </p> after the first link instead of before, but is there a better way?

    Thanks,

    Chris

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It's not the best idea to have links (inline elements) immediately following <p> (block elements), but, that said, you could perhaps do something like

    Code:
    p + a {margin-top: -10px;}
    I used px there rather than %, as top and bottom percent is less reliable, I think. You have to ask yourself, percentage of what? It's better to use ems for top/bottom spacing, or even px.

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I put .first{margin-top:-10px} in the css
    and in the html
    <a href="http://www.science......." class="first"">yyyy</a><br />

    and it had no effect on the first link after the paragrap and w3c gave me a number of these css warnings

    Redefinition of margin-bottom
    9 Redefinition of margin-left
    9 Redefinition of margin-top
    9 Redefinition of margin-right
    9 Redefinition of padding-bottom
    9 Redefinition of padding-left
    9 Redefinition of padding-top
    9 Redefinition of padding-right

    Not sure why it complains about margin bottom.

    What does your "p + a" mean. I haven't see that before.

    Thanks Ralph,

    Chris

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You may need to add this for it to work:

    Code:
    p + a {
      margin-top: -10px;
      display: block;
    }
    But really, that <a> should be wrapped in a block element like a <p> or <div>.

    In CSS, p + a means "any <a> element that comes straight after a <p> element". The plus is called an "adjacent sibling selector".

  5. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So does that mean p + a in css is made use of in html as <p + a>text stuff</p> ?

    "any <a> element that comes straight after a <p> element" seems to be exactly what I'm looking for.

    I'm not crazy about making the change to what I already have to putting </p>after so many reference links for some paragraphs.

    Thanks

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chris77 View Post
    So does that mean p + a in css is made use of in html as <p + a>text stuff</p>
    It applies to situations like this:

    Code:
    <p>this is a paragraph.</p>
    
    <a>This is a link</a>
    I'm not crazy about making the change to what I already have to putting </p>after so many reference links
    O well, keep it in mind next time when working from scratch.

  7. #7
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So in my css would I have
    what I have now
    p{text-indent:10%;text-align:justify;margin:5% 0}
    a{color:#CCCCFF}
    a:hover{text-decoration:none;border-bottom-style:solid;border-bottom-color:#FFF}

    and then add
    p + a {margin-top: -10px;display: block}

    and then in the html for paragraphs that are followed by a link I don't need anything?

  8. #8
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't think P + a is going to work for me
    On this page
    http://reference.sitepoint.com/css/a...iblingselector

    it shows it's not completely compatible with all browsers.

    Why is it so difficult to have different positions for different <a>s.

    Why won't this work?
    p{margin:5% 0}
    a{color:#CCCCFF}
    a.first{color:#CCCCFF;margin-top: -3%}

    and in the html for paragraphs followed by at least one link have

    <a href="http..." class="first">some test</a>

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Why won't this work?
    p{margin:5% 0}
    a{color:#CCCCFF}
    a.first{color:#CCCCFF;margin-top: -3%}
    If you are happy to add a class each time, that is fine ... except that <a>s are inline elements, so that top margin won't work by default. You have add display: block, as I mentioned above:

    Code:
    a.first{color:#CCCCFF; margin-top: -3%; display: block;}
    If you are going to go through the code and add classes, it would be worth adding a div or <p> around them too.

    Sibling selectors are well supported, except perhaps in IE6, which has less than 1% usage now. So effectively, it works in all browsers.

  10. #10
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Blocks cause a lot of problems with no unique benefit; if you don't want something to the right use a <br>. Here, artificailly creating a block (display: block) around the first reference link creates a new problem - there's an unwanted space between the first and second links.

    So you say margin-top: -3% works with one block invading the space of another block and that inline code can't invade the space of a block.

    I'm starting to thing I need two different <p>s
    p{margin:5% 0}
    p.first{margin-top:5%;margin-bottom:3%}

    What do you think?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could use display: inline-block instead of display: block to prevent the link taking up a line of its own. But at the moment I'm not really clear on your setup, so it's a bit hard to advise. It would be helpful if you could post a link or the code for an example page, with an indication of how you want it laid out. If you have a number of links together, it sounds like it would be better to wrap them in <li>s inside a <ul>.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Chris, unless I mistunderstand the issue (very possible ), the following example seems like what you are requesting:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
        Comments
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    body {
        padding:0px;
        margin:0px;
    }
    div {
        border:1px solid #0a0;
        width:400px;
        margin:0px auto;
    }
    p {
        margin-top:1.25em;
        margin-bottom:.25em;
    }
    
        </style>
    </head>
    <body>
    <div>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <a href="#">click me</a>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <a href="#">click me</a>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <a href="#">click me</a>
    </div>
    </body>
    </html>
    Let me know, please.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Acknowledging that anchors (inline devices) should be within a container (other than div.outer), this example is exactly like the previous one except that it puts <div>s around the anchors. Same look and feel. (Sorry, I'm a little "slow" today.)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?890828-How-To-Deal-With-Reference-Links
    	Started by Chris77, 2012.10.05 00:15
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    body {
        padding:0px;
        margin:0px;
    }
    div.outer {
        border:1px solid #0a0;
        width:400px;
        margin:0px auto;
    }
    p {
        margin-top:1.25em;
        margin-bottom:.25em;
    }
    .anchor {}  /* style as desired, if needed */
        </style>
    </head>
    <body>
    <div class="outer">
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <div class="anchor"><a href="#">click me</a></div>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <div class="anchor"><a href="#">click me</a></div>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <p>This is a sentence in a really short paragraph.</p>
        <div class="anchor"><a href="#">click me</a></div>
    </div>
    </body>
    </html>

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,800
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Lets analyze the situation here: you want the text in the anchor (reference link) to STILL be in its own line ( possibly why you decided to put it outside the P, even tho inline elements and block elements should NOt be siblings) but as such you want it to have different margins. Am I right?


    You could. wrap the anchor in it's own P tag. <p class="refLink'><a href="#">meh whatever</a></p> semantically one would wonder if a that is really a P anyway... so perhaps you could use a DIV instead of a P.

    BUT REALLY.. I submit that a reference link is part of the paragraph (or last part of the last paragraph in the group) it references.

    <p> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="#" class='ref'>meh whatever</a></p>

    You can then use something like : .ref{display:block; margin-top:2%;} this way you are adding space between the text and the ref link w/o affecting the margin between Ps

    BTW, if it hasn't been mentioned: margin 5% 0; (or margin-[top|bottom]:5%; sets the VERTICAL space between paragraphs to 5% of the WIDTH of the parent container. Is that what you want?

  15. #15
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Let me write back tomorrow.

  16. #16
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I ended up using this:

    CSS
    p{text-indent:10%;text-align:justify;margin:5% 0}
    .first{text-indent:10%;text-align:justify;margin:5% 0 1.5%}

    HTML
    <p class="first">


    where <p> is for no lnks after</p> and
    <p class="first"> is for links after </p>

    This way the vertical distance between two paragraphs when there's no links after the first paragraphs is 5% and the vertical distance between the first paragraph and a first link after the first paragraph is not 5% (it's 1.5%).


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
  •