CODEWITHSUNDEEP
htmlcss
raiyan106
raiyan106

Reputation: 85

The link inside the head tag, which is inside a div, is not working

I have created this code but the "HOME PAGE" does not seem to work like a link. In the css a:link, the "text-decoration" seems to work but the "color" does not work. And it is not responding like a link. Here is the code:

<!DOCTYPE html>
<html>
<head>

<style>

h4{
float:left;
margin:10px;
text-color:white;
font-family:cursive;
}
.exp{
margin-left:50px;
}
a:link{
text-decoration:none;
color:pink;
}
</style>

</head>

<body style="background-color:#787878">

<div style="background-color:#A2CD5A;
position:absolute; margin-left:180px;
margin-top:100px;width:1000px;
height:750px;">
                <div style="background-color:#CAE1FF;
                position:relative; top:50px;left:250px;
                width:200px;height:400px;">
                </div>
</div>

<div style="position:fixed;top:0px;left:0px;
height:3em;width:100%;background-color:#104E8B;
z-index:10">
    <h4 class="exp"><a href="index.html">Home Page</a></h4>
    <h4>My Blog </h4>
    <h4>Accomplishments</h4>
    <h4>Institutes</h4>
    <h4>Some Fun!</h4>
    <h4>Contact Me</h4>
    <h4>Search:</h4>
    <h6 style="position:relative;top:-16px">
            <form>
            <input type="text" name="search" value="SearchBox"/>
        </form>
        </h6>
</div>


</body>
</html>

Upvotes: 0

Views: 165

Answers (2)

Juan Ma
Juan Ma

Reputation: 69

A few things:

  • Try to respect div tags order. First the header, then the content, and so on

  • Every time you float a div tag, the container of that div must has the attribute "overflow:hidden" in the style

  • If you are working with an external css doc, it is not necesary to add css in each div, you can do it with an id as u can see in the example

  • If you are working with a menu you must use a list, they are not tittles, so using the tags h1...h6 has no sence.

  • I can't rewrite all the code, but it has to be something like this (the menu with logo).

Here is the code! Hope it helps https://drive.google.com/file/d/0B7ID1nfpPSnXRS1KWmhKMnl2RmM/edit?usp=sharing

Upvotes: 0

Joe Enos
Joe Enos

Reputation: 40383

Your last div, which contains your header, has a fixed position and a z-index higher than the page, which means it's physically on top of your a tag. So whatever is underneath that div is unclickable.

Upvotes: 3

Related Questions