SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Edinburgh
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Formatting h1 h2 h3 with CSS

    High I know you can alter the size color and appearance on h1 h2 & h3 tags using CSS (which is what I want to do). However my problem is the space that is forced between text in these tags and any subsequent text.

    Is there any way that I can get the text between h tags appear just the same in a line of text as it would without the tags ?

    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    margin: 0;

    should do the trick

    (or set it to a larger value than 0 if it becomes too close)

    -Sam
    Sam Hastings

  3. #3
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and there's padding too, and don't forget about line-height as well

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Edinburgh
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - have you any ideas if it is possible to get it to act without making anything after it appear below ie so that you could just put it in a line of text and you would not notice ?

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Scottish Charlie
    Thanks - have you any ideas if it is possible to get it to act without making anything after it appear below ie so that you could just put it in a line of text and you would not notice ?
    display: inline;
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Edinburgh
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    display: inline;
    Thanks so if I have 'inline' and 'margin = 0' 'border = 0' - then this should display it as normal text within test as long as I set a 'size' attribute to the same as the surrounding text ?

    If so where does line height come into play and what does it do ?

  7. #7
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Scottish Charlie
    Thanks so if I have 'inline' and 'margin = 0' 'border = 0' - then this should display it as normal text within test as long as I set a 'size' attribute to the same as the surrounding text ?

    If so where does line height come into play and what does it do ?
    If you use display:inline then you lose the ability to apply block level stylings such as padding and margins. If you want to have this H tag appear in a sentence just as any text that is inline then go for it - e.g. "A heading tag right smack in the middle of sentence!"

    HTML Code:
    A <h4 style="display: inline;">heading</h4> tag right smack in the middle of sentence!
    If you only just wish to get rid of the line breaks and space above and below (or manage it a little better), then keep the display as a block (the default display) level tag and adjust these stylings accordingly:

    HTML Code:
    <h1 style="line-height:0.4em; 
      margin-bottom: -0.4em;">Hello World</h1> 
    <br />Yada Yada
    Play around with the line-height and margins, even padding if you like to get your desired result.

    -xDev

  8. #8
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May be what you are looking for is a paragraph with an embedded span.

    For instance if a what some text that is 16px high in blue with a little bit highlighted in bold red then I can do this

    HTML Code:
    <html>
    <head>
    <style>
    p {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: normal;
    	color: blue;
    }
    
    p span {
    	color: red;
    	font-weight: bold;
    }
    </style>
    </head>
    <body>
    <p>Here is a paragraph of blue text with 
     <span> a little bit highlighted in bold red</span> in the middle of it
    </p>
    </body>
    </html>

  9. #9
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xDev
    HTML Code:
    A <h4 style="display: inline;">heading</h4> tag right smack in the middle of sentence!
    If you only just wish to get rid of the line breaks and space above and below (or manage it a little better), then keep the display as a block (the default display) level tag and adjust these stylings accordingly:
    But if you put heading tags in a sentence does the sementic nature of the HTML document change? Does JAWS (for instance) still recognise it as a heading? And is there a danger that it just becomes another visual style rather than an element of structure?
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  10. #10
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Accessibility is always a danger because CSS is so powerful. The ability to switch a block level element to an inline element, or vice-versa is just a styling issue, that's all. A screen reader will still think its an h tag, act accordingly and through the whole semantic value (and meaning) of the page out of whack.... So, ya, it's not very accessible.

    Personally I would never use an h tag within a sentence. I was just showing him what the effect would produce if he set it's display to inline, because semantically that's what it's doing - making it behave as any text within a block.

    -xDev

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Edinburgh
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the above - I will have a little bit of a play with things and see how I get on.

  12. #12
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BenANFA
    May be what you are looking for is a paragraph with an embedded span.

    For instance if a what some text that is 16px high in blue with a little bit highlighted in bold red then I can do this

    HTML Code:
    <html>
    <head>
    <style>
    p {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: normal;
    	color: blue;
    }
    
    p span {
    	color: red;
    	font-weight: bold;
    }
    </style>
    </head>
    <body>
    <p>Here is a paragraph of blue text with 
     <span> a little bit highlighted in bold red</span> in the middle of it
    </p>
    </body>
    </html>
    I like that alot better than shoving in an H tag That would definitely be the way to go.

    I think he just wants to have a bit of control over the line-height, margins, padding etc. of H tags.

  13. #13
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem Scottish Charlie is that you have asked a very specific question without giving us the context in which it is to be used. This means that we are all trying to guess what you are trying to achieve and coming up with different ways of doing slightly differing things.

    A bit of context information would help if the solution you require has not yet been given.


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
  •