O.Telegin O.Telegin - 5 months ago 14
HTML Question

make <div> as a link and save the sizes of the containers

So now I have this structure, and I'm happy with it. enter image description here The problem is that this containers should be active as a links. Until now the links are working only if you will press on the text. I know that I can make them active if I will make the structure something like

<a><div...></div></a>
, but then the position of the containers becoming different.

Now I'm using the following code

CSS:

.containerfourt{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}





.titlewhitebackground{
width: 70%;
height: auto;
padding: 20px;
background-color: white;
display: inline-block!important;
background-color: white;
background-image: url("/expotory/wp-content/uploads/2016/06/bar_003soft.png");
}



.newnews{
width: 30%;
height: auto;
padding: 20px;
background-color: white;
display: inline-block!important;
background-color: white;
color: white;

}


.navigationfourtfirst{
width: 48.5%;
height: auto;
padding: 20px;
background-color: #048fc2;
display: inline-block!important;
margin-right: 30px;
margin-top: 30px;
color: white;
background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
background-repeat: no-repeat;
background-position: 75% 95%, 85% 95%, 95% 95%;
background-size: 30px 30px;


}


.navigationfourtsecond{
width: 23%;
height: auto;
padding: 20px;
background-color: #174a62;
display: inline-block!important;
margin-right: 30px;
margin-top: 30px;
color: white;
background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
background-repeat: no-repeat;
background-position: 50% 95%, 70% 95%, 90% 95%;
background-size: 30px 30px;
}

.navigationfourtthird{
width: 23%;
height: auto;
padding: 20px;
background-color: #174a62;
display: inline-block!important;
margin-top: 30px;
color: white;
background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
background-repeat: no-repeat;
background-position: 50% 95%, 70% 95%, 90% 95%;
background-size: 30px 30px;
}

.navigationfourtfourth{
float: left;
width: 100%;
max-width: 1130px;
margin-left: auto;
margin-right: auto;
min-height: 283px;
margin-bottom: 15px;
margin-top: 30px;
height: auto;
height: auto;
padding: 20px;
background-image: url(/expotory/wp-content/uploads/2016/06/expotory_b_00.png);
color: white;
}


.navigationfourtfirst:hover,
.navigationfourtsecond:hover,
.navigationfourtthird:hover{
background-color: #0167a5;
}

.navigationfourtfourth:hover{
background-image: url(/expotory/wp-content/uploads/2016/06/expotory_b_00001.png);
}


.navigationfourtfirst h3,
.navigationfourtsecond h3,
.navigationfourtthird h3,
.navigationfourtfourth h3
{
color: white;
}

.navigationfourtfirst a,
.navigationfourtsecond a,
.navigationfourtthird a,
.navigationfourtfourth a
{
color: white;
}

.navigationfourtfirst a:hover,
.navigationfourtsecond a:hover,
.navigationfourtthird a:hover,
.navigationfourtfourth a:hover
{
color: white!important;
}


and HTML

<div class="containerfourt">
<div class="titlewhitebackground">
<h1>Территория</h1>
<h3>Путеводитель по выставочному миру: города и площадки, обзоры, аналитика, интересные факты и навигация, — где проводить выставки, где выставлять свой продукт, где посещать?
</h3>
</div>

<div class="newnews"><section id="recent-posts-3" class="widget widget_recent_entries">
<h3 class="widget-title"><u>свежие записи</u></h3>
<ul>
<li><a href="http://cu33132.tmweb.ru/expotory/2016/06/07/hashtag-united/"><u>Хэштег объединяет</u></a></li>
<li><a href="http://cu33132.tmweb.ru/expotory/2016/06/02/advices/"><u>25,5 универсальных советов практикующим маркетологам</u></a></li>
<li><a href="http://cu33132.tmweb.ru/expotory/2016/06/02/agrovideo/"><u>АГРОСАЛОН запустил вирусный сериал</u></a></li>
</ul>
</section></div>

<div class="navigationfourtfirst">
<a href="http://cu33132.tmweb.ru/expotory/category/regions/">
<h3>РЕГИОНЫ</h3>
Аналитика по регионам России: слабые и сильные стороны территорий, профильные отрасли, активность участников выставочного бизнеса.
</a>
</div>


<div class="navigationfourtsecond">
<a href="http://cu33132.tmweb.ru/expotory/category/platforms/">
<h3>ПЛОЩАДКИ</h3>
Всё о выставочных площадках и пространствах: история легендарных выставочных залов, технические характеристики, маркетинговые возможности.
<br>
</a>
</div>


<div class="navigationfourtthird">
<a href="http://cu33132.tmweb.ru/expotory/category/logistics/">
<h3>ЛОГИСТИКА</h3>
Справочник для экспонентов и посетителей: как добраться на выставку, как доставить оборудование и продукцию, где разместиться.
</a>
</div>



<div class="navigationfourtfourth">
<a href="http://cu33132.tmweb.ru/expotory/category/territory-in-numbers/">
<h3>ТЕРРИТОРИЯ В ЦИФРАХ</h3>
Инфографика — аналитика по регионам, выставочным площадкам России и мира и логистике выставок в удобном графическом формате.
</a>
</div>

</div>


the link to the website is http://cu33132.tmweb.ru/expotory/territory/

Hope that you can help me!
Thank you in advance !

Answer

A quick search here on SO resulted in a post, where three different approaches are shown: How do you make a div tag into a link

Following line from the provided link helped:

<div onclick="location.href='url'">content</div>
Comments