How To Deal With Reference Links

[Chris77]

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

[ralph.m]

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

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.

[Chris77]

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

[ralph.m]

You may need to add this for it to work:

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".

[Chris77]

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

[ralph.m]

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:

<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.

[Chris77]

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?

[Chris77]

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>

[ralph.m]

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:

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.

[Chris77]

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?

[ralph.m]

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>.

[ronpat]

Chris, unless I mistunderstand the issue (very possible ), the following example seems like what you are requesting:

<!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.

[ronpat]

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.)

<!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>

[dresden_phoenix]

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?

[Chris77]

Let me write back tomorrow.

[Chris77]

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%).