CODEWITHSUNDEEP
htmlcss
bodhihammer
bodhihammer

Reputation: 177

Why this anchor image doesnt work?

I just put an image as an anchor, and I honestly don't understand why it doesn't work: anchor does nothing no highlights, and anything. Here's the code of the main section (anchor is under the class name of "exit"):

<section id="main">
            <main class="container-fluid">
                <div class="row">

                    <div class="col-xs-2">
                    </div> 

                    <div class="col-xs-5 middle-main">

                     <a href="#" class="exit"></a>

                        <article class="article">

                        </article>

                    </div>

                    <div class="col-xs-3 middle-right">
                        <aside>


                        </aside>
                    </div>

                    <div class="col-xs-2">
                    </div>
                </div>
            </main>
        </section>

        <div class="container-fluid" id="footer">
        </div>

And here's the CSS:

a.exit  {
    background-image: url(img/exit.svg);
    background-repeat: no-repeat;
    height:16px;
    width:16px;
    float:right;
    opacity:0.8;

}

a.exit:hover {
    opacity:1;

}

Why is that?

UPDATE: Ok, i applied the solution that you gave me and it did not quite work, so I will elaborate:

When i put that anchor anywhere OUTSIDE the "middle-main" div container it works, hovers and its clickable, but when i put it inside, the place does not matter, it stops working.

Here's the CSS for classes "middle-main" and the "article" :

.middle-main {
    display:none;
    max-width: 600px;
    min-width:300px;
    position:relative;
    bottom:30px;
    background-color: rgba(0,127,92, 0.4); /*0.4 #007F5C;*/
    padding: 0px 4px 4px 0px;
    z-index:-1;

}

.article {
    background-color: rgba(225,255,255, 1); /*0.8 #E1D4D4;*/
    background-image: ;
    color:black;
    padding: 5px  30px 25px 30px;
    }


.article h1 {
    text-transform: uppercase;
}

So, "middle-main" is by default display none as it appears in form of FadeIn after i call it through jQuery.

Upvotes: 0

Views: 177

Answers (4)

Shumail
Shumail

Reputation: 3143

This won't work because <a> is inline element and as you don't have any content, it won't show anything.

You need to change the CSS and first make it display as a block or inline-block element and define the size.

see my fiddle: http://jsfiddle.net/N86gN/

a.exit  {
  display:block;
  background-image: url(img/exit.svg);
  background-repeat: no-repeat;
  height:16px;
  width:16px;
  float:right;
  opacity:0.8;

}

a.exit:hover {
    opacity:1;

}

Upvotes: 0

Praveen
Praveen

Reputation: 243

In a.exit in css change background-image: url(img/exit.svg); to background-image: url('img/exit.svg');

i.e use '' in url.

Upvotes: 2

stephenmurdoch
stephenmurdoch

Reputation: 34633

You need to add display: block; to .exit

Upvotes: 1

Marvin
Marvin

Reputation: 157

You need to give the a-tag display:block, otherwise it's inline!

a.exit  {
    background-image: url(img/exit.svg);
    background-repeat: no-repeat;
    height:16px;
    width:16px;
    float:right;
    opacity:0.8;
    display:block;
}

Upvotes: 0

Related Questions