SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Style for Header Tags

    I am using the <H1> tag, but controlling how it appears through CSS. Does anyone know if there is a way to eliminate the automatic line break that the header tags cause?

    H1 {
    color: #0066DE;
    font-size: 22px;
    font-weight: bold;
    font-family: arial, verdana, helvetica, sans-serif;
    ?????????
    }

  2. #2
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try...
    margin-bottom : 0px;

  3. #3
    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)
    you could go for something like
    Code:
    h1 {
    color: #0066DE;
    font-size: 22px;
    font-weight: bold;
    font-family: arial, verdana, helvetica, sans-serif;
    float: left;
    }
    alternatively, you can go for
    Code:
    h1 {
    color: #0066DE;
    font-size: 22px;
    font-weight: bold;
    font-family: arial, verdana, helvetica, sans-serif;
    display: inline;
    }
    but keep in mind that you'll still need to control the display of any element before and after the header.
    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

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by frankiehots
    I am using the <H1> tag, but controlling how it appears through CSS. Does anyone know if there is a way to eliminate the automatic line break that the header tags cause?
    Hi,

    First thing to remember: it's not a line brake.

    If its not a line brake, then what is it? Its a margin. Take this code:

    Code:
    <h1>Header</h1>
    <p>Content</p>
    Both the header and the content have margins (about 1em or so, looks like a line brake). Margins collapse, so you only get the biggest one. (I think that that was it, its how it works anyway)

    So, you try this:
    Code:
    h1 { margin: 0; padding: 0; }
    what happens? not a lot.

    The h1 margin is gone, but the p margin is happy as ever. So, next step:
    Code:
    p { margin: 0; padding: 0; }
    Combined with the first, you now have no gap. (Unless you set line-height or something)

    But, there is also no gap between paragraphs, so, the final solution, what you are after:

    Code:
    h1 { margin: 0; padding: 0; }
    p { margin-top: 0; margin-bottom: 1em; }
    you probably don't need to set the padding: 0; bit, but is pays to play safe. Something else to remember: you don't need to set units on 0, because 0 is 0 nomatter what scale you are using. Unless it is fahrenheit or something silly like that...

    hth,
    Douglas
    Hello World

  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)
    well, it depends what frankie meant when he said "linebreak". was he just referring to the added space, or the fact that after the header any content following is on a new line...
    i assumed he meant the first one, but yeh...if it's the second one, then margin is what you're after...
    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 Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aah, hadn't thought of that.
    Hello World

  7. #7
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I meant the added space on the next line which there was too much of. I was just trying to sit an H1 header a little closer on top of an HR.

  8. #8
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    you could go for something like
    Code:
    /*...*/ float: left; /*...*/
    alternatively, you can go for
    Code:
    /*...*/ display: inline; /*...*/
    but keep in mind that you'll still need to control the display of any element before and after the header.
    I think "display: run-in;" is what you're going after, actually. Opera's the only browser that supports it though. :-)

    ~~Ian

  9. #9
    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 Ian Glass
    I think "display: run-in;" is what you're going after, actually. Opera's the only browser that supports it though. :-)

    ~~Ian
    ah...i'm still catching up with CSS2, so cheers for the pointer
    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

  10. #10
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by frankiehots
    I meant the added space on the next line which there was too much of. I was just trying to sit an H1 header a little closer on top of an HR.

    This may or may not be of interest to you, but if you are after a lign under your header, you could try playin with this:

    h1 { border-bottom: 1px solid black; }

    Douglas
    Hello World


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
  •