Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Daniel Tangberg
Daniel Tangberg
1,506 Points
Posted by Daniel Tangberg
Daniel Tangberg
1,506 Points

background image becomes clickable

Hi,

I'm having an issue with the background image I've put in a div

The picture becomes clickable and seems to link to itself. The issue with this is that if I put an h1 in the div it automatically becomes an anchor text. I can't seem to find what the issue is.

HTML.html 
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
    </head>
    <body>
    <header>
        <h2 id="logo">Kreaktiv</h2>
    <nav>
        <ul>
            <li> <a href="">Vad vi gör</li>    
            <li> <a href="">Om</li>
            <li> <a href="">Kontakta oss</li>
        </ul>
    </nav>
</header>

<div id="wrapper">
    <h1>Dhis text becomes an "a" class</h1>
</div>

</body>
</html>
CSS.css 
*{
    margin: 0px;
    padding: 0px;
}

body{
    max-width: auto;
    margin: 0 auto;
    padding: 0 5%;
}

header{
    border-bottom: 1px solid orange;
    height: 10px 0px;
    width: 100%;
    background-color: white;
}

header ul{
    display: inline-block;
    float: right;
    list-style: none;
    padding: 10px 30px 5px 30px;
    margin: auto;
}

header li{
    padding: 0px 10px 5px 0;
    font-family: "oswald", sans-serif;
    font-weight: 100;
    display: inline-block;
}

header a:hover{
    color: black;
    cursor: default;
}

header a{
    text-decoration: none;
    color: orange;
    font: bolder;
}

#logo {
    text-align: center;
    padding: 20px 0 10px 0; 
    font-family: 'Anton', sans-serif;
    font-size: 4em;
}


footer{
    height: 100px;
    background-color: white;
}

#wrapper{
    height: 500px;
    background:white;
    background: url("../img/surf.jpg") no-repeat center ;
    background-size: cover;
    max-width: 100%
}

2 Answers

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Daniel,

I guess the problem is that you're not closing your a tags here:

    <ul>
        <li> <a href="">Vad vi gör</li>    
        <li> <a href="">Om</li>
        <li> <a href="">Kontakta oss</li>
    </ul>

If you close them like so

    <ul>
        <li><a href="">Vad vi gör</a></li>    
        <li><a href="">Om</a></li>
        <li><a href="">Kontakta oss</a></li>
    </ul>

The problem should be gone. I hope that helps, if not or if you have further questions feel free to ask! :)

Daniel Tangberg
Daniel Tangberg
1,506 Points
Daniel Tangberg
Daniel Tangberg
1,506 Points

Thanks mate.

Blind as bat sometimes. Much appreciated!