28172 sujets

CSS et mise en forme, CSS3

[Résolu] Rendre un div cliquable

Bonjour,

J'ai compris comme faire avec un cas simple, mais ça ne fonctionne pas dans mon cas car mon lien est encapsulé dans un div supplémentaire et je ne sais pas comment faire.

But : rendre la zone rose cliquable également


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
    <link href="styles.css" rel="stylesheet" /> 
	</head>
	<body>
<div class="column1">
<div class="text-vertical"><h2><a href="./architecture-commerciale">architecture commerciale</a></h2></div>
</div>
</div>
</body>




.column1 {
	width:21.5%;
	height:476px;
	background:pink;
	margin-right:10px;
	-webkit-box-shadow: 1px 1px 4px #C9C9C9;
	-moz-box-shadow: 1px 1px 4px #C9C9C9;  
	box-shadow: 1px 1px 4px #C9C9C9;
	position: relative;
}
.text-vertical h2 {
	color:#FF5614;
	font-family: quicksandbook, Arial, sans-serif !important;
	font-size:1.5em;
	text-align:right;
   	height:40px;
    width: 400px;	
	/*FIRST you have to position it from the top right*/
   	position:absolute;
	top:-5px;
    right:-7px;
   	/*Give hime a fixed height and width*/
   	height:40px;
    	width: 400px;
   	 /*Defin the rotation origin to top right (like the absolute position)*/    
   	transform-origin: 380px 20px 0;
	-webkit-transform-origin : 380px 20px 0;
	-ms-transform-origin : 380px 20px 0;
	 /*rotate it*/
	transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* Internet Explorer */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari et Chrome */
    -o-transform:rotate(-90deg); /* Opera */
}


Merci de votre aide ! et bonne journée
Modifié par Newki75 (26 Aug 2014 - 10:16)
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <link href="styles.css" rel="stylesheet" />
    <style type="text/css">
.column1 {
	width: 21.5%;
	height: 476px;
	background: pink;
	margin-right: 10px;
	-webkit-box-shadow: 1px 1px 4px #C9C9C9;
	-moz-box-shadow: 1px 1px 4px #C9C9C9;
	box-shadow: 1px 1px 4px #C9C9C9;
	position: relative;
	cursor:pointer;
}
.text-vertical h2 {
	color: #FF5614;
	font-family: quicksandbook, Arial, sans-serif !important;
	font-size: 1.5em;
	text-align: right;
	height: 40px;
	width: 400px;
	/*FIRST you have to position it from the top right*/
	position: absolute;
	top: -5px;
	right: -7px;
	/*Give hime a fixed height and width*/
	height: 40px;
	width: 400px;
	/*Defin the rotation origin to top right (like the absolute position)*/    
	transform-origin: 380px 20px 0;
	-webkit-transform-origin : 380px 20px 0;
	-ms-transform-origin : 380px 20px 0;
	/*rotate it*/
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg); /* Internet Explorer */
	-moz-transform: rotate(-90deg); /* Firefox */
	-webkit-transform: rotate(-90deg); /* Safari et Chrome */
	-o-transform: rotate(-90deg); /* Opera */
}
</style>
    </head>
    <body>
<div class="column1" onclick="document.location='./architecture-commerciale'">
      <div class="text-vertical">
    <h2 ><a href="./architecture-commerciale">architecture commerciale</a></h2>
  </div>
    </div>
</div>
</body>
Sujet clos
Aller à