CODEWITHSUNDEEP
htmlcsshyperlink
Reed
Reed

Reputation: 127

CSS Style Header w/Hyperlink Issue

Below is my basic css style. I have made my "Title" a hyperlink so visitors can quickly get back to the home page. However, when I add my table, the title hyperlink becomes disabled. 

/* JavaScript */

.header {
	position: absolute;
	height: 85px;
	right: 0;
	top: 0;
	left: 0;
	padding: 1rem;
	background-color: #3399CC;
	text-align: center;
	font-size: 100%;
	color: #FFFFFF;
}
.wrap {
	width: 100%;
	max-width: 24em;
	margin: auto;
}
.content {
	position: absolute;
	top: 0px;
	margin-top: 5px;
	margin-left: 5px;
}
h1:link, a:link {
	color: white;
}
table, td, th {
	border: 10px solid #ffffff;
	text-align: left;
	margin-top: 140px;
}
table {
	border-collapse: initial;
	width: 100%;
}
td {
	padding: 15px;
	width: 25%;
	line-height: 2;
}
th {
	background-color: grey;
	color: white;
	padding: 5px;
	width: 25%;
}
td:hover {
	background-color: #f5f5f5
}

Here is my Title, if I remove the below content my Title stays a hyperlink. If I add the below content, my title stops being a hyperlink.

<body>
<div class="header">
  <h1><a href="index.html" style="text-decoration: none">Title</h1>
  </a> </div>
<!-- Here is my table content. -->
<div class="content">
<table class="ex1">
  <tr>
    <th>$company</th>
    <th>$company</th>
    <th>$company</th>
  </tr>
  <tr>
    <td><img src="ateam.jpg" alt="team" style="width: 260px; 
        height: 150px;"> <br>
      <b>URL:</b> $url <br>
      <b>Location:</b> $location <br>
      <b>Inductry:</b> $dropdown <br>
      <b>Start Date:</b> $sdate  &nbsp <b>End Date:</b> $edate <br>
      <b>Announcement:</b><br>
      $announcement <br></td>
   </tr>
</table>
</div>
<footer></footer>
</body>

I can't figure out why adding a table would affect my "Title". Any help would be appreciated.

Upvotes: 2

Views: 86

Answers (2)

Johannes
Johannes

Reputation: 67778

You have a wrong order of closing tags here:

<h1><a href="index.html" style="text-decoration: none">Title</h1></a>

That should be

<h1><a href="index.html" style="text-decoration: none">Title</a></h1>

Also, the complete footer should be inside the body, plus you have no closing tag for <div class="content"> (i.e. the state before someone else edited the code in your question)

ADDITION / COMPLETE SOLUTION:

Your .content was overlaying the header (both of which have absolute position). If you erase the margin: 140px from the table and move it to the content rule, it works:

.header {
  position: absolute;
  height: 85px;
  right: 0;
  top: 0;
  left: 0;
  padding: 1rem;
  background-color: #3399CC;
  text-align: center;
  font-size: 100%;
  color: #FFFFFF;
}
.wrap {
  width: 100%;
  max-width: 24em;
  margin: auto;
}
.content {
  position: absolute;
  top: 0px;
  margin-top: 5px;
  margin-left: 5px;
}
h1:link,
a:link {
  color: white;
}
.content {
  margin-top: 140px;
}
table,
td,
th {
  border: 10px solid #ffffff;
  text-align: left;
}
table {
  border-collapse: initial;
  width: 100%;
}
td {
  padding: 15px;
  width: 25%;
  line-height: 2;
}
th {
  background-color: grey;
  color: white;
  padding: 5px;
  width: 25%;
}
td:hover {
  background-color: #f5f5f5
}
<body>
  <div class="header">
    <h1><a href="index.html" style="text-decoration: none">Title</a></h1>
  </div>
  <!-- Here is my table content. -->
  <div class="content">
    <table class="ex1">
      <tr>
        <th>$company</th>
        <th>$company</th>
        <th>$company</th>
      </tr>
      <tr>
        <td>
          <img src="ateam.jpg" alt="team" style="width: 260px; 
        height: 150px;">
          <br>
          <b>URL:</b> $url
          <br>
          <b>Location:</b> $location
          <br>
          <b>Inductry:</b> $dropdown
          <br>
          <b>Start Date:</b> $sdate &nbsp <b>End Date:</b> $edate
          <br>
          <b>Announcement:</b>
          <br>$announcement
          <br>
        </td>
      </tr>
    </table>
  </div>
  <footer></footer>
</body>

Upvotes: 2

Carp
Carp

Reputation: 56

I have just run your code in browser and I believe the reason why the link is not working is because div.content is actually (invisibly) covering div.header therefore preventing the user from hovering over it/clicking it.

The solution I found was changing div.content from having position:absolute; to position:relative;.

Upvotes: 0

Related Questions