Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
28
rated 0 times [  33] [ 5]  / answers: 1 / hits: 33404  / 10 Years ago, wed, december 31, 2014, 12:00:00

I would like to click on the DIV (article-column1) (which is a rectangle)



and it should redirect me to another HTML document:



https://s3-us-west-1.amazonaws.com/example/the-example.html




Blockquote




<style>
#content1 {
width: 70%;
overflow: auto;
margin: 4% 0% 0% 23%;
padding-left: 6%;
}

#content1 div {
float: left;
width:27%;
height:20%;
background-color: #efefef;
margin: 1% 3% 2% 0%;
padding: 2% 2% 1% 2%;
text-align: center;
}

#content1 p {
color:#f91d04;
}

.article-column1 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.article-column2 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.article-column3{
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.article-column4 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
</style>
<body>
<div id=content1>
<div class=article-column1>
<img src =https://s3-us-west-1.amazonaws.com/plus32med.png>
<p>New Workout</a></p>
</div>

<div class=article-column2>
<img src = https://s3-us-west-1.amazonaws.com/clock61.png>
<p>History</p>
</div>

<div class=article-column3>
<img src = https://s3-us-west-1.amazonaws.com/money57.png>
<p>Graph</p>
</div>

<div class=article-column4>
<img src = https://s3-us-west-1.amazonaws.com/play11.png>
<p>video</p>
</div>
</div>
</body>



Blockquote



More From » jquery

 Answers
11

in HTML5 you can wrap your <div> inside an anchor element.

SEO-wise is always better to use an Anchor tag instead of JavaScript onclick handlers:



<a href=page.html>
<div>Yey I'm clickable</div>
</a>


PS: make sure to not have other anchor or action button elements within the wrapping <a>.


[#68347] Friday, December 26, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
payne

Total Points: 527
Total Questions: 108
Total Answers: 88

Location: Tajikistan
Member since Thu, Apr 14, 2022
2 Years ago
;