APA Referencing
-
Hello,
I am a newbie to CSS and want to create a logical division using css for my APA references that I add to the end of each post. Below is an example that I currently include at the end of one of my posts:
<p>
<div class=”aligncenter” style=”height:1px;background-color:#000000;font-size:0;”>-
<p>
<p style=”font-size:80%;”>[1] Nave, R (2012) Heat and Thermodynamics. Retrieved from:
http://hyperphysics.phy-astr.gsu.edu/hbase/heacon.html#heacon</p>How might I create some CSS to improve how the solid grey line is drawn as a separator, with spaces each side of the line, and set the paragraph font-size please?
something along these lines as a crude guess?
/* APA Referencing */
APAref {
display:block
div{ padding-bottom:1px; solid gray; }
display:block
p{text-size:80%;}
}Cheers, Colin
The blog I need help with is: (visible only to logged in users)
-
Hi there, first off, a div is always a top level HTML element and should not be put into a paragraph element.
I would suggest something like this:
<div class="apa"> <p>[1] Some stuff</p> <p>[2] Some more stuff</p> <p>[3] More stuff</p> <p>[4] Last stuff</p> </div>And here would be the CSS:
.apa { border-top: 1px solid #000000; padding-top: 20px; font-size: 80%; } -
Thanks mate, worked a treat :)
Yes, I was remiss in not being more disciplined in my syntax, hence the silly div & paragraph mistake. I’ll be more diligent next time.
-
Expanding upon this concept for APA referencing, my next question is still related to this thread and therefore may be of value to the discussion for those interested in a similar approach.
If I want a Heading with a reference like follows, how do I do this in CSS?
MY Heading [1]
Looking at something similar to Tables, this is the concept of what I want?
/* APA Headings */
.MyH1 text {
padding-top: 10px;
text-align: center;
font-weight: bold;
font-size: 140%;
color: red;
}
.MyH1 ref {
text-align: left;
font-size: 80%;
}And, this is how I image using it?
<div class=”MyH1″>
<text>
<p>Thermodynamics</p>
</text>
<ref>
<p>[1]</p>
<ref>
</div>Better yet, the real trouble that I’m having is that doing this:
/* APA Headings */
.MyH1 {
padding-top: 10px;
text-align: center;
font-weight: bold;
font-size: 140%;
color: #339966;
}
.MySup {
text-align: left;
font-size: 80%;
}Puts the “[1]” under the heading and not next to it?
<div class=”MyH1″><p>Thermodynamics</p></div><div class=”MySup><p>[1]</p></div>
And this one doesn’t make the “[1]” smaller and different colour?
<div class=”MyH1″><p>Thermodynamics</p>><div class=”MySup><p>[1]</p></div></div>
Cheers, Colin
-
I found the following came close but doesn’t cater for the [1] as a different attributes.
<h1 class=”MyH1″>Thermodynamics <sup>[1]</sup></h1>
I then tested this but it also doesn’t work
<h1 class=”MyH1″>Thermodynamics <sup class=”MySup”>[1]</sup></h1>
The idea that I am trying to achieve is two sets of classes side by side.
-
Have you tried something like this?
<h1 class="MyH1">Thermodynamics <span class="ref">[1]</span></h1>I tried it and was able to independently style the reference.
-
This is the final solution that gave me what I was after.:
/* Custom Heading 1 */
.cH1 {
padding-top: 10px;
text-align: center;
font-weight: bold;
font-size: 130%;
color: #000080;
}/* Custom Heading 1 – APA Superscript */
.cH1Sup {
position: relative;
vertical-align: text-top;
top: -.5em;
font-weight: normal;
font-size: 50%;
color: #444444;
font-family: initial;
letter-spacing: 0;
}<p class=”cH1″>Thermodynamics <span class=”cH1Sup”>[1]</span></p>
Please let me know if I have broken any good practice rules :)
-
- The topic ‘APA Referencing’ is closed to new replies.
WordPress.com Forums 