Adding anchor '' to my heading makes it dissapear

Question

My original HTML Code looked something like this

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
    <link rel="stylesheet" href="css\style.css">
</head>
</body>
<div class = "container">

    <h1> MY HEADING </h1>

    <p>Website text</p>
</div>

And I changed it to

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
    <link rel="stylesheet" href="css\style.css">
</head>
</body>
<div class = "container">

    <h1><a href = "index.html"> MY HEADING </a></h1>

    <p>Website text</p>
</div>

The CSS Looks like this:

h1 {
    font-family: "Courier New";
    font-size: 600%;
    color: darkorange;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url(../images/rough-texture.png);
}

Whereas before I was getting a nice big orange textured heading, now I am getting a tiny area with a few white dots instead.

I can't seem to figure out what could be causing this.

Your CSS rules are repeating, not that it is a huge problem for cascading styles, but please fix that and provide other CSS rules that affect anchors and etc. — Tanasos, Mar 08 '17 at 12:46
@Sqnkov well spotted. Must have been a copy and pasting error. I have corrected this and still to no avail. — mdemont, Mar 08 '17 at 12:51

score 1 · Accepted Answer · answered Mar 08 '17 at 12:48

You could add another specific rule for the anchor a inside h1 anchor like :

h1 a{
    color: darkorange;
    text-decoration: none;
}

Hope this helps.

h1{
    font-family: "Courier New";
    font-size: 200%;
    color: darkorange;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url("http://ghostlypixels.com/wp-content/uploads/2014/06/vector-line-texture.png");
}

h1 a{
    color: darkorange;
    text-decoration: none;
}

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
</head>
</body>
<div class = "container">

    <h1> MY HEADING </h1>

    <p>Website text</p>
</div>
And I changed it to

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
</head>
</body>
<div class = "container">

    <h1><a href = "index.html"> MY HEADING </a></h1>

    <p>Website text</p>
</div>

Thank you. Turns out i had a rule for anchors in general. Color and text-decoration helped too! — mdemont, Mar 08 '17 at 13:00
note: There are *always* general CSS rules for `a` tags and its different states in the browsers default styles. — Johannes, Mar 08 '17 at 13:02

score 1 · Answer 2 · answered Mar 08 '17 at 12:50

1

Try it like this:

<a href = "index.html"><h1> MY HEADING</h1></a>

answered Mar 08 '17 at 12:50

Alexander Voss

57
4

I tried that already, and after looking it up found out that this was a less correct way of doing it. https://stackoverflow.com/questions/5341451/what-should-come-first-in-html-an-anchor-or-a-header – mdemont Mar 08 '17 at 12:55
@mdemont That is outdated. In HTML5, `a` is a block element. – str Mar 08 '17 at 13:05

Adding anchor '' to my heading makes it dissapear

2 Answers2