Printable View
Hello
I want to use headings in bodies of text without the additional line break that using H1, H2 etc gives eg.
I know I can achieve this using <div class="headstyle">heading<br></div> main text area etc
but is there a way of doing it without using the <br> tag using css?
Thanks again
the way I understood it is because H1, P etc are block elements they will always display a line break without you needing an actual line break! So use <H1>Heading</H1> and then just define your H1 in your css - that should work fine (although as a note I find that NS doesn't always like H1 etc)
Sarah
Ok but how would I go about suppressing the additional line break for the H1 element in CSS?
sorry wasn't sure which one you were after with or without line break, anyway you can get rid of line break BUT you need to be careful this will change all sections of your site.
in css type
H1, P {display:inline;}
You can add any number to this and bascially you are making all H1 and P inline elements so they run together BUT as I said you mightw ant to add a class to this to ensure that this only works for the section you want it to rather than the whole site - can kind of screw things up!
H1.inline, P.inline {display:in-line;}
then your heading would be <H1 class-inline>heading here<H1> etc...
You might want to try variations of this ie use heading1 for inline and H1 for block
enjoy and I hope that this helps
Sarah
Sarah thanks for that but I find that knocks out all the line breaks. What I'm looking to achieve is having a heading class with just one line break so the text appears directly under the heading.
I can't use a <br> tag because the client is in an xml frame of mind and doesn't want any non closed tags!!
Thanks for any help
yes it will knock out all of them... hmm okay not entirely clear on what you want but I will give it a go.... (either that post your site and the part which you need sorting..)
Anyway you want text with header and text directly below it (right with no huge gap)
So in css I would do this...
.header1 {
font-family:verdana;
font-size:14pt;
font-style:normal;
font-weight:normal;
text-align:left;
margin:0px 0px 0px 0px;
color:#990000;
}
P {
font-size: 11pt;
font-family:verdana;
text-align:justify;
margin:0px 0px 0px 0px;
}
then surround your header like so
<p class=header1>TITLE</p>
with the rest of your text like so..
<P>rest of text....</P>
No line breaks etc needed...
The looks like http://roadrunner.crxnet.com/bookhad/background.html the About is header 1 and the rest of text is P... you can change the gaps by altering the margin part where it starts at top and then goes clockwise (I think...)
Does this help? If not post back I'll stay online
Sarah
dare I say it but sometimes you just want to pick up the phone!!
Just to note, using this method, you will still get a line break to simulate a <BR>, but not <BR><BR>.
yep correct I agree but as I wasn't entirely sure on what was required i.e. line break or no line break I thought that I would cover all eventualities! I think that I covered both options here either way! we shall see! proof in the pudding etc etc!
that's great - I was looking to simulate just a single <br>
Now let's check out the browser support for this!
Thanks again
You can use: <br/>Quote:
I can't use a <br> tag because the client is in an xml frame of mind and doesn't want any non closed tags!!
That is an xml / xhtml compliant tag. All tags can be closed just include the /> at the end.
But be careful on browser compatibility w/ xhtml ... unless this is all done on the server side.