Estoy muy confundida con las etiquetas "a" (hipervínculos dentro de otros).
Lo que quiero intentar es que el card sea un enlace contenedor, pero que también, cuando hagan clic en el usuario, los redirija al usuario y no al post.
cuando coloco un <a></a>
dentro de otro, se cierra con el primero que encuentra. ¿Es posible hacer <a id="contenedor">....<a id="hijo">...</a>...</a>
?
Intenté hacerlo con javascript, pero me toma todo el div y no me deja hacer clic en los enlaces internos.
.img-raised {
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.card .ftr div {
display: inline-block;
}
.card .ftr .stats {
float: right;
line-height: 30px;
}
.card .ftr .stats {
position: relative;
top: 1px;
font-size: 14px;
}
.table {
margin-bottom: 0px;
}
.card .table {
padding: 15px 30px;
}
.card .table-info {
background: linear-gradient(60deg, #26c6da, #0097a7);
}
.card .table-success {
background: linear-gradient(60deg, #66bb6a, #388e3c);
}
.card .table-danger {
background: linear-gradient(60deg, #ef5350, #d32f2f);
}
.card [class*="table-"] {
color: #FFFFFF;
border-radius: 6px;
}
.card [class*="table-"] .card-caption a,
.card [class*="table-"] .card-caption,
.card [class*="table-"] .icon i {
color: #FFFFFF;
}
.card [class*="table-"] .icon i {
border-color: rgba(255, 255, 255, 0.25);
}
.card [class*="table-"] .author a,
.card [class*="table-"] .ftr .stats,
.card [class*="table-"] .category,
.card [class*="table-"] .card-description {
color: rgba(255, 255, 255, 0.8);
}
.card [class*="table-"] .author a:hover,
.card [class*="table-"] .author a:focus,
.card [class*="table-"] .author a:active {
color: #FFFFFF;
}
.card [class*="table-"] h1 small,
.card [class*="table-"] h2 small,
.card [class*="table-"] h3 small {
color: rgba(255, 255, 255, 0.8);
}
.card .author .avatar {
width: 36px;
height: 36px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<article class="col-md-12">
<div class="cards-1 section-gray">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="table table-success">
<h5 class="category-social">
<i class="fa fa-facebook"></i> Facebook
</h5>
<h4 class="card-caption">
<a href="#">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
doloremque, quae saepe, nisi, illo at maxime"</a>
</h4>
<div class="ftr">
<div class="author">
<a href="#"> <img src="http://adamthemes.com/demo/code/cards/images/avatar3.png"
alt="" class="avatar img-raised"> <span>Vilot Cabel</span> </a>
</div>
<div class="stats"> <i class="fa fa-heart"></i> 678 <i
class="fa fa-share-alt"></i> 56 </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</body>
</html>
Cuando intenté colocar una etiqueta "a" dentro de otra, sucedió lo siguiente.
.img-raised {
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.card .ftr div {
display: inline-block;
}
.card .ftr .stats {
float: right;
line-height: 30px;
}
.card .ftr .stats {
position: relative;
top: 1px;
font-size: 14px;
}
.table {
margin-bottom: 0px;
}
.card .table {
padding: 15px 30px;
}
.card .table-info {
background: linear-gradient(60deg, #26c6da, #0097a7);
}
.card .table-success {
background: linear-gradient(60deg, #66bb6a, #388e3c);
}
.card .table-danger {
background: linear-gradient(60deg, #ef5350, #d32f2f);
}
.card [class*="table-"] {
color: #FFFFFF;
border-radius: 6px;
}
.card [class*="table-"] .card-caption a,
.card [class*="table-"] .card-caption,
.card [class*="table-"] .icon i {
color: #FFFFFF;
}
.card [class*="table-"] .icon i {
border-color: rgba(255, 255, 255, 0.25);
}
.card [class*="table-"] .author a,
.card [class*="table-"] .ftr .stats,
.card [class*="table-"] .category,
.card [class*="table-"] .card-description {
color: rgba(255, 255, 255, 0.8);
}
.card [class*="table-"] .author a:hover,
.card [class*="table-"] .author a:focus,
.card [class*="table-"] .author a:active {
color: #FFFFFF;
}
.card [class*="table-"] h1 small,
.card [class*="table-"] h2 small,
.card [class*="table-"] h3 small {
color: rgba(255, 255, 255, 0.8);
}
.card .author .avatar {
width: 36px;
height: 36px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<article class="col-md-12">
<div class="cards-1 section-gray">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="card" href="#">
<div class="table table-success">
<h5 class="category-social">
<i class="fa fa-facebook"></i> Facebook
</h5>
<h4 class="card-caption">
<a href="#">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
doloremque, quae saepe, nisi, illo at maxime"</a>
</h4>
<div class="ftr">
<div class="author">
<a href="#"> <img src="http://adamthemes.com/demo/code/cards/images/avatar3.png"
alt="" class="avatar img-raised"> <span>Vilot Cabel</span> </a>
</div>
<div class="stats"> <i class="fa fa-heart"></i> 678 <i
class="fa fa-share-alt"></i> 56 </div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</article>
</body>
</html>
click
a la tarjeta y conservar los enlaces internos.