LINUX.ORG.RU

Как правильно сделать ссылку?


0

0

Есть страница с извратным дизайном. Нужно чтоб пользователь нажав на определенный div перешел по ссылке на другую страницу. Делаю так:

<a href="some-link"><div>...</div></a>

Но валидатор говорит, что нельзя блочные теги заключать в строчные. Как правильно сделать?

anonymous

Ну, например, прописав стиль «display: inline» для div'а.

Или, если нужен именно блок, прописав «display: block» для тэга «a» и выкинув div

KRoN73 ★★★★★
()

Самое популярное решение - это поместить ссылку внутри дива, и через цсс выставить height и width в размер дива, предварительно сделав ссылку блочным элементом. Избавляться от дива не рекомендую - чревато багами

Orlangoor ★★★★★
()
Ответ на: комментарий от Miguel

совершенно верно, хтмлный валидатор ничего про цсс не знает.

anonymous
()
Ответ на: комментарий от anonymous

>Просто в диве еще другие дивы есть. Не все так просто.

Значит создать еще один див, указать его размеры, а внутри него уже ссылку. Вобще лучше бы код посмотреть

Orlangoor ★★★★★
()
Ответ на: комментарий от phasma

> <div onclick="document.location = '/new_page/';">..</div>

Так не надо делать (если нет на то обоснованной необходимости), потому как ни один поисковик по такой ссылке не пройдет.

Да и вообще это оверхед, в большинстве случаев не нужный

it-partizan
()
Ответ на: комментарий от Orlangoor

Вот код: (h2 невидим, добавил для поисковиков)

3 пустых дива сделал для того, чтоб вставить бекграунд для ссылки правильно.

<a href="/contacts/"> <div id="nav_contacts" class="navdiv"> <div class="nav_color" id="color_contacts"></div> <div class="nav_stone" id="stone_contacts"></div> <div class="nav_title" id="title_contacts"></div> <h2>Контакты</h2> </div> </a>

anonymous
()
Ответ на: комментарий от anonymous

Вот код: (h2 невидим, добавил для поисковиков)

3 пустых дива сделал для того, чтоб вставить бекграунд для ссылки правильно. 

              <a href="/contacts/">
              <div id="nav_contacts" class="navdiv">
                  <div class="nav_color" id="color_contacts"></div>
                  <div class="nav_stone" id="stone_contacts"></div>
                  <div class="nav_title" id="title_contacts"></div>
                  <h2>Контакты</h2>
              </div>
              </a>

anonymous
()
Ответ на: комментарий от Miguel

>Валидным оно от этого не станет.

И какое же правило в этом случае нарушаться будет? :) Блочный «a» совершенно валиден.

KRoN73 ★★★★★
()
Ответ на: комментарий от anonymous

Товарищь!

А что мешает сделать для <a свой класс, в котором указать display:block и background по вкусу. Там же можно задать width и weight, как для блочного элемента.

it-partizan
()
Ответ на: комментарий от KRoN73

Лучше скажи, что изменится. Валидность HTML определяется без всякого CSS.

Но если ты не умеешь работать с информацией сам - пара выдержек из HTML 4.0.1 Transitional DTD (можешь попробовать другие версии, лучше не станет):

<!ELEMENT A - - (%inline;)* -(A) -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | U | S | STRIKE | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | APPLET | OBJECT | FONT | BASEFONT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO | IFRAME">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Если увидишь здесь DIV, можешь меня застрелить.

Miguel ★★★★★
()
Ответ на: комментарий от anonymous

сделай резиновой картинкой с относительными размерами, как в liquid css

anonymous
()
Ответ на: комментарий от anonymous

Аффтару:

Уважаемый, а если вместо дивов с бэкграундами использовать img? Или div заменить на span? Посмотрите, например, как сделаны кнопочки на этом сайте: http://pingwin.biz/

theSoul ★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.