I'm trying to place normal size text on the same line as a header tag. Doing this put the normal size text on the next line because a header tag is a block element.
<h1>Header</h1>normal size text
Any help is much appreciated.
h1{display:inline;}
Will cause the H1 Tag to stop blocking
Or, if you don't want to use inline elements, float the h1 instead:
h1 {
float:left;
}
In some scenarios may need to wrap both the h1 and normal size text in a div, that's also floated left, to keep it contained on the same line:
<div id="foo"><h1>Hello</h1>World</div>
alternatively, you might want to try
<h1>Header <span class="normal">normal size text</span></h1>
, and style the .normal span using css to look like normal text. not semantic, but visually works even in IE6.
Related
I have a document like this:
This is some text.<br>
This is some more text.<br>
This is yet some more text.
This renders like this:
This is some text.
This is some more text.
This is yet some more text.
Is there any way to adjust space between lines, but only where the <br>'s appear? The output might look like this:
This is some text.
This is some more text.
This is yet some more text.
This is not the same as double-space, as long lines wrapping on the page would not appear with the extra space.
How can I adjust the amount of space between lines where <br> appears?
It is possible to target a <br> tag with CSS but it will not be very cross-browser compatible and it just isn't a very good idea because anyone looking at your code will assume you haven't got the faintest idea what your doing because there are certainly more appropriate methods to achieve your goal.
br {}
The <br> on it's own has no default height. If you have an HTML page with nothing but a <br> you have an empty page. The style on the <br> tag will be
<!-- HTML -->
<br/>
The page will have this styling
height: auto;
line-height: normal;
max-height: none;
min-height: 0px;
The height of that a <br> tag represents is inherited from the styling of it's parent container. Thus if it is nested within a paragraph; the <br> will equal the height of 1 line of text based on the line-height and font-size of that paragraph.
<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>
I now have an empty page but the page is 10 pixels tall because I specified that the paragraph should be 10 pixels and even though the paragraph is essentially empty, it's not empty because I have a break. Thus the break is equivalent to the height of 1 line of text.
The current CSS1 properties and values cannot describe the behavior of
the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break
between words. In effect, the element is replaced by a line break.
Future versions of CSS may handle added and replaced content, but
CSS1-based formatters must treat ‘BR’ specially.
- Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements
An appropriate solution would be to separate the upper and lower block into two containers (<p>) and set a margin between the two blocks. If you use a <p> tag you can style the space between paragraphs without adding unwanted space to the top paragraph like this..
// CSS
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.
Or merely adjust the line-height of the text if you don't mind the space between every other line increasing as well
You could potentially also find the pseudo-selector ::first-line useful.
Though I can't fathom why; I do believe in the fact that there can at times always be a good reason to break the rules.. If you absolutely positively are deadset on styling the <br> wrap it in a container and set the line-height of the container.
<div style="line-height:50px;"><br></div>
Yes you can...like by using line-height in css
.test{
line-height:40px;
}
Demo
You can use padding-top also
Demo2
I have a bunch of text and images in a line and i want to align vertically. It all seems to work except I just added some bold text and the bold text seems to show up a little lower than the regular text.
here is a screenshot:
here is a simpliried view of my html:
<span class="midAlign">
Filter: [<b>Apps: </b>My App Name ]
</span>
here is my css:
.midAlign * {vertical-align: middle;}
if I remove the bold tag, it seems to line up correctly:
The problem is that the .midAlign * only applies to the <b> element. Just removing the * solves the problem.
I have a bunch of text and images in a line
So when you use .midAlign * it applies to all the elements, so the face is you don't need to apply that property to all elements, you need that for img only so use
.midAlign img {
vertical-align: middle;
}
And it will solve the issue.
Demo
Also, when you use the * selector, it impacts the performance, you are using that for no good reason for this particular case.
I will explain you why that happened. b and img both are inline elements, so when you apply vertical-align: middle; it aligns the element to the baseline, so say we have an img and a b tag, so b will be vertically aligned middle considering the entire height of an element... see this
So when you are using middle as the value, it's middle but, to the entire element height and not just your text
Demo
So technically your b tag was aligned middle vertically, but it's just that you don't have to align that, so use specific element selector instead of a generalized * selector.
I have this sample text in my application : "welcome to stack over flow and welcome again". I am using this text and because of other elements, half of the text is coming down like this:
"welcome to stack over
flow and welcome again"
Now I need to give a space between these two lines.
This can be achieved with the "line-height" property, but it would effect other elements too.
Can anyone help me out?
Thank you.
You can use element specific line-height. So it won't affect other elements.
HTML
<span class="text">
welcome to stack over
flow and welcome again
</div>
CSS
body {
line-height:1; /*Global line height*/
}
.text {
line-height:1.5; /*Element specific line height*/
}
If the text is going to remain same then you can use break or can also use the text in two different tags. But using line-height will be better option as it will work even when text is changed.
In my HTML code whenever I use sentence like below :
<p> This is a example sentence </p> or
<h3> This is header Sentence </h3>
It is displaying from extreme left side but I want some space before my sentence starts. For this I am using non breaking space. But it looks very ugly since I need to use 5 to 10 times of non breaking space like this :
I tried to use also but in this case also i need to use 5 times. So what other options i have to make my sentence to start with some spaces??
You can use text-indent property to indent your text inside a p or h3
Alternatively, if you are looking to pad up entire paragraph or header, you should have a wrapper div and use padding or margin for p as well as h3.
But as you said you are using am sure what you are looking for is text-indent.
p.class_name {
text-indent: 20px;
}
Demo
I've edited your question though, as you only used html tag, I have also added a CSS tag, but if you want a HTML solution than take a look at pre tag
Have you tried using margins?
To always indent, use code such as this:
HTML
<p> This is a example sentence </p>
CSS
p{
margin-left:10px;
}
You can use padding for tag by using css like
p{
padding-left:10px;
}
What would be the proper way to do this? I have an <h1> tag, and I want to display a <a> that is inline with it.
display: inline
should do the trick. It will make the <h1> behave like any inline element.
By default the h1 tag has a display:block; Thus changing it to display:inline you will lose the normal feel of an h1. But your link will directly follow it.
Also why not just place the link within the h1 tag? ie:
<h1>Hello World</h1>
Or you could float it to the left (or right):
float: left;
However, this can cause other problems sometimes.
Also, margin-top: - height-of-h1 on a could do the trick - you have like 1000 options (almost literally), we can't tell you more until we see some sample code.
Or you could use a tag:
<h1>Important title <span style="float:right">Link</span></h1>