I've recently designed a website and did a top header banner inside a table. Now, I want to use the H1 tag instead, but I've tried to use the height, padding etc in an external CSS and it's not working. The table code is as follows: <table style="width: 100%; background-image: url('images/intro_banner.jpg'); height: 24px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; padding-left: 7px; color: #FFFFFF" cellspacing="0" cellpadding="0"> <tr> <td>TITLE TEXT GOES HERE</td> </tr> </table> Code (markup): But when I try to do the above in CSS, using height and include padding, the height of the background goes too high, so you can see the background image showing twice, which looks a mess. CSS Code: h1 { font-size: 14px; background-image: url('images/intro_banner.jpg'); height: 24px; color: #FFFFFF; padding-left: 6px; padding-top: 4px; font-weight: bolder; font-family: Arial, Helvetica, sans-serif; } Code (markup): The website is in my signature - the top red banner is what I want changing to CSS so all the code says in the HTML is <h1>title text goes here</h1> Code (markup): Feel free to ask questions, if I haven't explained it correctly. Thanks in advance.
In css, percentages must always reference something. 100% of what? So the parent must have a size set for your percentage to ref. btw, nothing you have in that header requires a full image as you have. I can do the same thing using plain html/css that only requires the two smaller images for the phone and the red background. I slapped this together in 3 minutes: <!doctype html> <html> <head> <title></title> <style type="text/css"> body{ font-family:Arial; font-weight:normal; } h1{ margin-left:1em; } h1 span{ color:red; } a{ float:right; text-decoration:none; color: #f80; font-size:10px; padding:0 10px; } #first{ border-right:1px solid #666; } p{ float:right; font-weight:bold; color:#c05020; } </style> </head> <body> <div> <h1><span>FinancialClaims</span>.info</h1> <a href="">Contact Us</a><a id="first" href="">> Why Use Us?</a> <p>Telephone: 01282 711576</p> </div> </body> "1.html" 41 lines, 543 characters written Code (markup): Now, I'm not saying I would do things exactly that way, I just slapped it together, but it's an example of much simpler/better way to do such things.
Thanks for the help, but you've lost me. All I want to change is the small table which currently has the red banner as background and white text over the top. The reason why I want it as H1 instead of in tables, is so it's better for SEO purposes. I almost got there using the CSS code I embedded in my original post, but for some reason the height of 24px didn't remain static... it would appear to be higher than 24px so the red background shape appeared twice, which looked a mess. If I can get it so that the height doesn't appear to go any more than 24px I'd be ok.
1) the element you are trying to apply that too should probably be a h2, since as an h1 every other heading on the page should be a subsection of it - which they obviously are not. This is probably why I'd make the site title the h1 in this situation. 2) What's messing you up is you want the entire height to be 24px TOTAL. In CSS on a non display:table; element, the total height is your padding PLUS what you say for height. They are exclusive not inclusive. So when you say: height:24px; padding-top:4px; That's going to be 28px, not 24. To be honest, I'd not even be declaring height on that element, I'd be declaring LINE-HEIGHT. Line height as one line plus padding - will also make it easier to center the text. Also, h1 is a block level element, it auto-expands to full width. Declaring width:100% and padding-left 7px means you're going to get 100% PLUS 7 px as the total width. All you need for CSS on that h1 is this: h1 { padding:4px 7px; font:bold 14px/16px arial,helvetica,sans-serif; color:#FFF; background:#F00 url(images/intro_banner.png) 0 0 no-repeat; } Code (markup): I included a background color so that images off you can actually read the text. I ditched the width and height declarations as unnecessary, the height ends up the 16px line-height plus the 4px top and 4px bottom padding, I set equal padding on both sides just because it's simpler. Generally, declaring height on elements is a bad idea unless you need it for something like an overflow state. Likewise block level elements default to width:100%, and if you are going to declare padding, declaring a percentage width is pretty much made of /FAIL/. It's called the box model. Width and height are INSIDE the padding, not around it. Border is around padding, margin is around border. The only time/place normal (aka non-table) elements have width including padding and borders like tables do is in IE when you don't have a valid doctype, or in versions of IE prior to 6 - which is why legacy versions of IE are often said to have a 'broken' box model. Back to the use of h1 vs. h2 - you need to think of heading tags in terms of document structure/grammar. You only should have one H1 per page because it's like the trunk of a tree. Every other heading on the page should be a subsection of that parent heading. If the next heading down the page ( CREDIT CARD PPI CLAIMS) is not a subsection of the first one, it should not be a lower order heading. Likewise, all those headings on the right, (News & Articles, Legal, FAQ) are not subsections of that first heading either, so they too should likely be H2's. Don't skip over heading numbers, don't go down a level when it's not a subsection of the heading preceeding it, and if you end up following those rules and end up with two h1, then you've got the wrong element as your h1.
deathshadow has anybody told you you're an absolute porn star? Many thanks, it works spot on. With regards to H1 vs H2 I totally understand when to use each one, the page I was working on, isn't any of the 2 in my signature, but I'll probably re title the headings anyway, in order to be more search engine friendly, using H1 followed by H2. Thanks again.