make
as a link and save the sizes of the containers

Question

So now I have this structure, and I'm happy with it. 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 !

That is not what your actual HTML code on the site looks like. You have a structure like this there, `

РЕГИОНЫ

…
` - notice the `` directly after the opening `` tag. You should go fix that first. (My guess would be that you’re perhaps using something client-side WYSIWYG editor like CKEditor to input this HTML code? Those sometimes mess things up when you put `a` around block elements, which is only allowed since HTML5.) — CBroe, Jun 09 '16 at 12:25

Sleek Geek · Answer 1 · 2016-06-09T12:31:57.877

2

The block of code below will find the link that it contains and take you there.

// Clickable DIV code starts here  

$("div").click(function () {
    window.location = $(this).find("a").attr("href");
    return false;
});

div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px solid blue;
  cursor: pointer;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div> <a href="http://stackoverflow.com/"> Clicker </a>

</div>

edited Jun 09 '16 at 12:31

answered Jun 09 '16 at 12:29

Sleek Geek

4,638
3
27
42

Works, but could be improved, if the mouse icon changes like it is does on usual links. – KJaeg Jun 09 '16 at 12:31
1

Then you do cursor: pointer on the css. – Sleek Geek Jun 09 '16 at 12:32
1

This should be marked as the correct answer... – David Wilkinson Jun 09 '16 at 12:40

score 1 · Answer 2 · answered Jun 09 '16 at 12:31

1

You can make div clickable with little bit of JS:

<div onClick="location.href=http://google.com">

</div>

answered Jun 09 '16 at 12:31

Justinas

41,402
5
66
96

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

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>

edited May 23 '17 at 10:34

Community

1
1

answered Jun 09 '16 at 12:29

KJaeg

698
3
7
23

1

Thank you ! the one with JS helped me too. Will be the lesson for me firstly to search more ! – O.Telegin Jun 09 '16 at 12:33
The lesson for life: Be lazy. Someone maybe did already the work for you. – KJaeg Jun 09 '16 at 12:34

score 0 · Answer 4 · answered Jun 09 '16 at 12:30

0

Just put your a around the div you made.

Example : https://jsfiddle.net/pxthzm80/

I made the two first blue div work as a link.

in the end it looks like :

<a href="#">
<div class="">

</div>
</a>

answered Jun 09 '16 at 12:30

Relisora

1,163
1
15
33

make as a link and save the sizes of the containers

РЕГИОНЫ

4 Answers4

make
as a link and save the sizes of the containers