Headings won't go inline

HTML & CSS
1

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

HEADING HEADING


<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):


h1, h2 {
  display:inline;
}

But it didn’t seem to work :frowning: What should I do or what am I doing wrong?

2

HI,

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

e.g.


<!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.:slight_smile:

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 :slight_smile:

3

Okay thank you for your reply, this is my whole CSS sheet:


/*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

By the way the headings I am trying to make go inline are also links.

5 

pre  {
  color:#404040;
  font-size:16px;
  font-family:verdana;
[color=red]{[/color]    /* this closing brace is backwards */
6

All the styles after the pre styles are not working, because you have an error in your styles:

pre  {
  color:#404040;
  font-size:16px;
  font-family:verdana;
[COLOR="#FF0000"]{[/COLOR]

The closing brace is around the wrong way, which confuses the browser. Fixing that will make the styles work.

EDIT: pipped at the post. :slight_smile:

7

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.


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

Thank you for your reply, I laughed at that lol can’t believe I didn’t see it :frowning: next time I will use a validator, I forgot to do that.

Thanks!