SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Headings won't go inline

    So I tried to put 2 headings (they are also links) together at the top of the page like:

    HEADING HEADING

    Code:
    <h1><a href="#">#</a></h1> <h2><a href="#">#</a></h2>
    But they appear as:

    HEADING

    HEADING

    So I tried using this code on my External CSS Sheet (I searched it and it gave me this code):

    Code:
    h1, h2 {
      display:inline;
    }
    But it didn't seem to work What should I do or what am I doing wrong?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    The code you posted will work assuming no conflicting styles from your stylesheet.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    h1, h2 { display:inline; }
    </style>
    </head>
    
    <body>
    <h1><a href="#">H2 </a></h1>
    <h2><a href="#"> h2</a></h2>
    </body>
    </html>
    Try that and you will see it works.

    This means that you must have more specific rules applying to those elements that are setting them to block, floated and cleared or something else. Or you have styles targeting the inner elements to be block which would make the heading start on a new line (even if the parent was display:inline). Or you have inline styles in the tags themselves over-riding all else.

    Without seeing your code we can't say which rules are at work but it will be one of the above.

    If you can post more code that exhibits the problem we will soon put you right

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay thank you for your reply, this is my whole CSS sheet:

    Code:
    /*Order is in font-family; font-size; color; text decoration; test-align; display;*/
    
    body  {
      background-color:#C0C0C0;
    }
    
    b  {
      color:#404040;
    }
    
    h1 a:link {
      font-family:verdana;
      font-size:25px;
      color:#404040;
    }
    
    
    h2 a:link {
      font-family:verdana;
      font-size:22px;
      color:#404040;
    }
    
    h2  {
      font-family:verdana;
      font-size:22px;
      color:#404040;
    }
    
    h3  {
      font-family:verdana;
      font-size:19px;
      color:#404040;
    }
    
    p  {
      font-family:verdana;
      font-size:16px;
      color:#404040;
    }
    
    A:link  {
      font-size:16px;
      color:#404040; 
      text-decoration:none;
    }
    
    A:visited  {
      font-size:16px;
      color:#404040; 
      text-decoration:none;
    }
    
    A:active  {
      font-size:16px;
      color:#404040;
      text-decoration:none;
      background-color:#888888;
    }
    
    A:hover  {
      font-size:16px;
      color:#404040;
      text-decoration:underline;
    }
    
    .center  {
      text-align:center;
    }
    
    ul.a  {
      list-style-type:circle;
      color:#404040;
    }
    
    p.uppercase  {
      text-transform:uppercase;
    }
    
    A.underlined  {
      text-decoration:underline;
    }
    
    pre  {
      color:#404040;
      font-size:16px;
      font-family:verdana;
    {
    
    h4  {
      font-family:verdana;
      font-size:17px;
      color:#404040;
    }
    
    h1, h2 {
      display:inline;
    }
    I can't see anything that will make the headings start a new line.... maybe I am missing something?

  4. #4
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way the headings I am trying to make go inline are also links.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Code:
    pre  {
      color:#404040;
      font-size:16px;
      font-family:verdana;
    {    /* this closing brace is backwards */

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    All the styles after the pre styles are not working, because you have an error in your styles:

    Code:
    pre  {
      color:#404040;
      font-size:16px;
      font-family:verdana;
    {
    The closing brace is around the wrong way, which confuses the browser. Fixing that will make the styles work.

    EDIT: pipped at the post.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    The first thing to do when your css doesn't work and you think it is correct is to run it through the validator and it will immediately pick up typos or incorrect characters that you may have missed by eye (like the wrong bracket as mentioned above (twice)). It would have pointed you to the line with the error.

    Code:
    98 	pre 	Parse Error ; { h4 { font-family:verdana; font-size:17px; color:#404040; } h1, h2 { display:inline; }

  8. #8
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply, I laughed at that lol can't believe I didn't see it next time I will use a validator, I forgot to do that.

    Thanks!


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
  •