Как сделать в ряд два-три блока ссылками?

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X

#1 25 августа 2018 в 11:57

Здравствуйте!
Вот смотрите, имеется html-блоки на сайте.
Так как я в кодинке полный ноль, то немного не понимаю, как правильно сделать.
Подскажите пожалуйста уважаемое сообщество)))

Я хочу сделать, чтобы несколько блоков по горизонтали отображались на сайте ссылками.

Вот пример — Ссылка внутри слоя:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>Слой-ссылка</title>
   <style>
    .link {
     width: 300px; /* Ширина слоя */
     height: 200px; /* Высота слоя */
     background: #fc0; /* Цвет фона */
    }
    .link a {
     display: block; /* Ссылка как блочный элемент */
     text-align: center; /* Выравнивание по центру */
     height: 100%; /* Высота на весь слой */
     color: #666; /* Цвет ссылки */
    }
  </style>
 </head> 
 <body> 
  <div class="link">
   <a href="1.html">Ссылка</a>
  </div>
 </body>
</html>

Хорошо, с этим более менее понятно, но а как сделать, чтобы таких блоков было, допустим, два в строке?
Вот есть код, чтобы выставить пару блоков ДИВ по горизонтали — Как расположить несколько блоков div в ряд:

 <!-- ------- установим стили блока DIV -------- -->
<style>
#line_block { 
        width:110px; 
        height:50px; 
        background:#f1f1f1; 
        float:left; 
        margin: 0 15px 15px 0; 
        text-align:center;
        padding: 10px;
        }
</style>
   <!-- ---------- вставим блоки на страницу --------- -->
<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->
 
<div id="line_block">DIV 1</div> 
<div id="line_block">DIV 2</div> 
<div id="line_block">DIV 3</div>
<div id="line_block">DIV 4</div>
<div id="line_block">DIV 5</div>
<div id="line_block">DIV 6</div>
 
<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->

Как сделать, чтобы каждый блок стал ссылкой полностью, но в ряд, то есть два, три блока с ссылками по горизонтали?
Подскажите пожалуйста кто-нибудь))) zst

essens.ru

#2 25 августа 2018 в 13:36

Как сделать, чтобы каждый блок стал ссылкой полностью
skewes

Сделать ссылкой можно либо текст, либо картинку.
У Вас там что в этих блоках будет?

#3 25 августа 2018 в 14:03

Я делал тремя столбцами так:
<div style="float: left; width: 100%">
<div style="float: left; width: 33%">
<p><a href="http://site/ssilka">название ссылки первого столбца</a></p>
</div>
<div style="float: left; width: 33%">
<p><a href="http://site/ssilka">название ссылки второго столбца</a></p>
</div>
<div style="float: left; width: 33%">
<p><a href="http://site/ssilka">название ссылки третьего столбца</a></p>
</div>
</div>

Сегодня в 22:07

#4 25 августа 2018 в 14:12

Ris, я хочу блок просто залить одним цветом и сделать его, весь блок, ссылкой.
В блоке также будет текст)))
Melon, спасибо большое, сейчас гляну)))

essens.ru

#5 25 августа 2018 в 14:13

 
 <!-- ------- установим стили блока DIV -------- -->
<style>
#line_block { 
        width:110px; 
        height:50px; 
        background:gray; 
        float:left; 
        margin: 0 15px 15px 0; 
        text-align:center;
        padding: 10px;
        color:#fff;
        }
 
#line_block:hover { background:green; }
 
#line_block:active {  
    position: relative;
    background-color: red;
}
</style>
 
   <!-- ---------- вставим ссылки на страницу --------- -->
 
<a href="https://url1" id="line_block">ДИВ 1</a>
<a href="https://url2" id="line_block">ДИВ 2</a>
<a href="https://url3" id="line_block">ДИВ 3</a>
<a href="https://url4" id="line_block">ДИВ 4</a>
<a href="https://url5" id="line_block">ДИВ 5</a>
<a href="https://url6" id="line_block">ДИВ 6</a>

xhtml.ru/instr/html_editor/

#6 25 августа 2018 в 14:34

чтобы несколько блоков по горизонтали отображались на сайте ссылками
skewes

Вот еще, чтобы именно див был ссылкой

© если тебе надо из чего либо сделать ссылку… то это что-то нужно обернуть тегом: <a>

<a href="ссылка"><div id="line_block">DIV 1</div> </a>

#7 25 августа 2018 в 15:03

Всем огромное спасибо!!!
Разобрался)))

essens.ru

Как правильно объединять видже

Поддержка видео хостингов

Как сделать в ряд два-три блока ссылками?

Похожие темы

Цвет в блоках виджетов - ряд / колонка (тема modern)

[ЕСТЬ РЕШЕНИЕ] Как добавить вложенный ряд для виджетов в шаблоне Modern?

Как в default_list_featured.tpl.php вывести 3 первых элемента один под другим?

Как в фильтре вывести 3 или 4 колонки в ряд через опцию в админке?

Рекламные ссылки в коде

Карта сайта со своими ссылками.

InstantCMS Team

О проекте

Поддержка

Дополнения