Results 1 to 5 of 5

Thread: css menu tabs and <H1> tag

  1. #1
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default css menu tabs and <H1> tag

    I'm trying to use the Chrome Menu bar (http://www.dynamicdrive.com/style/cs...rome-menu-bar/) but having a struggle - if I add H1 tags to the <li> items the menu 'breaks' and lists all the menu items vertically. Obviously this is about the standard H1 tag elsewhere in my css, but how can I write a bit of css that will modify the H1 tag ONLY when used in conjunction with <li> items from the menu?
    I could use other defining properties other than a H1 tag obviously, but for SEO reasons my 'category' links should be H1's! I'm not very good (actually rubbish) at css so can someone suggest a definition that I can just cut and paste into the css and where to put it?

  2. #2
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    The problem with H1 is that they give a carriage return at the end, starts a new line. If you are using H1 just for the font size, colour, etc then just define a class in your CSS file.

    eg

    Code:
    td.menuheader {
    	font-size: 24pt;
    	font-family: Rockwell; 
    	font-weight: normal;
    	padding: 0;
    	color: #060F35;
    	}
    Then use
    Code:
    <td class="menuheader">My Title</td>

  3. #3
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    But it isn't the font 'properties' that's the reason I want to use the H1 tag - its the extra weight attached to that word in terms of search engine optimisation. 'Junior' page links on my site are only defined by the class of the text, but Top Level 'category' links (which is what I want to use this menu for) are supposed to be H1. I must be able to 'adjust' the properties of H1 tags when in an unordered list to avoid the line return and use a smaller font size, but I just can't see how to do it?

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Are you using h1's else where in your code?

    If not I think this should do it...

    Code:
    h1 {
    padding:0;
    margin:0;
    display:inline;
    }
    If you are just give it a class and then use that again with the class only
    Last edited by Snookerman; 05-01-2009 at 06:19 AM. Reason: added [code] tags

  5. The Following User Says Thank You to bluewalrus For This Useful Post:

    traveller (04-30-2009)

  6. #5
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Yeah, I've got other <H1>s elsewhere in the text, but you pointed me in the right direction! A little modification, and:

    Code:
    .h1_mainlinks {
    padding:0;
    margin:0;
    FONT-SIZE: 12px;
    COLOR: #000000;
    display: inline;
    }
    followed by
    Code:
    <div class="shadetabs">
    
    <ul>
    <li class="selected"><a href="http://www.dynamicdrive.com/"><h1 class="h1_mainlinks">blah blah</H1></a></li> <li><a href="http://www.dynamicdrive.com/style/"><h1 class="h1_mainlinks">more blah</H1></a></li>
    </ul>
    </div>
    does the trick nice! Many thanks

Tags for this Thread

Bookmarks

Posting Permissions

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