SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    line break without <BR>

    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
    gorillaweb is a small London based digital design agency.

  2. #2
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok but how would I go about suppressing the additional line break for the H1 element in CSS?
    gorillaweb is a small London based digital design agency.

  4. #4
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    gorillaweb is a small London based digital design agency.

  6. #6
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!!

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to note, using this method, you will still get a line break to simulate a <BR>, but not <BR><BR>.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!

  9. #9
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's great - I was looking to simulate just a single <br>

    Now let's check out the browser support for this!

    Thanks again
    gorillaweb is a small London based digital design agency.

  10. #10
    SitePoint Addict
    Join Date
    Sep 2000
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!
    You can use: <br/>

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •