I've tried marking up a letter, and I'm wondering why when I use span class, css is not implemented (date doesn't move to the left), but when I use div class, css is implemented. (date moves to the left). I assumed both should work but one is a block level element and the other is an inline. I changed this line:
<div class="receiver-column"> 20 January 2016 </div>
to
<span class="receiver-column">20 January 2016 </span>
Heres the html code:
body {
max-width: 800px;
margin: 0 auto;
}
.receiver-column {
text-align: right;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
p,
ul,
ol,
dl,
address {
font-size: 1.1em;
}
p,
li,
dd,
dt,
address {
line-height: 1.5;
}
<p class="receiver-column"><strong>Dr. Eleanor Gaye </strong> Awesome Science faculty <br> University of Awesome <br> Bobtown, CA 99999, <br> USA <br>
<strong>Tel</strong>: 123-456-7890 <br>
<strong>Email</strong>: no_reply#example.com </p>
<div class="receiver-column"> 20 January 2016 </div>
A spanelement is inline, and therefore it is only as wide as its content (i.e. typically the text it contains). Now if you apply text-align: right to it, even if the text is aligned right, that would be only within the span's width, which is only as wide as its content. So that simply won't make a difference.
Therefore, if you want to use text alignment, use a block element like div, p , h1, h2, h3 etc.
Span is by default display: inline element while Div is Display : block
Related
Edit 3/18/22: I recently checked several Terms of Use and similar documents and found run-in headings are frequent in this type of document but always incorrectly formatted as <strong> rather than as headings, so this issue appears to be much broader than academia style guides.
I have been wrestling with the format of run-in headings for years. This is not a minor problem, because one of the top styles in academia and scholarly work, APA, requires (APA is strict, not flexible like some style guides) run-in headings for both level 4 and 5 headings (https://apastyle.apa.org/style-grammar-guidelines/paper-format/headings)
Many other academic styles also have run-in headings — for example, Chicago's five heading levels; and Harvard Extension's "C" level headings.
I used to just format run-in headings as bold, but that does not correctly interpret the document structure for assistive technologies. So I now use the CSS below, since display: run-in is not currently a CSS option. The results are glitchy.
For instance, a break appears after the heading when the heading wraps on the browser page. Any suggestions for better code?
H4.enpara {
text-indent: 2em;
display: inline-block;
break-before: column;
margin-bottom: -1em;
}
H4.enpara + P {
display: inline;
margin: 0 0 .7em 0;
}
Original Answer
Note: the concept was correct, but it had flaws, see the h2 heading "Edit, it was more complicated than I thought"
Original answer:
Could we not just use inline on both and apply a left-margin to the heading?
Then for spacing we just add a 0.15em margin to the left of the run-in paragraph.
The only down side is that you can end up with a double space as an extra character is automatically added for an inline paragraph and heading in Chrome.
The only solution I have for that would be to add a spacer class to headings that take up more than one line manually (the margin-left).
It is minor though as with a bit of fine-tuning you can see it is barely noticeable. It is still more accessible than using bold as you pointed out and I don't think the spacing difference is large enough to cause any problems to people with dyslexia etc.
h4, h5 {
margin-left: 2em;
display: inline;
}
h4 + p, h5 + p {
display: inline;
margin-left: 0.15em;
}
<h4>a long heading that will wrap onto two lines to ensure that browser wrapping does not break our run-in system</h4><p>a paragraph</p>
<p>another paragraph that does not have a run-in</p>
<h4>Another heading</h4>
<p>another paragraph with a run-in.</p>
<p>a longer paragraph to ensure there isn't an issue with the run-in happening for the heading itself on a paragraph
<h5>a heading level 5 to test it works for that also</h5>
<p>a further paragraph that should have a run-in also</p>
Edit, it was more complicated than I thought
The above kind of works, but you can get run-in where it is not intended if you happen to only have a single paragraph after a h4 or h5 and then use another h4 or h5.
I may have made a mistake and this is not extensively tested, but this appears to be the correct formatting requirements for all heading levels.
I had to use a couple of tricks to account for run-in on a h4 followed by a h5 with only a single paragraph and to counter a spacing issue that introducing the ::after pseudo element caused.
I think the below behaves correctly, but you would need to test it extensively as I said.
The only thing it doesn't cover is correcting Title Case as that isn't possible without JS as far as I am aware.
Finally I have set all spacing in REM, then if someone increases their browser size it will scale appropriately. The only thing that you may have to look at there is whether a 2rem margin on the left works or whether that should be a fixed amount (if you quadrupled the font size for example the left margin would be too large probably).
The fix would be to set the left margin in a fixed unit such as px, I will leave that up to you to investigate / decide.
h1, h2, h3, h4, h5{
font-size: 1rem;
font-weight: bold;
}
h1{
text-align: center;
}
h3, h5{
font-style: italic;
}
h4, h5 {
margin-left: 2rem;
display: inline;
}
h4 + p::after, h5 + p::after{
content: "";
height: 1rem;
display: block;
clear: both;
}
h4 + p, h5 + p {
display: inline;
margin-left: 0.15rem;
}
h4 + p + p,
h4 + p + h1,
h4 + p + h2,
h4 + p + h3,
h4 + p + h4,
h4 + p + h5,
h5 + p + p,
h5 + p + h1,
h5 + p + h2,
h5 + p + h3,
h5 + p + h4,
h5 + p + h5{
margin-top: 0rem;
}
<h1>H1 - Centered, Bold, Title Case Heading</h1>
<p>Text begins as a new paragraph.</p>
<h2>H2 - Flush Left, Bold, Title Case Heading</h2>
<p>Text begins as a new paragraph.</p>
<h3>H3 - Flush Left, Bold Italic, Title Case Heading</h3>
<p>Text begins as a new paragraph.</p>
<h4>H4 - Indented, Bold, Title Case Heading, Ending With a Period.</h4>
<p>Text begins on the same line and continues as a regular paragraph.</p>
<h5>H5 - Indented, Bold Italic, Title Case Heading, Ending With a Period.</h5>
<p>Text begins on the same line and continues as a regular paragraph.</p>
<h2>H2 - Flush Left, Bold, Title Case Heading</h2>
#Graham Ritchie's answer seems to work well, but not a fan of the h4 + p + p, h4 + p + h1.... Hopefully this works well for you:
h1, h2, h3, h4, h5 {
font-size: 1rem;
font-weight: bold;
}
p {
text-indent: 2rem;
}
h1 {
text-align: center;
}
h3, h5 {
font-style: italic;
}
h4, h5 {
display: inline;
margin-inline-start: 2rem;
}
h4 + p, h5 + p {
display: inline;
margin-inline-start: 0.5rem;
}
h4 + p::after, h5 + p::after {
content: "";
display: block;
margin: 1rem;
}
<h1>H1 heading</h1>
<p>Text following h1</p>
<h2>H2 heading</h2>
<p>Text following h2</p>
<h3>H3 heading</h3>
<p>Text following h3</p>
<h4>H4 heading</h4>
<p>Text following h4</p>
<p>Text following h4 + p</p>
<h4>H5 heading</h4>
<p>Text following h5</p>
<h5>H5 heading following h5 + p</h5>
<p>Text following h5</p>
<h2>H2 heading following h5 + p</h2>
<p>Text following h2</p>
I have a pseudo element that I'd like to have placed to the left of it's pertaining element (.alpha).
But when that element contains a block element (.beta), the pseudo element gets placed above everything.
Is there a workaround for this or is it impossible to have block elements inside an element with pseudo-element?
Here's a live example.
<div class='alpha'>
<div class='beta'>paragraph text</div>
</div>
.alpha:before {
content: "this is ";
font-weight: bold;
font-style: italic;
}
Method # 01:
Use an inline element for class .beta like span, em etc. in your code.
.alpha:before {
content: "this is ";
font-weight: bold;
font-style: italic;
}
<div class='alpha'>
<span class='beta'>paragraph text</span>
</div>
Method # 02:
Add float: left with some margin-right on your pseudo element and set its layout if you have mixture of inline and block elements inside parent.
.alpha {
overflow: hidden;
}
.alpha:before {
content: "this is ";
font-weight: bold;
font-style: italic;
margin-right: 4px;
float: left;
}
<div class='alpha'>
<div class='beta'>
paragraph text
</div>
</div>
Add
.alpha:before {
content: "this is ";
font-weight: bold;
font-style: italic;
}
.beta {display:inline;}
By making the beta div no longer a block element, you achieve your desired behaviour.
https://jsfiddle.net/xs1s8Lee/1/
I am needing to indent all elements after headings to give a visual structured layout.
I have seen that this is possible in the this question :
Indent all tags following h2 until next h2 is hit using CSS
However, I am unable to "reset" when going back a level.
To be more clear, I need to have progressive indents which cancel when moving back.
So
H1
H2
.....
H2
.....
H3
....
H2
.....
H1
....
If possible, I would prefer to not use enclosing DIV's but rather pure CSS.
Is this possible ?
Here is a code snippet for indenting. I hope I understand what you want correctly.
* {
margin: 0;
}
h1 ~ *:not(h1) {
margin-left: 1em;
}
h2 ~ *:not(h1):not(h2) {
margin-left: 2em;
}
h3 ~ *:not(h1):not(h2):not(.h2):not(h3) {
margin-left: 3em;
}
h4 ~ *:not(h1):not(h2):not(.h2):not(h3):not(.h3):not(h4) {
margin-left: 4em;
}
<h1>H1</h1>
<h2>H2</h2>
<h2>H2</h2>
<p class="h2">test</p>
<h3>H3</h3>
<p class="h3">test</p>
<h4>H4</h4>
<p class="h4">test</p>
<h2>H2</h2>
<p class="h2">test</p>
<h1>H1</h1>
<h2>H2</h2>
<h2>H2</h2>
<h1>H1</h1>
UPD:
Oh, I see about other elements - sorry didn't get it. Maybe somehow like this?
You can use the CSS text-indent property.
h2, h2 + * {
text-indent: 50px;
}
h3, h3 + * {
text-indent: 100px;
}
Ok, here is the solution which works for me :
h1 + *:not(h1)
{
margin-left: 0em;
}
h2 + *:not(h2), h2
{
margin-left: 20px;
}
h3 + *:not(h3), h3
{
margin-left: 40px;
}
The key is to use the plus sign (+) as opposed to the tilde sign (~).
Hope this helps others also.
Edit : Ok, spoke too soon. This will successfully indent and outdent, but only for the first sibling element. If there are multiple sibling elements, it will fail.
Any ideas ?
Trying to add a top-margin to an adjacent sibling.
<div class="container">
<h2>Header 1</h2>
<p>Some text and sentences...</p>
<h2>Header 2</h2>
<p>Some more text and sentences..</p>
</div>
Normally I would accomplish top-margin on "Header 2" by using css on the adjacent siblings.
p + h2{
margin-top: 12px;
}
However, h2 has margin defined via
.container h2{
margin: 24px 0px;
}
How can I make the adjacent siblings css work while overriding the .container h2 css?
Try the following:
.container > p + h2{
margin: 12px;
}
That is:
Select h2 elements...
...which immediately follow a p element...
...which is a child of an element with class container.
Since .container > p + h2 contains 1 class and 2 elements, it will override .container h2, which only has 1 class and 1 element.
This should work
.container p + h2 {
margin-top: 12px;
}
.container h2 is more specific than p + h2 so it is taken into consideration. You need a more specific selector to override the margin.
This should be "more specific" and override:
.container p + h2 {
margin-top: 12px;
}
I want to put a space after all the headers using CSS. Like this:
if h1 = add a space after
else if h1 + h2 = add a space after also but no space in between
This is my HTML code
<article>
<h1>Title 1</h1>
...
</article>
<article>
<h1>Title 1</h1>
<h2>Title 2</h2>
...
</article>
For the CSS
h1, h2 { padding-bottom: 20px; }
The problem is, there is a space also between h1 and h2. I tried this code below but only those articles with h1 and h2 have a space after.
h1 + h2 { padding-bottom: 20px;}
Is there a way to do this? Or I should just use the h1 + h2 in CSS and add < br > for h1 only?
There's a few ways to do this, none pretty.
/* #1 */
h1 + *:not(h2),
h2 + *:not(h3) { /* etc */
padding-top: 20px;
}
/* #2 */
h1, h2 {
padding-bottom: 20px;
}
h1 + h2 {
margin-top: -20px;
}
(and variations of these.)
The problem is there is currently no way to select "backward," i.e. apply styles to an element based on what appears after it. There is only the ability to select "forward," using the + or ~ sibling combinators. So you can't override the style on an <h1> based on the existence of a subsequent <h2>.
In the CSS4 selectors draft, there is a method of specifying the subject of the selector, using the $ sign. In that case the code would look like:
h1, h2 {
padding-bottom: 20px;
}
$h1 + h2 {
padding-bottom: 0;
}
/* or even */
h1:not($h1 + h2), h2 {
padding-bottom: 20px;
}
This isn't currently available in any browsers, however.
Is there no way to know when generating the HTML if the h2 is following the h1? That seems like the best way to handle this. Then you can make a simple css rule for h2.follows_h1 { margin-top: -5px } or whatever fits exactly what you need.