1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Controlling Fonts of Heading Tags

Discussion in 'CSS' started by Harold, Jul 4, 2004.

0
  1. #1
    Hello,

    In implementing the suggestions from my previous posting regarding heading tags, I had unexpected results.

    I have names of products in a database that I use in several locations. It would be perfect to make these names all <h1> Headings.

    The default code created HUGE fonts and bolded the text. I was able to override the font size issue by using the following code. <h1><font size 2>Patriots Pictures</h1>.

    This still created problems because the code was bolded. I use the same name in a navigation or links area as part of a catalog structure. The bolding affect causes the text to wrap around. Is there a way to negate the automatic bolding feature when using the header tags?

    Thanks
     
    Harold, Jul 4, 2004 IP
  2. Smyrl

    Smyrl Tomato Republic Staff

    Messages:
    13,740
    Likes Received:
    1,702
    Best Answers:
    78
    Trophy Points:
    510
    #2
    You could use a style statement or cascaading style sheet to control fonts in headings and links.

    Shannon
     
    Smyrl, Jul 4, 2004 IP
  3. bhutz

    bhutz Peon

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I can help you with this bro...

    To ellaborate on Smyrl's comment you can basically do this in 2 other ways

    Redfine the H1 tag
    Put something like this between the <head></head> tags...
    
<style type="text/css">
<!--
h1 {
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
-->
</style>
    Code (markup):
    put some text within the <h1></h1> tags

    <h1>Heading text 
</h1>
    Code (markup):
    Create a class
    Alternatively if you didn't want to change every single H1 tag you can also apply a style to the H1 tags

    
<style type="text/css">
<!--
.Products {
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
-->
</style>
    Code (markup):
    and insert this code in your page...

    <h1 class="Products">Heading text
    Code (markup):
    Obviously you will know which one will be best for you :D
     
    bhutz, Jul 4, 2004 IP
  4. Harold

    Harold Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I need a solution using HTML or XTHML.

    The below code almost works but the Heading tag seems to want to force a line feed or <br> that I need to negate. Any ideas?

    <h1><span style="font-weight: 400"><font size="3" face="Arial">Patriots Pictures</span></font></span></h1>

    Thanks,

    Harry
     
    Harold, Jul 4, 2004 IP
  5. Lever

    Lever Deep Thought

    Messages:
    1,823
    Likes Received:
    94
    Best Answers:
    0
    Trophy Points:
    145
    #5
    Try using this, note the last line to avoid the line break... try not to use fixed px sizes for fonts, so you can chance the small to medium or whatever you want...

    h1	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: bold;
	line-height: normal;
	display : inline;	}
    Code (markup):
     
    Lever, Jul 4, 2004 IP
  6. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Harry

    Not quite sure what you mean there. Bhutz's solution is valid HTML. Browsers that disregard the <style> tag would most probably disregard the style attribute. Anyhow the way to avoid the excess padding above and below is to add a line to bhutz's solution. And obviously adjust the padding figure to whatever you feel appropriate.

    Mick
     
    Arnica, Jul 4, 2004 IP
  7. schlottke

    schlottke Peon

    Messages:
    2,185
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I'd use CSS before hard coding it in like you've done.
     
    schlottke, Jul 4, 2004 IP
  8. Harold

    Harold Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I can't use the "{" or "}" symbols just the "<" or ">" because when I use any instruction using a "{", the instructions show up on the page.

    That's what I meant when I said I need to use basic HTML or XHTML commands.

    Harry
     
    Harold, Jul 4, 2004 IP
  9. Smyrl

    Smyrl Tomato Republic Staff

    Messages:
    13,740
    Likes Received:
    1,702
    Best Answers:
    78
    Trophy Points:
    510
    #9
    Is your document an html document? Are you putting your style statements in head of your document?

    I have a style statement in www.teamchess.org you can view if it would be helpful.

    Shannon
     
    Smyrl, Jul 4, 2004 IP
  10. expat

    expat Stranger from a far land

    Messages:
    873
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #10
    if }{ shows on your page you probably not using correct html code


    style elements must be in the header part e.g. between <head></head>

    If you have an external style sheet this needs to be between <head>
    ... other meta tags ....
    <LINK href="airport.css" type=text/css rel=stylesheet>
    </head>

    If you start using style elements directly on a page these need to be between <head> as well and are refered to later.
    ....other meta ....
    <style type="text/css">
    <!--
    .verd_b_12b { font-family: Verdana; font-size: 12pt; font-style: italic; font-weight: bold; color: #000099}
    -->
    </style>
    </head>

    The above is a class definition and can be used (refered to) like this
    <span CLASS="verd_b_12b"> whatever goes here </span>

    If you redefine H1 it's called a redefined tag and looks like this
    <head>
    ...other meta .....
    <style type="text/css">
    <!--

    h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold}
    -->
    </style>
    </head>

    when you use <h1xxxx</h1> it "pulls" the above style
    This should set you on the right path
    M
     
    expat, Jul 4, 2004 IP
  11. Lever

    Lever Deep Thought

    Messages:
    1,823
    Likes Received:
    94
    Best Answers:
    0
    Trophy Points:
    145
    #11
    Hi Harold; the stylesheet for your site looks like it is at (in relation to you site's root folder) /template/style.css which means that there is a /template folder with the file style.css in it. This stylesheet file doesn't appear (at time of writing) to have a style for the element <h1> in it. You need to add to this file something like 

    h1	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: bold;
	line-height: normal;
	display : inline;	}
    Code (markup):
    and save it back to your /template folder. This will define all <h1> tags in your site (that rely on the /template/style.css stylesheet) to folow these rules, so if you want to change, for instance, the font size to medium; then just change the stylesheet and save.

    If you get stuck just shout :)
     
    Lever, Jul 4, 2004 IP