Jump to content

Follow link when clicking a panel


Trevor_S
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...