I have paragraphs with inline header spans that I'm trying to set to a grid. To make sure that multi-line headers are properly spaced, I'm using line-height; however, this results in too much space between the first and second lines of the paragraph. Also, multi-line headers seem not to be inlined. (Actual desired line-height of headers is 33px, but I made it 44px to accentuate the space between the first and second paragraph lines).
Please see http://jsfiddle.net/NbTvu/4/ and http://i.imgur.com/qkffaWl.png
CSS:
p {
font-size: 14px;
line-height: 22px;
margin-top: 22px;
}
span.h1 {
font-size: 24px;
line-height: 44px;
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
HTML:
<p>
<span class=h1>DISCONTINUING PPIs</span>
— Rebound acid-hypersecretion is an important consideration following abrupt cessation of prolonged treatment with PPIs. As a result, treatment should be tapered following prolonged or higher dose treatment with a PPI.
</p>
Thanks in advance!
Your font-size is too big for the thing you want to achieve.
Look at this: if I remove the font-size and line-height, it works perfectly:
http://jsfiddle.net/NbTvu/1/
span.h1 {
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
Try to style from here.
And using span class="h1" is very very bad. Use a regular h1 or give your span a better classname.
Or you can play a little with margins:
p {
font-size: 14px;
line-height: 22px;
margin-top: 20px;
padding:0;
}
span.h1 {
font-size: 24px;
font-weight: 600;
display: inline-block;
margin-top: 21px;
}
and remove line-height... http://jsfiddle.net/NbTvu/2/
Related
I have a Tabs header component and need the last two items to be positioned at the right. My code looks like this
li:nth-last-child(1),
li:nth-last-child(2) {
color: #c2c2c2;
margin-left: auto;
text-transform: uppercase;
font-size: 12px;
font-weight: 300;
}
The last item(1) is justified to the end but the second item(2) is being positioned close to the center of the container. Is there a better way to fix this using this approach?
Apply margin-left: auto; only on li:nth-last-child(2).
margin-left: auto; pushes the item and the following ones to the right.
Here is a quick article regarding flex and margins.
Updated code :
li:nth-last-child(1),
li:nth-last-child(2) {
color: #c2c2c2;
text-transform: uppercase;
font-size: 12px;
font-weight: 300;
}
li:nth-last-child(2) {
margin-left: auto;
}
I created a Wordpress site and I added a blockquote element in the about section of the homepage.
I used :before and :after to insert a qoute unicode in my blockquote element but the problem is the :after pseudo quote is not responsive.
I inserted a top: 45% right: 34% temporarily and it works only for min-width: 1200px screensize.
blockquote {
display:block;
background: #fff;
padding: 20px 20px 20px 75px;
margin: 0 0 20px;
position: relative;
width: 100%;
/*Font*/
font-family: Georgia, serif;
font-style: italic;
font-size: 36px;
line-height: 1.2;
color: #242424;
}
blockquote::before{
content: "\201C";
font-family: Georgia, serif;
font-size: 100px;
font-weight: bold;
color: #FFC107;
/*Positioning*/
position: absolute;
left: 10px;
top: -10px;
}
blockquote::after{
content: "\201D";
font-family: Georgia, serif;
font-size: 100px;
font-weight: bold;
color: #FFC107;
position: absolute;
top: 45%;
right: 34%;
}
I am not sure what you mean by "not responsive" ("responsive" isn't a very well-defined term...), but I assume you mean that the position of the inserted ::after element is only correct at a specific window size?
The opening quotation mark always appears at the same position relative to the text, but the closing mark is positioned to the edge of the <blockquote> element, not the end of the text inside it. At some window sizes, when the text wrapping leaves a large gap between the last word of the text and the edge of the element, the quotation mark is separated from the text. This is made worse because of the large font size.
In your specific case, a simple solution is to change the blockquote::after selector to blockquote p::after, and remove the top:45% and right:34% properties. The ::after element is then inserted at the end of the text, which means its position changes as the text reflows.
I was able to solve a similar issue by just adding this:
width: inherit;
For some reason, I've got an annoying padding/margin below my "large" font:
http://jsfiddle.net/o9gvgz8c/1/
I've enlarged the font more than I need, just to exaggerate the problem . The CSS in question is:
p::first-letter {
font-size: 40px;font-family: 'Special Elite',cursive;padding-right: 2px
}
If I don't use a larger font as the start character, then its fine... but as soon as I make the first letter larger, it adds this margin in.
How can I get around this?
JS Fiddle
adding line-height will fix it
p::first-letter {
font-size: 50px;
font-family:'Special Elite', cursive;
padding-right: 2px;
line-height:10px;
}
Make sure to define your ::first-letter line-height property as either:
p::first-letter {
font-size: 50px;font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 16px;
}
or
p::first-letter {
font-size: 50px;font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 100%;
}
http://jsfiddle.net/o9gvgz8c/3/
You can use relative sizing on the first letter and set the line-height property to the relative height 100%, like this:
p::first-letter {
font-size: 200%;
font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 100%;
}
You can remove that gap by specifying a line-height on the p element :
p{line-height:18px;}
DEMO
I have h1 tags with a span to have the first word in 1.4em and the rest in 1.2 em. If I write
.item.large h1 {
font-size: 1.4em;
padding-top: 0.3em;
margin-left: 0.4em;
}
.item.large h1 span {
font-size: 1.2em; // why is this not taken into account?
}
the words in the span are actually even larger than 1.4em, not smaller! Why is this unexpected growth happening and how do I style part of h1 tags correctly? Thanks!
Edit: If I use 0,857142857142857em for the span, I visually get 1.2em height, but that's not the way to do it, I'm sure...
em size unit is relative to the parent element. You can use rem unit to be relative to the document's main unit size, so to the constant one.
For the more information see http://snook.ca/archives/html_and_css/font-size-with-rem
Because em is a relative unit of measure (to its parent).
You can use this code on your CSS:
#title h1{
display: block;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
#title h1>span {
display: block;
font-size: 11px;
color: #fff;
}
And in your HTML code:
<h1 id="title">My Title<br><span>My Second Title</span></h1>
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}