2

I have a tile that displays information but also needs to be a link. If the user clicks anywhere on the tile it needs to take them to the appropriate action.

Below is an image of what I have created.

enter image description here

The HTML

    <div class="tile">
        <div class="tile-text">Runs</div>
        <div class="tile-text details">Manage runs, routes, races, and goals</div>
        <div id="runs" class="tile-text live">You have a four mile run today</div>
    </div>

Now if I create an ActionLink, it will create the blue tile, but I am unsure of how to get the three child divs inside of the ActionLink.

I have tried the following ActionLink:

@Html.ActionLink("Runs", "Index", "Run", null, new { @class = "tile-text" })

This creates the following image:

enter image description here

So basically, how do I get the tile to link to the Action and still have all of the three child divs inside of it?

4

3 に答える 3

2

You could add a onclick="window.location.href='link'" attribute on the tile <div>, and style it with cursor: pointer to make it look like a link, if needed.

Example:

<div class="tile" onclick="window.location.href='link'">
    <div class="tile-text">Runs</div>
    <div class="tile-text details">Manage runs, routes, races, and goals</div>
    <div id="runs" class="tile-text live">You have a four mile run today</div>
</div>

Or you could make the tile <div> be an <a> element and style it to be display: block and to include the appropriate width and height, then make all its children <span>s with display: block.

Example:

<style type="text/css">
    .tile, .tile-text { display: block; }
    // You could add width and height to .tile if needed.
    // Also, if you want to put tiles next to each other, inline-block for .tile
    // would be more appropriate.
</style>

<a class="tile" href="link">
    <span class="tile-text">Runs</span>
    <span class="tile-text details">Manage runs, routes, races, and goals</span>
    <span id="runs" class="tile-text live">You have a four mile run today</span>
</a>
于 2012-05-20T15:20:38.140 に答える
0

You need to have the blue tile as an actual image. This clickable image should be placed in a div.

With CSS you can then put the image behind the text content using z-index / absolute positioning.

于 2012-05-20T15:21:59.097 に答える
0

This is a quick implementation of Radu's option 2. All you need to do now is tidy it up and move the inline css into the css for your a class called title.

<body>  
<a class="tile" href="#" style="width: 200px; height: 300px; background-color: lightblue; display: block;">
    <h3 class="tile-text">Runs</h3>
    <p class="tile-text-details">Manage runs, routes, races, and goals</p>
    <p class="runs" class="tile-text-live">You have a four mile run today</p>
</a>
</body>
于 2012-05-20T15:51:30.340 に答える