Jump to content
Trevor_S

Follow link when clicking a panel

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!

Share this post


Link to post
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;
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...