Simple question regarding headers..

@soulflycrxDec 10.2003

Can I do more then 6 headers? Example.

etc.

If I cant do more then 6…why not?

to post a comment

CSS

21 Comments(s) _↴

@spufiDec 10.2003 — #

1. No.

2. Because W3C said so. ?

3. And I can't imagine why you would want to. Honestly, if you need more than six different headers, you probably want to rethink your design. I think the most I have ever used is 4 on a site.

@soulflycrxauthorDec 10.2003 — #LOL. I have used all 6, and I want to use more. But I am super new at CSS, and I am probably doing it the long and hard way. Here is the page that uses CSS: http://www.wildernesscrossing.com/terryredlin/terryredlin.html

and here is my CSS file:

[CODE]
 
 <!-- 
 ::HEADER REFERENCE TABLE::
 H1= gallery - open/limited edition text
 H2= gallery - grey title text
 H3= gallery - maroon price text
 H4= menu - currently selected page, light blue text
 H5= menu - links, dark blue
 H6= maroon title text
 -->
 
 <STYLE TYPE="text/css">
 body { 

 background: #CCCC99;
 background-image: url(../images/bg2.gif); 
 color: #000000; 
 margin: 0%;}
 
 a:link { 
 color: #006699;
 }
 a:visited { 
 color: #006699;
 }
 a:hover { 
 color: #006699;
 }
 a:active { 
 color: #006699;
 }
 
 H1 { 
 font-size: 8pt; 
 font-weight: bold; 
 margin-top: 0px; 
 margin-bottom: 0px; 
 font-family: Georgia, Times New Roman, Times, serif; 
 color: #000000 }
 
 H2 { 
 font-size: 11pt; 
 font-weight: bold; 
 margin-top: 0px; 
 margin-bottom: 0px; 
 font-family: Georgia, Times New Roman, Times, serif; 
 color: #CCCCCC }
 
 H3 { 
 font-size: 12pt; 
 font-weight: bold; 
 margin-top: 0px; 
 margin-bottom: 0px; 
 font-family: Georgia, Times New Roman, Times, serif; 
 color: #993300 }
 
 H4 { 
 font-size: 11pt; 
 font-weight: bold; 
 margin-top: 0px; 
 margin-bottom: 0px; 
 font-family: Georgia, Times New Roman, Times, serif; 
 color: #3399CC }
 
 H5 { 
 font-size: 11pt; 
 font-weight: bold; 
 margin-top: 0px; 
 margin-bottom: 0px; 
 font-family: Georgia, Times New Roman, Times, serif;}
 
 H6 { 
 font-size: 14pt; 
 font-weight: bold; 
 margin-top: 0px; 
 margin-bottom: 0px; 
 font-family: Georgia, Times New Roman, Times, serif;
 color: #993300}
 
 </STYLE>
 
 [/CODE]

Basically, I am making a new header for each type of text "piece" For example. I have a header to make the tile (Print Gallery - Terry Redlin), I have a header to make the grey text under all the thumbnails, I have a header to make the maroon-colored prices. I have a header for the menu links on the left, as well as a header for the currently selected menu link. ETC ETC. I must be doing this the hard way.

@spufiDec 10.2003 — #A couple things offhand, technically your h1 tag should have the largest fint size. You basically have your font sizes reversed."pt" isn't exactly the best font size either unless you are making a printable version. "px" or "em" is what you want to use.

I'm going to take one example here, and the you can base everything else off of that for future reference.

Ok so what is the difference here? H2 has a color of #CCC, H4 has a color of #39C, and H5 uses the default color. Now, define one header like this.

H5 {

font-size: 11pt;

font-weight: bold;

margin-top: 0px;

margin-bottom: 0px;

font-family: Georgia, Times New Roman, Times, serif; }

I used H5 because it has a nice default CSS. Now, you mentioned thumbnails. Ok, fine. Create a <div> with id="thumbnail" in it and place your thumbnail images inside the div. In this example I'm saying H2 was the header I was going to use. Here's how I define it using the H5 CSS.

#thumbnail H5 { color: #CCC; }

Basically, it's saying that any <H5> tag within a tag that has a id equal to thumbnail, give it that color.

Let's say you use <H4> for menu links.

#menu H5 { color:#39C; }

Here's the quick and dirty code summary.

<style type="text/css">



</style>

<body>

<h5>Default header five<h5>

<div id="thumbnail">

<h5>Thumbnail header two</h5>

</div>

<div id="menu">

<h5>Menu header four</h5>

</div>

</body>

@soulflycrxauthorDec 10.2003 — #Oh boy. I got a headache now. Heh. I think I need to pick up a CSS book.

Thanks for the help. Much appreciated.

@spufiDec 10.2003 — #Yeah, CSS can throw newbies for a loop, but just keep working on it. I would check out W3schools(link in my sig) because they have a CSS section where you see how code works. Although, I learned most of how to use CSS just by asking on forums.

@pyroDec 10.2003 — #[i]Originally posted by spufi [/i]

[B]Yeah, CSS can throw newbies for a loop...[/B][/QUOTE]So can HTML be - at least correct, semantic HTML.

Headings (h1-h6) really have very little to do with the "size" of the text. They are strictly to be used for markup purposes when creating your documents. h1 means that the content it contains is the main heading. All others will be sub-headings. If you have h2 on your page with no h1, you quite probably did something wrong. Heading tags are very useful when marking up one's documents, as the can be used to convey meaning, if the user is not browsing your site on a traditional user agent (for instance, a screen reader). Google also takes special note of heading tags (at least when used correctly), and a semantically layed out page will help increase your ranking, as Google have an easier time reading it.

Looking at your site, It looks like you probably only need 3 heading tags. The first (h1) should be wrapped around your logo (though it would be more effective if you'd chop the image up, and actually have "Wilderness Crossings" in text). The second (h2) would be around "~ Print Gallery - Terry Redlin ~" and perhaps "Artist Index" for you links. The third (h3) would go around the title of each painting. If you are in love with headings, you could perhaps justify a fourth (h4) for the description (size) and price, but I probably would not.

As far as what you've got, you've used a drastically wrong hierarchy of heading tags. I used Outline Block Level Elements on the Web Developer Toolkit extention for Mozilla Firebird to take a peek at what you used. Take a look at the screenshot, and then re-read my paragraph above, describing the correct way to do it.

If you are interested in this, and would like more information, I'd highly recommend reading "designing with web standars" by Jeffrey Zeldman - and I know Spufi would too. :p

[upl-file uuid=dd8e0f8e-13ac-4304-9edf-d1dcee4e3ff7 size=99kB]soulflycrx.jpg[/upl-file]

@soulflycrxauthorDec 10.2003 — #Ya. I am totally stupid to this. I just havent wrapped my head around everything, and thus, the retarded format of my site. I was trying to make the source more simple.

So if I only use 3 <h> tags, then what do I use to set the attributes for all the other text? (Like price, limited/open edition text, title of the prints etc? ...<p> tags? Can I set up a <p> so that there is no space before and after the <p>. (Which is nutorious on standard HTML...thats why I used <br> tags so much)

@spufiDec 10.2003 — #

1. I need that extension because it rocks. :p

2. I thought about coming back here and putting in a pub for D.W.W.S.

3. Now that I look at the screenshot, you don't even need the <H4> and <H5> tags for your menu. A nicely styled unordered list would work. Here's some links that show what I'm talking about in action.

http://www.alistapart.com/ Bookmark this site.

http://www.ryanbrill.com/index.php Pyro's site.

http://bamabelle.blogspot.com/ I gave her the basic code for the menu on the right, and then she tweeked it for her own liking.

@spufiDec 10.2003 — #[i]Originally posted by soulflycrx [/i]

[B]So if I only use 3 <h> tags, then what do I use to set the attributes for all the other text? (Like price, limited/open edition text, title of the prints etc? ...<p> tags? Can I set up a <p> so that there is no space before and after the <p>. (Which is nutorious on standard HTML...thats why I used <br> tags so much) [/B][/QUOTE]

There's a couple ways of doing this.

p { margin-top:0; margin-bottom:0; }

or just...

p { margin:0; }

If you ever see it done something like this....

p { margin:0 0 0 0; }

Note that the numbers should be read clockwise. Top margin, right margin, bottom margin, left margin.

@pyroDec 10.2003 — #Yep, I'd highly recommend downloading the extention. You can find it at http://texturizer.net/firebird/extensions/#webdeveloper.

To make it easy on you, soulflycrx, here's a direct link to one article that's a must at ALA: http://www.alistapart.com/articles/taminglists/

[i]Originally posted by soulflycrx [/i]

[B]...the <p>. (Which is nutorious on standard HTML...thats why I used <br> tags so much) [/B][/QUOTE]You lost me on that one... Notorious??? ?

@soulflycrxauthorDec 10.2003 — #Do you guys recommend a program like "Style Master" ?

@pyroDec 10.2003 — #Never used it (or heard of it, until now).

Just thought of something that might help you, though. Take a look at [URL=http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp]List-o-matic[/URL]. It will give you a good starting place for using lists for your navigation.

@spufiDec 10.2003 — #[i]Originally posted by soulflycrx [/i]

[B]Do you guys recommend a program like "Style Master" ? [/B][/QUOTE]

Not really, and here's why. Certainly it is a slick tool, however, I believe it said it was $49.99 just for this product. My text editor cost $30. When I type in CSS attributes in a CSS file, and/or when I type them in a <style> tag, they get color coded to let me know when I typed in a valid CSS attribute. This can really help in terms of debugging. It also has a list of CSS attributes I can click on and it generates the code for it for me. I don't use it because I would rather just type it in myself. All I'm saying is, with a proper knowledge of CSS and the right text editor, that's pretty much all you need.

For the record, I use Edit Plus as my text editor. I still hold to the fact that it has the best default color coding I have seen. I haven't tried Front Page, but Front Page is evil and should be avoided anyway. ?

@soulflycrxauthorDec 10.2003 — #Yes. Front page IS evil. LOL. WEll. I guess I will just read up on CSS, as I really want to get with the times and start developing pages that are dependent on CSS, rather then my old fashioned table-grid system.

@soulflycrxauthorDec 10.2003 — #I noticed that it was mentioned above that I should have the words "Wilderness Crossing" as <h1>.

Well, I really do like the graphic that I used to make the logo, and I would rather not chop the logo up and use text for it.

So...

Is there a way that I can lay some transparent text on the page? <h1>Wilderness Crossing</h1> That way the H1 will still exist on the page, but the user would not be able to see it. Is that a good idea?

@pyroDec 10.2003 — #No, that is not a good idea, as Google may think you are trying to spam it, and not index your site. What you can do, however, is wrap your image inside the <h1> tag. Be sure you specify alternate text (though I do not know if the <h1> will translate to the alternate text [and thus, if google will realize that it is highly relavant text]).

@Robert_WellockDec 10.2003 — #I never liked the Style Master Demo though Layout Master demo is reasonable but still expensive - I use notepad.

If someone would like me to make some eXtensible XHTML that allows you to use h1-h9 and validate against the W3C validator then it is within my capability.

?

Though CSS should suffice.

@soulflycrxauthorDec 10.2003 — #Well Pyro. You have been a huge help thus far. I will try that out, by putting the image in the h1 tag. Other then that, I will just keep reading and reading. I hope to soon venture into CSS tables and such.

Thanks.

@ray326Dec 10.2003 — #[i]Originally posted by soulflycrx [/i]

[B]Do you guys recommend a program like "Style Master" ? [/B][/QUOTE]
On Windows I like 1st Page 2000, a free editor with realtime page preview. Also this thing looks quite promising considering the source and the recommendations I've seen.

http://www.bradsoft.com/topstyle/index.asp

@soulflycrxauthorDec 12.2003 — #Well, thanks to all everybodys help, I was able to set up my CSS script, as well as my html.

Check out the source code for this page: http://www.wildernesscrossing.com/terryredlin/terryredlin.html

Is it an improvement? Should I perhaps find a way to replace the html tables with a CSS solution?

Here is my current CSS script: Again, let me know what you all think.

[CODE]
 <!-- 
 H1 = Top logo (header.gif)
 H2 = Title text (ie. Print Gallery - Terry Redlin)
 H3 = Menu title text (ie. Artist Index)
 a.blue = makes the links blue
 a.white = makes the links white
 p.one = Grey thumbnail title text
 p.two = Black thumbnail description text
 p.three = Price text
 p.four = Menu item links
 p.five = Currently selected menu item
 p.six = White 'back to home' text link
 ul.menu = Menu list
 -->
 
 <style type="text/css">
 
  body { 
   background: #CCCC99;
   background-image: url(../images/bg2.gif); 
   color: #000000; 
   margin: 0%;
   }
 
  a.blue:link {
   color: #006699;
   text-decoration: none
   }
  a.blue:visited {color: #006699}
  a.blue:hover {color: #006699}
  a.blue:active {color: #006699}
 
  a.white:link {
   color: #FFFFFF;
   text-decoration: none
   }
  a.white:visited {color: #FFFFFF}
  a.white:hover {color: #FFFFFF}
  a.white:active {color: #FFFFFF}
 
  H1 { 
   margin-top: 0px; 
   margin-bottom: 0px; 
   }
 
  H2 { 
   font-size: 14pt; 
   font-weight: bold; 
   margin-top: 0px; 
   margin-bottom: 0px; 
   font-family: Georgia, Times New Roman, Times, serif;
   color: #993300
   }
 
  H3 { 
   font-size: 12pt; 
   font-weight: bold;
   font-style: italic;
   margin-top: 0px; 
   margin-bottom: 0px; 
   font-family: Georgia, Times New Roman, Times, serif;
   color: #000000
   }
 
  p.one {
   font-size: 12pt; 
   font-weight: bold;
   font-style: italic;
   margin-top: 0px; 
   margin-bottom: 0px; 
   font-family: Georgia, Times New Roman, Times, serif;
   color: #CCCCCC
   }
 
  p.two {
   font-size: 8pt; 
   font-weight: bold;
   margin-top: 0px; 
   margin-bottom: 0px; 
   font-family: Georgia, Times New Roman, Times, serif;
   color: #000000
   }
 
  p.three {
   font-size: 13pt; 
   margin-top: 0px; 
   margin-bottom: 0px; 
   font-family: Georgia, Times New Roman, Times, serif;
   color: #993300
   }
 
  p.four {
   font-size: 12pt; 
   font-weight: bold;
   margin-top: 0px; 
   margin-bottom: 0px; 
   font-family: Georgia, Times New Roman, Times, serif
   }
 
  p.five {
   font-size: 12pt; 
   font-weight: bold;
   margin-top: 0px; 
   margin-bottom: 0px; 
   font-family: Georgia, Times New Roman, Times, serif;
   color: #3399CC
   }
 
  p.six {
   font-size: 12pt; 
   font-weight: bold;
   margin-top: 0px; 
   margin-bottom: 0px; 
   font-family: Georgia, Times New Roman, Times, serif;
   color: #FFFFFF
   } 
 
  ul.menu {
   list-style-type: none;
   margin: 9;
   padding: 9;
   }
 
 </style>
 
 
 [/CODE]

Thanks again.

@Paul_JrDec 12.2003 — #Yes, I would convert your table-based layout to a CSS-based layout. But I believe that every site should be laid out with CSS, 'cause I'm a CSS aficionado. ?

Also in #CSS _↴

How can I add second image layer with animation?Need help + how to span background image - NO REPEAT CSS Issue with a link in dropdown window

Success!

Help @soulflycrx spread the word by sharing this article on Twitter...

Tweet This

Simple question regarding headers..

21 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Simple question regarding headers..

21 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

21 Comments(s) _↴

Also in #CSS _↴