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;
}
Related
```
<p class='title'><em>WELCOME TO F-DRIVE</em></p>
<p class='b'>Free 5GB storage space!</p>```
```
this is my line of code. I want both of these sentence to appear in the same line.
my css rules are:
```
p.b{
font-size:32px;
font-family: bangers, fantasy;
margin-left: 20px;
}
p.b2{
font-size:32px;
font-family: bangers, fantasy;
margin-right: 20px;
text-align:right;
```
the second one appears a line below the 1st, how do i fix it?
You can use a span instead of a p tag. p is a block element while span is an inline element.
You can find out more about the difference here: https://www.sitepoint.com/community/t/p-vs-span/5298
The answer is display: inline-block, but if you want this kind of behaviour u should use span as span is inline element by default. It does not need any additional style
p {
display: inline-block;
}
<p>aaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbb</p>
I would suggest using <span> for that matter.
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;
}
Here is the simple html
<p> some text here </p>
more
and the css I tried
p+a{
color: #f00;
display: inline-block;
/* also tried float: left; */
}
To bring up the output as this
some text here more
I want more in the line of p.
p is a block level element. So you couldn't inline to a. Therefore you need to style your p as display: inline; or display: inline-block; and then give display: inline; or display: inline-block; to a
here is the fiddle.
You need to give the paragraph display: inline-block; as well, because it is a block-level element. Therefor it automatically takes the available space and pushes the anchor to a new line. Also you'll need to add the closing " to your href-attribute.
(If you're able to manipulate the markup of the paragraph – just add the anchor inside of it.)
HMTL:
<p>some text here</p>
more
CSS:
p {
display: inline-block;
}
p + a {
color: #f00;
display: inline-block;
}
Note: Please use classes to style things like that instead of elements. Add a class to your anchor and select it with p + .read-more or something like that.
just add the below css to your stylesheet.
p{ dislpay:inline-block;}
P is a block level element make it inline-block so next inline element come up next to p tag.
use this code
CSS:
p > a {
color: #f00;
display: inline-block;
font-size: 18px;
}
HTML:
<p>some text here more</p>
I have my HTML structure as follows:
<div id="id1">
<h1>my name </h1><h3>myemailid#xyz.com</h3>
</div>
The code automatically brings the <h3> on the next line. However, I want it next to <h1> without any line-change.
CSS:
#id1{
width: 900px;
padding: 30px;
background: #FFF;
text-align:center;
}
#id1 h3{
font-family:Arial;
white-space:nowrap
}
How can I modify to achieve my desired result?
You could use more semantic markup or simply modify the elements with CSS:
#id1 h1, #id1 h3 { display: inline; }
HTML headings behaviours with display: block by default. So they won't share same line with any other relative element.
Set their display to inline-block, and they will render one after the other, just as you expect.
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/