I want to have a heading, but without a paragraph break underneath, just a normal <br />
I used the h1 tag but that appears to place a paragraph break.
I have now tried the span class tag, however I cant get my span class to align to the right of my page.
My code:
.title {
text-align: right;
font: 14px;
font-weight: bold;
}
----------------
<p><span class="title">this is the title</span><br />
This is the paragraph textTry this:
In CSS:
.title { margin: 0px; }
In HTML
<h4 class="title">The title</h4>
<p>Some more text</p>
If you want this type of title in body text only, or just in one section of your web page try this:
In CSS
#bodyText h4 { margin: 0px; }
In HTML
<div id="bodyText">
<h4>Some title</h4>
<p>Now any H4 tag that is inside the "bodyText" DIV tag will get the desired affect.</p>
</div>
Now for some explaining in the CSS:
#bodyText h4 { margin: 0px; }
The space between "#bodyText" and "h4" is called the decendant selector (please ignore this if you already know it). The decendant selector says in this case that "any <h4> inside an element called "bodyText" will have a 0-pixel margin."thanks for all that info, but I think you missed what I really need to do.
Ican align my title to the right as long as its within a <h> tag, but I DONT want a paragraph break after the title. It the text must be on the line immediately below the title.
I tried both your methods, but they did not do this.
Because the body text needs to be placed within a <P> tag, it automatically starts with a paragraph break below the title.
Does that make sense?givethe paragraph a class and set the margins to 0 for that.
MNSOriginally posted by MotherNatrsSon
givethe paragraph a class and set the margins to 0 for that.
MNS
The problem with that is your start messing around with the <p> tag and what happens if they use more than one <p> tag? Do they use an id just for that one <p> tag? Nope. I would use the margin-bottom property with a negative value for the <h4> tag to bring up the paragraph of text right below the <h4> tag.yeh i looked into changing the <p> settings, but its too much mucking around. I use the <p> tag on too many occasions to be able to change it like that.
I considered using a negative margin for the bottom but didnt think it would be possible. I gave it ago after spufi advised it and it worked!
Cheers for that.
My final code is:
CSS:
h4 {
font: 14px;
font-weight: strong;
text-align: right;
margin-bottom: -20px;
}
HTML:
<h4>title</h4>
<p>body text is here</p>If you make a class for a p tag and only assign it to that one instance, it will only have an effect on the one p tag and not every p tag....
MNSA few things I'd like to point out. It may seem unnecessary at this point, but its really important if you intend to do a crisp job with your design.
First, the headers <h1>, <h2> ... have specific meaning. They should really be used as heirarchical headers. For example:
<h1> should be used as page header (or title; in fact you should repeat stuff from <title /> here).
<h2> should be used as section header
<h3> should be used as subsection header and so on.
<span class="title"> etc should be used if that styling is used purely for presentational purpose. If the word/phrase has a meaning (eg its title of the page), more apporpriate tags (eg. <h1> in this case) should be used
To get the desired visual style, use CSS on the various elements.
----------
For your example:
<h1>No margin after the heading</h1>
<p class="p1">I could use pseudo-classes to style this paragraph. But due to poor support in IE, I chose to give it a class="p1", instead.</p>
Now you can use:
h1 {margin-bottom: 0}
to remove the margin from the bottom of <h1>. However, the <p> has a top margin that needs to be removed to get desired effect.
p {margin-top: 0}
This means that all <p>s will have 0 top-margin. You may leave it like that (because margin-bottom has not been made 0, so there will still be margin between subsequent paragraphs).
Alternatively, as suggested by others, you may use
p.p1 {margin-top: 0}
You may also use
p.p1 {margin: 0}
which will set all margins to 0.
Of couse you will add in text-align, font-size etc to get the desired style.In CSS:
.title {
margin: 0px;
text-align: left | center | right | justify;
}
In HTML:
<h4 class="title">Subhead goes here</h4>
<p>Normal paragraph text will go here.</p>
I used the h1 tag but that appears to place a paragraph break.
I have now tried the span class tag, however I cant get my span class to align to the right of my page.
My code:
.title {
text-align: right;
font: 14px;
font-weight: bold;
}
----------------
<p><span class="title">this is the title</span><br />
This is the paragraph textTry this:
In CSS:
.title { margin: 0px; }
In HTML
<h4 class="title">The title</h4>
<p>Some more text</p>
If you want this type of title in body text only, or just in one section of your web page try this:
In CSS
#bodyText h4 { margin: 0px; }
In HTML
<div id="bodyText">
<h4>Some title</h4>
<p>Now any H4 tag that is inside the "bodyText" DIV tag will get the desired affect.</p>
</div>
Now for some explaining in the CSS:
#bodyText h4 { margin: 0px; }
The space between "#bodyText" and "h4" is called the decendant selector (please ignore this if you already know it). The decendant selector says in this case that "any <h4> inside an element called "bodyText" will have a 0-pixel margin."thanks for all that info, but I think you missed what I really need to do.
Ican align my title to the right as long as its within a <h> tag, but I DONT want a paragraph break after the title. It the text must be on the line immediately below the title.
I tried both your methods, but they did not do this.
Because the body text needs to be placed within a <P> tag, it automatically starts with a paragraph break below the title.
Does that make sense?givethe paragraph a class and set the margins to 0 for that.
MNSOriginally posted by MotherNatrsSon
givethe paragraph a class and set the margins to 0 for that.
MNS
The problem with that is your start messing around with the <p> tag and what happens if they use more than one <p> tag? Do they use an id just for that one <p> tag? Nope. I would use the margin-bottom property with a negative value for the <h4> tag to bring up the paragraph of text right below the <h4> tag.yeh i looked into changing the <p> settings, but its too much mucking around. I use the <p> tag on too many occasions to be able to change it like that.
I considered using a negative margin for the bottom but didnt think it would be possible. I gave it ago after spufi advised it and it worked!
Cheers for that.
My final code is:
CSS:
h4 {
font: 14px;
font-weight: strong;
text-align: right;
margin-bottom: -20px;
}
HTML:
<h4>title</h4>
<p>body text is here</p>If you make a class for a p tag and only assign it to that one instance, it will only have an effect on the one p tag and not every p tag....
MNSA few things I'd like to point out. It may seem unnecessary at this point, but its really important if you intend to do a crisp job with your design.
First, the headers <h1>, <h2> ... have specific meaning. They should really be used as heirarchical headers. For example:
<h1> should be used as page header (or title; in fact you should repeat stuff from <title /> here).
<h2> should be used as section header
<h3> should be used as subsection header and so on.
<span class="title"> etc should be used if that styling is used purely for presentational purpose. If the word/phrase has a meaning (eg its title of the page), more apporpriate tags (eg. <h1> in this case) should be used
To get the desired visual style, use CSS on the various elements.
----------
For your example:
<h1>No margin after the heading</h1>
<p class="p1">I could use pseudo-classes to style this paragraph. But due to poor support in IE, I chose to give it a class="p1", instead.</p>
Now you can use:
h1 {margin-bottom: 0}
to remove the margin from the bottom of <h1>. However, the <p> has a top margin that needs to be removed to get desired effect.
p {margin-top: 0}
This means that all <p>s will have 0 top-margin. You may leave it like that (because margin-bottom has not been made 0, so there will still be margin between subsequent paragraphs).
Alternatively, as suggested by others, you may use
p.p1 {margin-top: 0}
You may also use
p.p1 {margin: 0}
which will set all margins to 0.
Of couse you will add in text-align, font-size etc to get the desired style.In CSS:
.title {
margin: 0px;
text-align: left | center | right | justify;
}
In HTML:
<h4 class="title">Subhead goes here</h4>
<p>Normal paragraph text will go here.</p>