...

View Full Version : how to set the text size the same for each <h*> header tag



jasonpc1
07-22-2011, 04:15 PM
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.

teedoff
07-22-2011, 04:19 PM
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.

jasonpc1
07-22-2011, 04:21 PM
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

teedoff
07-22-2011, 04:26 PM
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.

jasonpc1
07-22-2011, 04:29 PM
Doing this will mean I need to redo all of my pages?

How do I do this anyway ?

tracknut
07-22-2011, 04:40 PM
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

teedoff
07-22-2011, 04:55 PM
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.

Rowsdower!
07-22-2011, 04:55 PM
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.

teedoff
07-22-2011, 04:59 PM
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.

Rowsdower!
07-22-2011, 05:02 PM
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. :thumbsup:

jasonpc1
07-22-2011, 05:09 PM
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



<!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.

teedoff
07-22-2011, 05:09 PM
Sorry. I didn't mean to get up on a soapbox. I just wanted to clarify the issue for posterity. :thumbsup:

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.:thumbsup:

Skylear
07-22-2011, 05:20 PM
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. :/

tracknut
07-22-2011, 05:20 PM
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

jasonpc1
07-22-2011, 05:21 PM
So does anyone know how I do this ?

Rowsdower!
07-22-2011, 05:27 PM
So does anyone know how I do this ?

As tracknut suggested:

h1,h2,h3,h4,h5,h6{/*insert all margin, padding, font-size, line-height, and other style settings here and they will carry across each named heading type*/}

That is mechanically how you do it. Setting the specific styles will be up to you depending on the appearance that you want.

Also: Note the tip in my sig regarding the "universal reset" for CSS. It's there for a reason, and this is part of that reason. You give all elements the same foundation when you use it.

Lerura
07-23-2011, 01:48 AM
So does anyone know how I do this ?

I think you need to know what the <h*> tags really are:

The are actually <p>s with predefined styles. and all with font-weight:bold and different font-size:.
their purpose is to define header text
And you can have more than one of each element.

I will suggest that you which of them give you there preferred font-size and then change all your <h*>s to that element:
e.g.

<h4>111111111</h4>
<h4>222222222</h4>
<h4>333333333</h4>
<h4>444444444</h4>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum