Hi folks. Wonder if someone could assist with the following, pls.
I created a div class as follows (“ednotes” = editorial notes):
.ednotes {
color:#0000FF;
font-size: .9rem;
line-height: 1.1rem;
text-align: justify;
}
The styling is fine, but the editorial notes are appearing with a space at the top, and no space at the bottom (ie: the next paragraph begins immediately below). I want it the other way around.
An example will show what I mean. Pls see this link.
My questions are:
-
How do I eliminate the space between “…pop songs” and the editorial notes?
-
How do I have normal paragraph spacing between the ed notes and the beginning of the next para (beginning “I recall The Scientists’ first gig…”)?
Appreciate any tips on the above.
Cheers
Welcome to the forum rolan,
here is what is probably happening … somewhere in you stylesheet ( or maybe this is the default) your P tags are set to have margin-bottom or padding bottom. So it’s the margin or padding from the PREVIOUS paragraph that is making it appear as if .ednotes as space at the top.
You could add a negative margin-top to .ednote, and margin/padding; both those values being the same as what you have set for your paragraph spacing.
hope that helps.
Hi, nolan,
.ednotes is a <div> with no margins applied.
Your paragraphs indeed have a bottom margin only.
If you want the ednotes to rest against the paragraph above them, you might consider reversing your paragraph spacing strategy and apply margin-top to the paragraphs instead of margin-bottom. By doing that, the inserted div with no margins will rest against the preceeding paragraph no matter where it is inserted in the flow of paragraphs.
Hi dresden_phoenix, and thanks a lot for your response. You corrected my thinking, and I’ve now managed to position the Ed notes just as I want them. Much obliged.
For the benefit of others who might come across this thread, I applied the following code to the relevant div (affecting the editorial notes):
.ednotes {
color:#0000FF;
font-size: .8rem;
line-height: 1.1rem;
text-align: justify;
margin-bottom: 14px;
margin-top: -24px;
width: 90%;
padding: 10px;
}
I’d also be interested in your feedback as to whether this coding has any drawbacks. I’m a novice at CSS, learning as I go but without any fundamental education on what’s the “right” and “wrong” ways to do things. If my solution is an inelegant cobbling together and there’s a better way, would really like to know.
Cheers!
I never would have thought of doing it that way, ronpat! Just shows there are many ways to skin a CSS cat! Thanks very much. Have added your solution to a file I’m compiling for future reference.
Cheers!
rolanstein
Hmm, just noticed that when the site is resized as narrow as it would be if viewed on a cellphone, the CSS styling disappears and the text defaults to standard.
However, if I apply the following on the contents page, the styling is maintained, no matter how narrow the site is resized:
<span style=“color:#0000FF; font-size: .9rem”><strong>*</strong>text here blah blah</span>
Can I assume from this that certain types of CSS styling are lost when a site is resized beyond a certain limit?
Is there a remedy?
Would be very interested in an explanation/recommendations for remedy if anyone can provide same.
Cheers
Just a guess, but it is probable that certain properties in the “main” css for all browsers are being overridden by more specific css in the media queries targeting narrow devices. Possibilities.
EDIT:
Looks like .ednotes is coded in the twentytwelve/style.css within a media query
@media screen and (min-width: 600px) {…}
Whenever the screen is narrower than 600px, that code is dropped.
Perhaps you have a stylesheet where it can be placed outside of any media query?
Spot on, ronpat! Closed off the media query so the .ednotes styling is outside it, and text defaulting issue solved! Thanks a lot!
May I ask a general question in relation to this, pls?
Which types of styling should go above the media query close-off, and which should come after - other than .ednotes, obviously? Is there any sort of general rule I should apply from now on? Or is it a matter of testing every stylesheet change I make by re-sizing the site to less than 600px to check whether the new code is maintained at cellphone-like widths?
Cheers
rolanstein, I’m not experienced enough to offer much information about responsive coding. Perhaps another member will pitch in and provide some guidance.
I think of media queries somewhat like mathematical sets, and how the media query is logically addressed determines the range of screens affected by its contents. Basically, code that should affect the site in all viewports should be outside of media queries. The stuff inside the queries either modifies the “main” site-wide code or introduces new styles as needed. To be comfortable with media queries, you’ll need to learn how to address them.
Because there are a variety of ways to skin that cat, there is no easy how-to answer! 
And how to that! From my limited experience of CSS, seems there are a variety of ways to approach just about everything!
Appreciate your feedback, ronpat.
Cheers