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!
