Забыли пароль?
Запросите новый здесь.

Автор темы: Alex
ID темы: 2833
Информация:
Тема содержит 14 сообщения, была просмотрена 907 раз.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » HTML и CSS
 Распечатать тему
Cоздать ссылку из нескольких div
Alex
Надо чтобы это было одной ссылкой, у кого какие мысли как это реализовать?
Скачать исходники  Код

<div class='uslugi1'>
<div class='uslugi-title'>текст название</div>
<div class='uslugi-img'><img src='images/uslugi/1.jpg' alt='' /></div>
<div class='uslugi-spisok'>текст описание</div>
</div>






нашел на просторах инета такое простое решение


что думаете по поводу такого решения?
 
Web
Zaxap
Возможно, я не понимаю до конца проблемы, либо крайне глуп, но...\
Давайте поиграем в КАПИТАНА.

DIV - блочный элемент. Вам нужна ссылка, блочный A?
Так давайте сделаем это! Just do it!

Загрузить источник  GeSHi: HTML
  1. <a class="uslugi1" href="adres_stranicy.html" target="_blank">
  2. <div class="uslugi-title">текст название</div>
  3. <div class="uslugi-img"><img src="images/uslugi/1.jpg" alt="" /></div>
  4. <div class="uslugi-spisok">текст описание</div>
  5. </a>
Добавлено за 0.005 секунд, используя GeSHi 1.0.8.10


Загрузить источник  GeSHi: CSS
  1. .uslugi1 { display: block }
Добавлено за 0.004 секунд, используя GeSHi 1.0.8.10


Можно и так, но не рекомендую

Загрузить источник  GeSHi: HTML
  1. <a class="uslugi1" href="adres_stranicy.html" target="_blank" style="display:block">
  2. <div class="uslugi-title">текст название</div>
  3. <div class="uslugi-img"><img src="images/uslugi/1.jpg" alt="" /></div>
  4. <div class="uslugi-spisok">текст описание</div>
  5. </a>
Добавлено за 0.004 секунд, используя GeSHi 1.0.8.10


Все ведь просто? Да, все просто. Это основы, Карл, простите, Александр. Прошу прощение, за горение.
Ладно, если бы это было сложно... или если бы Вы были новичком. Но ведь Вы на rusfusion уже давно, и у Вас же... новыйкод.рф, а я - всего лишь мальчик с улицы ;)
Зло не дремлет, а я добрый...
 
Alex
Zaxap,

я тоже сразу так и хотел сделать, но думал можно ли столько дивов пихать в одну ссылку,

просто были сомнения
 
Web
Zaxap
Alex, тогда прошу прощения. Можно все, что угодно:)

Оффтопик Но я бы сделал так:
Загрузить источник  GeSHi: HTML
  1. <a class="uslugi1" href="adres_stranicy.html" target="_blank">
  2. <h2 class="uslugi-title">текст название</div>
  3. <img class="uslugi-img" src="images/uslugi/1.jpg" alt="" />
  4. <div class="uslugi-spisok">текст описание</div>
  5. </a>
Добавлено за 0.004 секунд, используя GeSHi 1.0.8.10

Теперь div'ов меньше, нужно только подправить стили.


Вообще да, размещение в A блочных элементов - не то, что стоит делать. По крайней мере, в XHTML, HTML4. В HTML5 это все валидное.
Тем не менее, вешать onclick - то еще извращение. Никто Вам не запретит, делайте, как считаете нужным
Изменил(а) Zaxap, 19.03.2017 07:23
Зло не дремлет, а я добрый...
 
Polarfox
Нельзя блочный элемент пихать в ссылку, это оскорбление чувств валидирующих,
можно span например.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
Alex
Polarfox написал:

Нельзя блочный элемент пихать в ссылку, это оскорбление чувств валидирующих,


вот и у меня сомнения с этим были связаны
 
Web
Zaxap
Polarfox, совершенно верно ag
Можно заменить все div'ы span'ами... но это уже маразм, я считаю.
А в HTML5 по стандартам можно в ссылку пихать все, что угодно...
Но, если дело касается текстов, заголовков, ссылку нужно располагать внутри блочного элемента: так семантически правильнее
Зло не дремлет, а я добрый...
 
Alex
кстати проверил я ту страницу валидатором http://validator.w3.org/

ни одной претензии к коду который в первом посте под спойлером!
 
Web
Polarfox
он верный - но так нельзя, это же ссылка.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
x1
 
Web
Zaxap
Загрузить источник  GeSHi: HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>My super link</title>
  5. </head>
  6. <body>
  7. <a class="uslugi1" href="adres_stranicy.html" target="_blank">
  8. <span class="uslugi-title">текст название</span>
  9. <img class="uslugi-img" src="images/uslugi/1.jpg" alt="" />
  10. <span class="uslugi-spisok">текст описание</span>
  11. </a>
  12. </body>
  13. </html>
Добавлено за 0.005 секунд, используя GeSHi 1.0.8.10


Здесь все валидно (именно валидно), так что... вот так вот.
Зло не дремлет, а я добрый...
x1
 
Pisatel
Zaxap, все верно. Дивы в ссылке - это моветон какой-то. Если очень нужно, то и ссылку, и span'ы в ней можно сделать блочными для задания каких-то свойств, присущих только блочным элементам.
Оффтопик Нихрена се я сумничал....

Переполз на WP, но PF - это как первая любовь, которая не забывается...
 
Web
Polarfox
а есть смысл делать пути без слэша впереди? вот допустим base не прописан (в pf это стандартно) и на форуме все будет страшно и 404, на аддонах тоже.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
Pisatel
Polarfox, мб топикстартер имел ввиду не pf, а, например, одноуровневый html-сайтег, он, вродь, не уточнял...
Переполз на WP, но PF - это как первая любовь, которая не забывается...
 
Web
Alex
Polarfox, этот код вставлен в доп страницу, и уход тоже на доп страницу.

вставил содержимое в тег <a>
 
Web

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум: