Follow link when clicking a panel

[Trevor_S]

I'm using w3css, and want to create a number of panels on a page.  Each will contain a brief summary of another page, and when the panel is clicked, the user should be taken to that other page.

Here is a simplified extract from my current HTML.  It looks how I want it to, but obviously nothing happens when you click the panel.

<div class="w3-panel">
  <h2>Panel Title</h2>
  <p>A summary of the page that the user will be taken to.</p>
</div>

This is what I've tried unsuccessfully so far:

1. Just adding "href=..." to the div.

<div class="w3-panel" href="other-page.html">
....
</div>

This makes no difference, the href seems to be ignored.

2. Using the <a> tag within the div.

<div class="w3-panel">
<a href="other-page.html">
...
</a>
</div>

Clicking now works, but all the text is underlined like a standard hyperlink.  It may be possible to amend the .CSS file to prevent underlining, but there are hyperlinks within text elsewhere on the page that I want to remain underlined.

3. Turning the panel into a button.

<div class="w3-panel w3-button" href="other-page.html">
...
<div>

Clicking works, but the text is centred and doesn't wrap.  So by default the panel becomes very wide, and if I try to control the width, the end of the line of text isn't visible.

Thanks!

[Ingolme]

Use an <a> tag, give it a class attribute and then remove the underline using the class as a seletor.

<div class="w3-panel">
  <a href="other-page.html" class="box-link">
  	...
  </a>
</div>



CSS:
.box-link {
  text-decoration: none;
}

 

[Trevor_S]

Thanks, that's worked!