I have:
name: james
but I want to be shown as:
name:
james
Here's a live example of this
HTML markup:
<p>
<span class="bla">name:</span>
<span class="bla">james</span>
</p>
CSS markup:
.bla {
display: inline-block;
}
Thanks in advance
inline-block isn't going to achieve what you are after, if you are wanting to do this by adding styles to the .bla class. Try changing it to display:block instead.
See my Example: http://jsfiddle.net/n1ck/NNpqq/1/
.bla {
display: block;
}
Or you can add some markup:
http://jsfiddle.net/n1ck/NNpqq/5/
<p>
<span class="bla">name:</span> <br />
<span class="bla">james</span>
</p>
How about
<p>
<span class="bla">name:</span><br/>
<span class="bla">james</span>
</p>
http://jsfiddle.net/luissanchezm86/NNpqq/
You can try
.bla {
display:block;
}
That's what breaks are for good sir.
<p>
name:<br/>james
</p>
http://jsfiddle.net/NNpqq/4/
Just put:
<p>name:<br/>James</p>
... and you can get rid of the CSS. If you need to adjust line-height, apply it on the "br" tag via CSS.
As a sidenote, don't repeat the "bla" class in your HTML markup (unless you have a specific reason to do so). You can reach it through the <p> parent to reduce markup and make your code cleaner:
CSS:
p.bla {}
p.bla span {}
HTML:
<p class="bla">
<span></span>
<span></span>
</p>
Related
I am trying to display a formula. The denominator is long in text and I wanted to break line. Can someone please help?
My current code:
<p>
<sup>Active Subscribers</sup>
<span style="font-size:30px;">/</span>
<sub>Total Number of Subscribers</sub>
</p>
My result is: Active Subscribers/Total Number of Subscribers
What I want:
Active Subscribers/Total Number
of Subscribers
But with sup and sub tags. Sorry I don't know WHy I am not able to add images.
Here is a codepen link: https://codepen.io/rashmeereddy25/pen/wZBQmx
just remove the br tag and add the css rules:
sub{
display: inline-block;
width: 80px;
}
sub{
display: inline-block;
width: 80px;
}
<p>
<sup>Active Subscribers</sup>
<span style="font-size:30px;">/</span>
<sub>Total Number of Subscribers</sub>
</p>
When I add a br tag:
<p>
<sup>Active Subscribers</sup>
<span style="font-size:30px;">/</span>
<sub>Total Number of Subscribers</sub>
</p>
I need the "of Subscribers" under "Total Number"
I guess you could use css grid like this:
<div class="grid-container">
<div class="grid-item"><sup>Active Subscribers</sup>
<span style="font-size:30px;">/</span>
</div>
<div class="grid-item">
<sub class="tete">Total Number <br> of Subscribers</sub>
</div>
</div>
And css:
.grid-container {
display: inline-grid;
grid-template-columns: auto auto auto;
}
furas was not far...
see => https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
sub {
display: inline-block;
vertical-align: text-top;
}
<p>
<sup>Active Subscribers</sup>
<span style="font-size:30px;">/</span>
<sub>Total Number <br> of Subscribers</sub>
</p>
Like I said, MathML can do this pretty easily: https://jsfiddle.net/2gjsnxqd/
<math>
<mfrac>
<mi>Active Subscribers</mi>
<mi>Total Number of Subscribers</mi>
</mfrac>
</math>
Of course, support isn't what it should be, given MathML is part of the HTML standard: https://caniuse.com/#feat=mathml.
Here's what I see, since I use Firefox as my primary browser:
If you decide to go this route in the future, I'd start here: Daniel I. Scully - A Beginner's Guide to MathML
My html is linked to the right CSS file and everything and when I point any other element to change color it workes but everytime I deal with classes even when I put .class {color: red;} it doesn't work and for the span[yes]{color: purple;} as well.Is it maybe an outdated CSS, something I need to update?
<!doctype html>
<html>
<head>
<title>Css for bigginers</title>
<link rel="stylesheet" type="text/css" href="../Sandbox/syntax.css">
</head>
<body>
<div>
<span >WHats poppin</span>
<span class= "class">yo Im a span tag</span>
<span class= "deck">yo<strong>Im a span tag</strong> </span>
<span class= "deck">yo Im a span tag</span>
<span class= "yes">yo Im a span tag</span>
im a spanner
<p>This is good</p>
<p>The world is beutiful</p>
<p class="test">I know tell me about it</p>
</div>
</body>
</html>
/***** CSS FILE *****/
span[yes]{
color: purple;
}
This is not how you refer to a class. To refer to a class, you must do it like this:
.yes{
color: red;
}
<span class= "yes">yo Im a span tag</span>
You need to use span.class and span.yes instead of span[yes]. A good practice is not to name the class as class or span or any any keywords used in html or css selectors.
By span[yes] you are addressing to spans that have yes attribute. Instead use
.deck{
color: red;
}
where .deck is the name of the class you set in the html element:
<span class= "deck"></span>
In CSS, span[yes] means a <span> element which has the attribute yes, which is obviously not the case in your code. Either span.[class="yes"] or the shorthand span.yes will work. See the chapter Selectors in the CSS specification.
Ok i have a simple question maybe i am missing something stupid here but I have this little block of html
<div class="span2">
<span class="price flRight salePrice">$11.25 <span>$4.99</span></span>
</div>
With this CSS
.span2 .salePrice{text-decoration:line-through;}
.span2 .salePrice span{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}
But why is the line through on the second span I added important and figured it would be overwritten but it isnt. Why is this not taking?
I have a simple fiddle set up incase it helps http://jsfiddle.net/XJwns/
I am sure i am overlooking something stupid here but please point me to my mistake
Your CSS is telling it to put a line through .salePrice, which is what it is doing, child <span> and all.
The more "standard" way of doing this is:
<span class="price flRight salePrice"><del>$11.25</del> <ins>$4.99</ins></span>
You can then style the old and new prices independently.
Because you can't "cancel" the line-through coming from the parent element. You can, of course, separate them into two siblings spans.
HTML
<div class="span2">
<span class="price flRight salePrice">$11.25</span> <span class="other">$4.99</span>
</div>
CSS
.span2 .salePrice{text-decoration:line-through;}
.span2 .other{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}
See here: http://jsfiddle.net/XJwns/1/
It's because your span's are nested, the outer strikethru overlays your inner span. Unnest them and apply styles separately, so you don't have to use !important:
<div class="span2">
<span class="price flRight">$11.25</span><span class="salePrice">$4.99</span>
</div>
.span2 .price{text-decoration:line-through;}
.span2 .salePrice {color:#cd202c;font-weight:bold;margin-left:5px;display: block;}
http://jsfiddle.net/UBsm8/1/
if you set nested child as inline-block, text-decoration is applied because layout is triggered somehow.
http://jsfiddle.net/XJwns/4/
to have this inline-box to slide under text, you need parent to have a reduced width, this is more like a trick.
.span2 .salePrice {
text-decoration:line-through;
}
.span2 .salePrice span {
color:#cd202c;
font-weight:bold;
margin-left:5px;
text-decoration: none !important;
display:inline-block;
}
.salePrice {
display:inline-block;
width:1em;/* will force to wrap words, boxes in lines */
}
In following example:
Line1 <br /> Line2
I'm using <br /> to force Line2 to go to next line, but as far as I know there is no cross browser friendly way of setting the height of br. What is an alternative method I could use?
Use differents blocks :
<p>Line1</p>
<p>Line2</p>
Normally, using <br /> is old way of breaking a line.
You should use <p>, <div> or some block level elements and give them top or bottom margins.
p {
margin-top:5px;
margin-bottom:5px
}
Using CSS you can control the line-height property of any element.
someElement {
line-height:12px;
}
Now you may simply set this for an element, or use it on the entire HTML to provide uniformity across the document. This is safe, cross-browser compatible and easy to use.
You can use css line-height property along with <br/> tag to control spacing between lines.
<style>
.small
{
line-height:100px;
}
</style>
<p class="small">
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
</p>
I add a <div>, best way for me, with CSS margin. Or,
The <p> tag.
Use padding & / or margin css attributes.
You can add a <div> like this
<div style="height: [put your height here]; display: block;"></div>
Seems to work for me, as shown here:
<span>This is the previous line!</span>
<div style="height: 50px; display: block;"></div>
<span>This will be 50 pixels below the previous line.</span>
You can even use a span!
<span>This is the previous line!</span>
<span style="height: 50px; display: block;"></span>
<span>This will be 50 pixels below the previous line.</span>
I really need help :)
I have to put multiple words in a line, each with a different color, I tried wrapping each word in a <div> </div> and styling, but it seems it makes a new line between words.
Try using <span>.
<div>s are used for block-level elements. <span> is used for inline elements, such as text enclosed in a <p> element.
Further reading: Span and div
That's because <div> is a block element. Try <span> (an inline element) instead.
Use a Span tag instead, like
This <span style="color:red;">text</span> is red, but <span style="color:blue;">THIS</span> text is blue!
<div> is a block-level element. This means you either need to apply a display: inline style to it or better yet, use an inline tag such as <span>
use
<span>Text Here</span>
And style it in your css.
Use <span> </span> It is what it is mean to.
Then you can set css classes.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My web</title>
<style type="text/css">
yellow {
color: yellow;
}
</style>
</head>
<body>
Span is not at the <span class="yellow">yellow level</span>.
</body>
</html>