SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot LORDGreg's Avatar
    Join Date
    May 2001
    Location
    Ptuj, Slovenia
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rewriting <H#> tag (example: <H5>)

    i know this works, but please, help me,.. because i don't know what did i edit in CSS to do that:

    if you wrote "<h5>text here</h5> blah.."

    the BLAH word will be in next line and not the same,.. what must i add in CSS H5 style to change this, so when i write the text like above, the text will stay where is and won't jump into next line?


    thanks for answer
    lordgreg, sloreactor.com
    http://www.sloreactor.com/

  2. #2
    Happy Holidays !! Paul S's Avatar
    Join Date
    Mar 2001
    Location
    Mexico
    Posts
    1,287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think is
    Code:
    H5 {padding:0px}
    Paul

  3. #3
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, well <H#> is a block level element, meaning itr is doing exactly what it is supposed to, and if you want it to display inline then you are not using the tag how it was designed, instead, try this:

    CSS File:

    Code:
    span.larger  {
      font-family:verdana,arial, sans-serif;
      font-size:2em;
      color:#d00;
      background:transparent;
      }
    And in your HTML:

    Code:
    The following is the <span class="larger">larger</span> text in action...
    Span is an inline element, just means you have to manually assign the properties for the class in the CSS file... H# tags are used for actualy headings that are on their own line...

  4. #4
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wizard, the only problem with your solution is that in browsers that dont support css there is no more weight placed on the heading then the rest of the text.

    you can display block level elements as inline elements using the display property.

    Code:
    h5 {
      font-family:verdana,arial, sans-serif;
      font-size:2em;
      color:#d00;
      background:transparent;
      display:inline;
      }
    and now for the majic H test we do

    I Lo<h5>ve iT</h5>ec

    you will now get something like
    I Love iTec

    instead of
    I Lo
    ve iT
    ec

  5. #5
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whilst that is a sollution, the problem is that the text is not "really" a heading if it is inline, so you are using the tag where it is not intended... And so in a browser that does not support CSS, would you want that text to be weighted, as it will still drop to a new line with the H5 tag...

  6. #6
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can think of several reasons why structuraly you would want to use a H tag inline, example would be

    <h1>Title of Article</h1> - date published

    or something to that effect. You have structural markup in your document (a good thing) and still get the presentation you desire.

  7. #7
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, true, good point

  8. #8
    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)
    oh yes...excellent point itec...
    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

  9. #9
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    folks, can anyone help me i cannot get any of the above to work on my ie6 sp1. can anyone give me any clues as to what to check (i resorted to copy & pastes to rule out any problems, with basic typos)

    i even resorted to starting out with a completley clean css file with only the one h1 statement & as basic an html file i can get from frontpage it & still didnt like the h1 selector/statement. the span worked, but dropped all colour formatting etc from it, as well as not being as elegant a solution as the inline selector.

    I know it should be able to work, but for whatever reason its not working. Any pointers gratefully accepted. (ill accept get shot of IE if thats what it takes


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
  •