How do I change the line-height with this code? - html

<font color="#FFFFFF">
<span style="float: left; position: relative; top: 25px; left:100px">
text here<br>and more text here....
</span>
</font>

Perhaps there's a more imperative style associated with that element somewhere else in the cascade? Load that sucker up in Chrome and inspect the element via Web Developer extension - it will show the computed style on that element, and any overridden styles.
EDIT:
In response to comments:
<p style="line-height:1.2em;">Your text here</p>
That should do it, or adjust the 1.2em upward by small amounts. Remember though, this will only apply the line height style to that specific <p> tag. If you can /need to / want to be consistent, apply that style="line-height:1.2em;" to the paragraph's containing element, like:
<div style="line-height:1.2em;">
<p>Paragraph 1 will have the same line-height as</p>
<p>Paragraph 2.</p>
</div>

This is not true usage. I think the true usage is;
<span><font></font></span>
But you should try this;
<style>
.class1{
height: 100px;
width: 250px;
background-color: #000;
color: #fff;
font: normal 12px Verdana;
line-height: 100px;
}
</style>
<div class="class1">your text message is here...</div>
you can use another way for line-height in font property;
font: normal 12px/100px Verdana;

Related

How to have multiple p tags in Onsen UI toolbar?

I am trying to add multiple lines of text, one below the other in an Onsen UI toolbar at the bottom on the page. However, when I try adding p tags, only the first one appears on the tool bar!
I have tried using css techniques like adding heights to onsen col inside the toolbar, etc. Although this places text side by side, when I use the tag, the text disappears except first one again
<ons-toolbar style="background-image: none;" class="bottom_toolbar_div">
<div style="background:green; color:white;" class="center toolbar__center toolbar__title" style="font-size: 11px; font-family: sans-serif; width: 100%;">
<ons-row>
<ons-col >
<p class="tab-font-11">Payment mode </br> cod</p>
<p>Change</p>
</ons-col>
</div>
</ons-toolbar>
Ideally "payment mode" must come first and below it "cod" then "change"
Onsen UI applies navigation-bar__title class to div inside ons-toolbar. This class describes the following style:
.navigation-bar__title {
line-height: 44px;
font-size: 17px;
font-weight: 500;
color: #1f1f21;
margin: 0;
padding: 0;
overflow: visible;
}
The reason why you see only first line of the text is line-height. They set it equal to the height of the toolbar. So, everything below the first line of the text is actually rendered, but outside the toolbar.
Create your own class and set line-height equal to your font-size. Also set margin for p so that fit into 44px of the height of the toolbar
.myClass {
line-height: 11px !important;
font-size: 11px !important;
}
p {
margin: 5px;
}
Use your class on the page:
<ons-page>
<ons-toolbar>
<div class="center myClass">
<p>Payment mode <br> cod</p>
<p>Change</p>
</div>
</ons-toolbar>
</ons-page>
you're missing a closing </ons-row>

How I can set margin between lines in one paragraph?

I need to set margins between lines in one paragraph. How I can do this? I need to make something like this:
HTML:
<p>Any creative project is unique
and should be provided with
the appropriate quality</p>
I tried to put each line in <span> and set margin-bottom to it, but it not working.
Just wrap your whole text in a <span> tag and use line-height for margins and padding for spacing between text and background
Stack Snippet
p {
font: bold 30px Verdana;
}
span {
background: red;
line-height: 45px;
color: #fff;
padding: 3px;
}
<p><span>Any creative project is unique and should be provided with the appropriate quality</span></p>
If you want to use <span> with margin you need to set also display: inline-block; or display: block; to the <span>
p {
width: 200px;
}
p > span {
display: inline-block;
margin-bottom: 5px;
background-color: orange;
}
<p>
<span>Any creative project is unique</span>
<span>and should be provided with</span>
<span>the appropriate quality</span>
</p>
U can use <br> between each lines or just put a span with a height between each line, something like this:
<p>Any creative project is unique</p>
<span style="height: 10px;"></span><p>panand should be provided with</p>
Try using line-height property in your .css file referencing te element enclosing the text.

Paragraph height calculation with span and inline font-family

I am writing a web to print application, and trying to understand how the browser is rendering text within a paragraph. The link below was very valuable in understanding the relationship between line-height, font metrics and vertical-align:
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
However, as my codepen below demonstrates, the browser renders the overall height of paragraphs differently when its text nodes inherit from one font-family (Allura in this example), but are styled inline with another (Pt Serif in this example), as opposed to the paragraph itself simply having a font-family of "PT Serif".
https://codepen.io/itozer/pen/LzOoxp
<style>
p {
text-align: center;
width: 500px;
font-size: 50px;
line-height: 1.4em;
}
</style>
<p id="paragraph1" style="position: absolute; top: 0; left: 0; font-family: PT Serif;">
The lamp once out<br>
Cool stars enter<br>
The window frame.
</p>
<p id="paragraph2" style="position: absolute; top: 0; left: 550px; font-family: Allura;">
<span style="font-family: PT Serif;">
The lamp once out<br>
Cool stars enter<br>
The window frame.
</span>
</p>
(Note: I know that changing the vertical-align of the span of paragraph2 to top will render the paragraphs the same, but this ultimately does not solve my problem)
Can someone provide information about why the overall height of paragraph2 in the codepen above is greater than the overall height of paragraph1?

Controlling the line-height of a <br> tag within a heading tag?

I have a heading (<h1>) that has a sort of tagline below it. (I used a <small> tag and set font-size to a certain percent so it lines up perfectly when I change font-size of the heading for smaller screens. I'm using em units, if that matters.)
At first, the <small> tag sat nicely underneath the main heading, but I realized I forgot the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the spacing was all wrong.
Here's my code:
HTML:
<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }
And here's the before and after:
I have searched through StackOverflow, but I'm not sure how to proceed. I've read that a <br /> tag simply line breaks, but it inherits the line-spacing, and line-spacing: (value) does not work, nor do margins or padding.
What I need is a simple, cross-browser solution. I used Chrome for the screenshot. Support for IE6-7 is not needed, though support for IE8 would be nice.
The problem is caused by the default line height for the heading element. The default depends on the browser and on the font, but it tends to be about 1.1 to 1.3 times the font size. In any case, with a very large font size set, this creates a problem, because the line height value also sets the height of the second line. By CSS specifications, for a block element, line-height sets the minimum height of line boxes.
There are various ways around this. Setting display: block on the small element is one way, since then its default line height will be determined according to its own font size. Another way is to set a line height that is considerably smaller than the font size, e.g.
h1.banner { line-height: 0.5; }
You need to control the line-height css property (see W3 Schools) to make sure all browsers set the same height for each line.
It's actually advisable to do this to pretty much all elements containing text, which is why most people use CSS resets for production, which sets a default line-height across all elements.
In this case, the <span> and <h1> will likely have different line heights.
I'm sure the <br /> tag is doing nothing wrong, unless you've altered its properties with CSS which I would not advise.
There's also a shorthand version in case you're setting other font properties for the same element(s):
font: <font weight> <font size>/<line height> <font face>;
For example:
font: bold 12px/18px sans-serif;
Hope this helps.
Drop the <br /> and set the display of the <small> element to block.
http://cssdeck.com/labs/uoqfo4xw
<h1 class="banner">Justin Wilson <small>WEB + GRAPHIC DESIGNER</small></h1>
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100;
display: block; }
An alternative is to set the span to display: block; and then adjust the line-height of the <h2> tag.
I would do this, instead of using a <br /> tag.
Ultimately the answer that works as the best solution is found here (3rd example):
http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head
#cimmanon posted a very helpful solution, but to be safe, I'll stick with what Steve Faulkner said about this being a more semantic and SEO-friendly solution over using an <h1> tag and <h2> tag for a subheading, or inline elements inside a heading tag, regardless of styling.
Here's the solution:
HTML:
<header>
<h1 class="banner">Justin Wilson</h1>
<p>WEB + GRAPHIC DESIGNER</p>
</header>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd;
font-weight: normal;
margin: 1em 0 0 0;/*purely for display purposes, really*/ }
header > p {font-family: Helvetica, sans-serif;
font-size: 1.75em;
color: #888;
letter-spacing: 1px;
font-weight: 100;
text-align: center;
margin:0; }
And the live demo (might not look good to you without the free Arvil font, from Lost Fonts).
http://cssdeck.com/labs/xysgkffs
Thanks for all the answers thus far.
UPDATED....
Change <small> to <p> in HTML and CSS and add line to the h1.banner > p
margin: 0 auto;
FIDDLE

How to make vertical space between <p> tags smaller?

I have this wireframe I am working from:
http://problemio.com/problemionewest.pdf
and on the right side there is a list of categories. I made them here using tags: http://www.problemio.com like this:
<p style="color: #2e6ea4;"><strong>Environment</strong></p>
<p style="color: #B77F37; padding-left: 80px;"><strong>Homelessness</strong></p>
<p style="color: gray; margin-left: 20px;"><strong>HealthCare</strong></p>
<p style="color: #2e6ea4; padding-left: 80px;"><strong>Business</strong></p>
<p style="color: #B77F37; padding-left: 120px;"><strong>Relationships</strong></p>
<p style="color: gray; padding-left: 80px;"><strong>Philosophy</strong></p>
<p style="color: #2e6ea4; padding-left: 20px;"><strong>Social Issues</strong></p>
<p style="color: #B77F37; padding-left: 100px;"><strong>Technology</strong></p>
<p style="color: gray; padding-left: 50px;"><strong>Finance</strong></p>
<p style="color: #2e6ea4; padding-left: 130px;"><strong>Real Estate</strong></p>
But there is too much space between them vertically. Is there a way to decrease the vertical space between them?
Thanks!!
First of all, be warned: inline CSS is a terrible idea. Read on.
Short answer: You need to adjust your paragraph's margin property using CSS. Add this between your <header> tags:
<style type="text/css">
p {
margin: 5px 0;
}
</style>
Change the 5px to the desired margin height. Note this will change the margin on all paragraphs in your document. In order to avoid this, you need to assign the parent element of the paragraphs an id and reference it:
<div id="sidebar">
<p>Social</p>
// etc...
</div>
Then modify your CSS:
<style type="text/css">
#sidebar p {
margin: 5px 0;
}
</style>
Long Rant:
In reality, this is not the approach you should take. Defining inline or in document style makes maintenance and changes a nightmare, and you lose consistency.
Using external stylesheets makes it easier and quicker to edit and maintain your sites style and design. You also remain consistent.
That's a lot of content to get into here, you can Google this subject in your own time. But you should look into linking an external stylesheet and defining your styles there.
Take a look at the Bootsrap framework.
As #Mohamad suggested margin may be an issue. It may also me line-height.
p
{
line-height: 10px; //Or some other value to adjust
}