CODEWITHSUNDEEP
htmlcss
Jayesh
Jayesh

Reputation: 15

Why are the links in my footer including the margin-right?

I am practicing my HTML and CSS skills using Notepad++ and I have ran into a problem when I was adding a couple of links to my footer. The problem I am having is that each link is including the margin-right value of 15px (i.e. the white space between each link can be clicked on). I want to be able to ONLY click on the words to direct me to that particular page.

Here is my HTML code for the footer:

<body>
    <div id="footer"> 
        <div id="footerlinks"> 
            <a href="index.html">
                <span style="color: #FFFFCC">
                    <p class="footerlink">
                        HOME
                    </p>
                </span> 
            </a>
            <a href="about.html">
                <p class="footerlink">
                    ABOUT
                </p>
            </a>
            <a href="rooms.html">
                <p class="footerlink">
                    ROOMS
                </p>
            </a>
            <a href="divesite.html">
                <p class="footerlink">
                    DIVE SITE
                </p>
            </a>
            <a href="food.html">
                <p class="footerlink">
                    FOOD
                </p>
            </a>
            <a href="news.html">
                <p class="footerlink">
                    NEWS
                </p>
            </a>
            <a href="contact.html">
                <p class="footerlink">
                    CONTACT
                </p>
            </a>
        </div> 
    </div> 
</body>

Here is my CSS for the footer: 

#footer {
     width: 100%;
     height: 50px;
     background-color: #999999;
     border-bottom: 1px solid black;
     padding-right: 20px;
     padding-left: 20px;
     clear: both;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

#footerlinks {
     height: 100%;
     line-height: 45px;
     display: inline-block;
     float: left;
}

#footerlinks a {
     color: #333333;
}

#footerlinks a:link {
     text-decoration: none;
}

#footerlinks a:hover {
     color: #FFFFCC;
}

.footerlink {
     font-size: 14px;
     vertical-align: center;
     margin-right: 15px;
     display: inline;
}

Here is my JSFiddle - https://jsfiddle.net/vu4qg17c/2/

I have only included the necessary parts of the HTML and CSS code in the JSFiddle. Thank you in advance.

Upvotes: 0

Views: 132

Answers (4)

prakhar19
prakhar19

Reputation: 463

Instead of 

<a href="about.html">
    <p class="footerlink">
           ABOUT
     </p>
</a>

Reverse the position of <a> and <p>

<p class="footerlink">
     <a href="about.html">        
           ABOUT
     </a>
</p>

Do the same in all others.

Writing <a> before <p> makes the whole<p> as a link. And, as the <p> has some default padding, the area without text also becomes clickable.

Upvotes: 1

Ren&#233; Roth
Ren&#233; Roth

Reputation: 2106

Your behaviour sounds like the standard behaviour for padding, which is whitespace "inside" of the element (between content and border). margin, as you are using it, is whitespace outside of the border and thus should not be part of the link element.

The problem in your case could be that you added the margin to the span element inside of the a element and thus being seen as "belonging" to the link in some browser. Move the margin attribute to the a element (#footerlinks a) itself instead of its child (.footerlink).

See here

Upvotes: 0

Aabid
Aabid

Reputation: 941

in this class you are giving margin of 15px.

.footerlink {
  font-size: 14px;
  vertical-align: center;
  margin-right: 15px;
  display: inline;
}

Upvotes: 0

pBuch
pBuch

Reputation: 1001

Simplest solution would be reversing the p and a on your links. Then you can adjust margin and padding on the paragraphs (.footerlink) and the links are just as long as the text is.

e.g.

<p class="footerlink">
<a href="rooms.html">
ROOMS
</a>
</p>

Upvotes: 1

Related Questions