Why is the tag not working?

Question

I am making a website for my school's rowing team, and I can't seem to get the links in the navigation bar to work. I've tried to switch the <p> and <a> tags around and change the z-index of the elements.

HTML:

<body>
<header class="horizontalDiv">
    <img src="http://www.computer-wallpaper-backgrounds.com/wallpaper/1680x1050/cool-backgrounds/water-ripples-background.jpg" id="headerPic"/>
    <div id="titleContainer">
        <b><p id="title">*** Crew Team</p></b>
    </div>
    <div class="horizontalDiv" id="navigation">
        <div class="nav" id="home">
            <p><a href="https://www.google.com/?gws_rd=ssl">Home</a></p>
        </div>
        <div class="nav" id="rowingSeason">
            <a><p>Rowing Season</p></a>
        </div>
        <div class="nav" id="basicsOfCrew">
            <a><p>Basics of Crew</p></a>
        </div>
        <div class="nav" id="registration">
            <a><p>Registration</p></a>
        </div>
        <div class="nav" id="documents">
            <a><p>Documents</p></a>
        </div>
        <div class="nav" id="pictures">
            <a><p>Pictures</p></a>
        </div>
        <div class="nav" id="news">
            <a><p>News</p></a>
        </div>
        <div class="nav" id="boosters">
            <a><p>Boosters</p></a>
        </div>
    </div>
</header>
</body>

CSS:

.horizontalDiv {
     width: 104%;
}
header {
    height: 200px;
    border-bottom: 3.5px solid black;
    margin: -10px 0px 0px -10px;
}
#headerPic {
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .5;
}
#title {
    color: #b91a2f;
    font-size: 30px;
    font-family: verdana;
}
#titleContainer {
    z-index: 100;
    margin-top: -170px;
    margin-left: 65px;
}
.nav {
    z-index: 99;
    height: 100%;
    width: 11.3%;
    margin: 15px 0px 0px -3px;
    display: inline-block;
    border-left: 3px solid black;
    border-right: 3px solid black;
}
.nav p {
    text-align: center;
    font-family: verdana;
    font-size: 16px;
    color: black;
}

I just had the link go to google for right now.

You should be careful with all those % values. Consider validating your html first http://validator.w3.org/ — EmmanuelBeziat, Nov 09 '14 at 22:18
just fyi, you may want to flip the paragraph tag with the anchor to make the paragraph tag wrap the anchor. http://stackoverflow.com/questions/13911274/can-a-p-tag-in-a-tag — Nathan, Nov 09 '14 at 22:20

score 3 · Answer 1 · answered Nov 09 '14 at 22:21

The problem is with the way how you have created those links.

They wont work for sure since you havent specified where they should link.

Wrong:

 <div class="nav" id="basicsOfCrew">
      <a>Basics of Crew</a>
 </div>

Correct:

<div class="nav" id="basicsOfCrew">
     <a href="#" title="">Basics of Crew</a>
</div>

score 2 · Answer 2 · answered Nov 09 '14 at 22:20

2

// right --> <div class="nav" id="home">
            <p><a href="https://www.google.com/?gws_rd=ssl">Home</a></p>
        </div>


  //wrong  <div class="nav" id="rowingSeason">
        <a><p>Rowing Season</p></a>
    </div>

Cant include any other html tags(except "span") within and forgot to add href(url) Should be:

   <p><a href="http://someurl">Rowing Season</a></p>

answered Nov 09 '14 at 22:20

SergeDirect

2,019
15
20

`P` inside `A` works fine in modern browsers. You can pretty much put anything inside `A` these days. It's still bad practice, but it does work. – Rudie Nov 09 '14 at 22:24
@Rudie, there is other ways to decorate text within links, I suppose images and text should be on their own and decorated from style sheet by calling the parent tag .. e.g ul li a – SergeDirect Nov 09 '14 at 22:31

score 2 · Answer 3 · answered Nov 09 '14 at 22:22

Your image is in front of the rest. You should put it on background than in html.

But to go around your problem, just add this :

.horizontalDiv {
position: relative;
z-index: 2;
}

But you should really validate your code (http://validator.w3.org/). Don't put block tags inside phrasing (inline) tags, like you did with

in ( is an exception, but you don't need in this case

score 1 · Answer 4 · answered Nov 09 '14 at 22:19

1

You need to specify the href

 <p><a href="pagetoopen.html">text to show</a></p>

answered Nov 09 '14 at 22:19

baao

71,625
17
143
203

score 1 · Answer 5 · answered Nov 09 '14 at 22:22

1

Better solution will be to create header div with CSS background-image and then into it put <nav> with anchors you want. Don't use z-index where you don't need to :).

answered Nov 09 '14 at 22:22

Mattin

94
5

score 1 · Accepted Answer · answered Nov 09 '14 at 22:24

The problem is that your header Picture is appearing above your tags so you have to give it position relative and z-index -1 http://jsfiddle.net/y1hhbgrw/1/

css

#headerPic {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: relative;
    opacity: .5;
}

Check the JsFiddle linked above. Also note that JsFiddle refuses to render links in its iFrame, but if you click ctrl + Enter you will see it functioning.

Why is the tag not working?

6 Answers6