<div class="price heading-font">
<span>$5 000</span>
"/Day"
</div>
I'm stuck, I normally just go into styles, copy the element, and remove it through CSS but the text "/day" doesn't have a style. How can i remove the text?
You can make the font size 0 for the whole div and then make it something positive for the span within it.
Because the selector is more specific it will override the div’s setting.
This method has the advantage that the text you don’t want to show isn’t taking up space, but any borders, margins etc to the div remain.
div.price.heading-font {
font-size: 0;
}
div.price.heading-font span {
font-size: 16px;
}
You can use CSS to hide "/Day" text. First, apply font-size to 0 on .price class and then give the initial font-size to .price > span as follows:
.price {
font-size:0;
}
.price > span {
font-size: 16px; /* assuming 16px was your initial font size */
}
Related
Ok, first off I want you all to know that I have tried using the <span></span> tag (though maybe incorrectly).
Is there something I'm doing wrong with the <span></span> tag? Or is there something I need to do differently altogether?
Here is my current code to create a space without <br></br>:
#beforeImage span {
padding: 40px;
}
<span id="beforeImage">text</span>
2 things to fix:
you were applying the CSS to span of an ID selector, but you were using a span with an ID selector in your HTML.
span won't have padding because it is an inline element by default, so set inline-block or block
Snippet
#beforeImage {
padding: 40px;
display: inline-block; /* or block */
/* demo */
background: red
}
<span id="beforeImage">Foo bar</span>
<span> is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block ( or else but inline).
You might look for:
span{
display:inline-block;
padding: 40px;
}
beside, br could still be used
br {
line-height:3em;
vertical-align:top;/* debug FF/IE */
}
http://codepen.io/anon/pen/GoVdYY
But, do you really need an extra tag, could you not apply a bottom margin or padding to another element ?
Can simply target the Id of the span:
#beforeImage{
display:inline-block;
padding: 40px;
}
Or all spans:
span{
display:inline-block;
padding: 40px;
}
I am developing a front end HTML page using bootstrap and basic HTML code. I need to print price of a particular product say $63.
I want this to be in same line but the size of $ needs to be smaller than the number. How do I achieve this?
span { font-size: 3em;}
span b { font-size: 60%; font-weight: normal }
<span><b>$</b>63</span>
You could also avoid to use a nested element to wrap the currency sign and use the ::first-letter pseudoclass to style it, but this requires a block or inline-block parent element, e.g.
span {
font-size: 3em;
display: inline-block; }
span::first-letter { font-size: 60%; }
<span>$63</span>
Only HTML: using
Two span tags and 2. different font size in style
<span style="font-size: 25px;">Rs</span> <span style="font-size: 50px;">2000/-</span>
Check this http://jsfiddle.net/RPf4N/2/
html
<div id="mydiv">$<a>63</a></div>
ur css
#mydiv
{
font-size:20px;
}
#mydiv a
{
font-size:100px;
}
I changed markup in one page like this,
before change
<div class="header-wrapper header">
<h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>
after change
<h1 class="header-wrapper header">
<span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
</h1>
after changing the mark up the font size of "Excellence Holden" is increasing .It will happen or I am doing something wrong ?
css code:
.header-wrapper {
padding:15px 0;
}
.header-wrapper .dealer-name {
text-align: center;
font-size: 1.3em;
}
After the change, the font size set on the inner element, 1.3em, changes its meaning. The reason is when used in the value of the font-size element, the em unit denotes the font size of the parent element. Here the parent element is an h1 element, and the common and recommended browser default is that h1 element has a font size of 2em, i.e. twice its parent’s font size.
To override this effect, add the following:
h1.header-wrapper { font-size: 1em; }
You need to change the font size of the span in css, find the font defined for h1 then apply the same font to the tag
Because if you do not reset the font-size for h1, it automatically is higher than normal.
I would say that is a CSS related,
usually the new CSS files contains Font (Size, Family, weight) properties for <h1> tags.
please check both h1 and span CSS Attributes. you can use the browser inspectors (Chrome Inspect Element) to see the actual attributes.
It's because of your styling. When changing HTML like this you need to ensure that the styling is also changed accordingly.
For example:
div.header { font-weight:bold; }
div.header h1 { font-size:24px; }
The above CSS would be applied to the first HTML snippet, but not the second. You'd have to change this to:
h1.header { font-weight:bold; }
h1.header span { font-size:24px; }
And also ensure that there is no other h1 or span styling that may affect this.
Consider the following example: (live demo)
HTML:
<div>
<p>
<strong>Stack</strong>
<span>Overflow</span>
</p>
</div>
CSS:
p {
background-color: #aaa;
}
span {
background-color: #777;
}
How could I make <span>'s width to be all the available space?
Note: <strong> and <span> should be on the same line.
If you want the items on the same line with the full width taken up you could do this.
http://jsfiddle.net/Sohnee/Gfyjc/
p {
background-color: #aaa;
}
strong {
float: left;
}
span {
display: block;
background-color: #777;
margin-left: 40px;
}
But a better alternative would be to get the background-color run from the parent element.
If you don't need the span to actually be that wide, only have it look like it is, you can simply give the <p> the background colour of the <span> in your example, and the <strong> the background colour of the <p>.
p {
background-color: #777;
}
p strong {
background-color: #aaa;
}
See this example.
This only works correctly as long as the <p> has a padding of zero, though. Otherwise, you'll need the solution with the float.
Use display: inline-block to have possibility to set size and keep element positioned as inline elements. Mathias example changed to use inline-block: http://jsfiddle.net/gXDjZ/7/
span is basically an inline element
making it a block element using display:block; will add a \n before n after the element
so making it a block will take the span to the next line and you can float:left; on its sibling and bring it back to the same line
something like this
strong{
background-color: #aaa;
float:left;
}
span {
display: block;
background-color: #777;
}
you can also use padding-right:__px; in span
so that it takes up the adjacent spaces
span{ padding-right:433px; }
http://jsfiddle.net/gXDjZ/15/
I am not that good with html and css so i am using a template, but whatever i do know i try to use it.
Here is an image of the problem http://i53.tinypic.com/dmw6yt.jpg
As you can see the user test is actually on a new line. That is not how it's supposed to be. It is supposed to be on the same line as this text "Accounts stats for user X".
The html and css i use are
<div class="user">Account stats for user<div class="info">test</div></div>
div.user
{
font-size: 13px;
text-align: center;
}
div.info
{
font-size: 18px;
}
use inline element <span> instead of block element <div>
Inline elements are for elements like text that you want to display on the same line and then fall down below previous inline elements when there is not enough space left. Block elements are intended to be used for the structure of a site.
This is because a DIV automatically assigns a new line because it is a 'block-level' element. In a situation like this I'd swap out all of the <div> for <span> as these are an inline-element.
You could also use the CSS attribute display:inline on the <div> to override this behaviour.
You put the word "test" in new div. This means that this word will be on new row. Try using span with class or id instead of div. If you really want to use div for the word "test" you could assign float property or inline display
<div class="user">Account stats for user<span class="info">test</span></div>
.info
{
margin-left: 10px;
font-size: 18px;
}
If you automatically want it to be on the same line, i would suggest using <span> instead.
<span class="user">Account stats for user</span><span class="info">test</span>
And if you absolutely need to use divs then:
<div class="user">Account stats for user</div><div class="info">test</div>
With the CSS:
div.user
{
font-size: 13px;
text-align: center;
}
div.info
{
font-size: 18px;
float:left;
}
Either use a <span class="info"> instead of a <div>, or use these CSS:
div.info
{
font-size: 18px;
display: inline-block;
}
Normally you should prefer using a span, but there are several cases (e.g. if you want to specify a width for the element) that require a div. In your case as it stands, go with a span.
Try this:
div.user
{
font-size: 13px;
text-align: center;
display: inline;
}
div.info
{
font-size: 18px;
}
I think this will do the trick.
you could add 'display:inline;' to them and it should work.
Or you could float them both to the left, also would probably work.
'float:left;'
put this inside div.info
display: inline;
So your div.info class should look like this
div.info
{
font-size: 18px;
display: inline;
}