Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    how to set the text size the same for each <h*> header tag

    I have using headers <h1> <h2> and so on and have each one a different color text and background, but the size of the <h1> itself is very different of course.

    How do I set each of the <h*> to the same text size, height, font, style other than the text color and the background ?

    I did try to set the text size, height, font in each of the header tag but this did not work.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    umm why would you want to do that? Why not use the same heading tag that WILL be the same font size? The purpose of those different heading tags is to give different font size and weights to each one.
    Teed

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    each header tag is set to a different text color and background-color

    but want the font-size and the header area to be the same

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You can still use the same heading tag, give each one a class and then style the class with the color you want. Then by default the font will be the same size and weight.
    Teed

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Doing this will mean I need to redo all of my pages?

    How do I do this anyway ?

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,224
    Thanks
    10
    Thanked 269 Times in 268 Posts
    You could do it like this:

    h1, h2, h3, h4, h5, h6 {font-size:12px}

    I'm not sure what you mean by "header area", but whatever it is, add it to the same css.

    As long as the tags are used correctly to describe incremental layers of subordinate text, I don't see an issue with them all being the same font size. It's not "normal", but it's a styling choice, not a content choice.

    Dave

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    As tracknut suggested, that would work. Just seems like alot of css to work out. You'll have to use the code tracknut posted, then style each heading tag separately to give each one a different color.

    Didn't know you already had all the pages done with all the different heading tags.
    Teed

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by teedoff View Post
    umm why would you want to do that? Why not use the same heading tag that WILL be the same font size? The purpose of those different heading tags is to give different font size and weights to each one.
    Well, not really - at least from my understanding of them. The purpose of the different heading tags is to add depth for semantic markup. A heading in <h1> is a main heading while a heading in <h2> is a "less-major" heading, and so on. This is done so that the visually impaired can still get a sense of hierarchy/importance since their braille outputs have only one size.

    The browsers have built-in defaults for heading tags to be different sizes, but that does not mean that this specifically is what they are for. They are more for ranking significance than for changing sizes. You can style them up any way you like after that.

    tracknut's suggestion should resolve the issue.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Rowsdower! View Post
    Well, not really - at least from my understanding of them. The purpose of the different heading tags is to add depth for semantic markup. A heading in <h1> is a main heading while a heading in <h2> is a "less-major" heading, and so on. This is done so that the visually impaired can still get a sense of hierarchy/importance since their braille outputs have only one size.

    The browsers have built-in defaults for heading tags to be different sizes, but that does not mean that this specifically is what they are for. They are more for ranking significance than for changing sizes. You can style them up any way you like after that.

    tracknut's suggestion should resolve the issue.
    Yes that is correct. I know that each heading tag has different semantic weights for different rankings. I was merely addressing the obvious that they by default have different font size and weight for a reason, and that it seemed odd to change them in this way.
    Teed

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by teedoff View Post
    Yes that is correct. I know that each heading tag has different semantic weights for different rankings. I was merely addressing the obvious that they by default have different font size and weight for a reason, and that it seemed odd to change them in this way.
    Sorry. I didn't mean to get up on a soapbox. I just wanted to clarify the issue for posterity.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    I did try that first after doing a quick google, but still not the same look for each one.

    here is an example of what is happening

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    h1, h2, h3, h4, h5, h6 { font-size:12px }
    </style>
    
    </head>
    
    <body>
    
    the height between each of the
    ---
    ---
    is not the same which is what i was want.
    
    <br />
    <br />
    ---
    <h1>111111111</h1>
    ---
    <h2>222222222</h2>
    ---
    <h3>333333333</h3>
    ---
    <h4>444444444</h4>
    ---
    </body>
    </html>
    the height is different and the text size. i am wanting to make all the <h*> display exactly the same for starters. but using different numbers. But still be headers.

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Rowsdower! View Post
    Sorry. I didn't mean to get up on a soapbox. I just wanted to clarify the issue for posterity.
    lol oh no, no problem. I had though about addressing the semantic inportance for the different heading tags in my original reply, but just didnt..lol

    Anyway, as long as the thread gets resolved.
    Teed

  • #13
    New Coder
    Join Date
    Jul 2011
    Location
    Kansas
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Lightbulb

    Well, since your most likely not using a box-style format like me, I can't really suggest anything. I just set up a box to hold content in, then I use margin to get that header at the top of the page. I just experimented and it works with any headers you might put in that box, they just stay the same distance from each other and look exactly the same. I just haven't found a different method than margining it in the box. :/

    P.S. I don't know why you want multiple header types, as you can easily modify all headers of that hierarchy to look exactly the same. :/

  • #14
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,224
    Thanks
    10
    Thanked 269 Times in 268 Posts
    Quote Originally Posted by jasonpc1 View Post
    the height is different and the text size. i am wanting to make all the <h*> display exactly the same for starters. but using different numbers. But still be headers.
    There are other styles than font-size that are different for each h* tag. Start with setting the margin (e.g "margin:0") for all of them, that may solve it. But you may need to set others as well, to counter all the default styling.

    Dave

  • #15
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    So does anyone know how I do this ?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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