Меню для доски объявлений

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

Меню для доски объявлений из html кода

#1 8 мая 2019 в 18:01

Всем привет!

Хочу сделать меню для доски объявлений, html кодом для вывода виджетом на странице просмотра списком:

имею такой код:

Спойлер

<a title="------" href="ссылка"> <span><div style="float:left; margin-right:10px;"><img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" /></div><b>Пункт 1</b></span> </a>
<span style="padding: 0px 20px;">&nbsp;</span>
<a title="------" href="ссылка"> <span><img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" /><b>Пункт 2</b></span> </a>
<span style="padding: 0px 20px;">&nbsp;</span>
<a title="------" href="ссылка"> <span><img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" /><b>Пункт 3</b></span> </a>

Вопрос заключается в:

1. почему в пункте 2 и 3 нет отступа от картинки как в пункте 1?
2. Как правильнее оформить данный код?

Целью такого меню является, вставка ссылок пунктов меню, для замены такого меню:

или может есть другое решение?

Помогите пожалуйста, всем добра:)

#2 8 мая 2019 в 18:18

1. почему в пункте 2 и 3 нет отступа от картинки как в пункте 1?
MrDinesh

наверно потому что..

 
<a title="------" href="ссылка"> 
   <span>
      <div style="float:left; margin-right:10px;">
         <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
      </div>
      <b>Пункт 1</b>
   </span>
</a>

в первом пункте вы завернули картинку в div и задали margin-right:10px; а в последующих нет

2. Как правильнее оформить данный код?
MrDinesh

На этот вопрос вам могут ответить сотни человек, и каждый будет считать свой вариант правильным)))

#3 8 мая 2019 в 18:27

На этот вопрос вам могут ответить сотни человек, и каждый будет считать свой вариант правильным)))
Killer's dream

Подскажите как бы Вы сделали этот код?)

Сегодня в 03:32

#4 8 мая 2019 в 18:39

Подскажите как бы Вы сделали этот код?)
MrDinesh

Даже не знаю ))) как бы я сделал)))

#5 8 мая 2019 в 18:45

Спойлер

<a title="------" href="ссылка">
    <span>
        <div style="float:left; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 1</b>
</span></a>
 
<span style="padding: 0px 20px;">&nbsp;</span>
 
<a title="------" href="ссылка">
    <span>
        <div style="float:left; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 2</b>
</span></a>
 
<span style="padding: 0px 20px;">&nbsp;</span>
 
<a title="------" href="ссылка">
    <span>
        <div style="float:left; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 3</b>
</span></a>

Получаем такой вид:

scratch

#6 8 мая 2019 в 18:58

Вот так попробуйте

Спойлер

 
<a title="------" href="ссылка" style="margin-right:10px;">
    <span>
        <div style="display: inline-block; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 1</b>
</span></a>
<a title="------" href="ссылка" style="margin-right:10px;">
    <span>
        <div style="display: inline-block; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 2</b>
</span></a>
<a title="------" href="ссылка" style="margin-right:10px;">
    <span>
        <div style="display: inline-block; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 2</b>
</span></a>

#7 8 мая 2019 в 19:11

Вот так попробуйте
Killer's dream

Спойлер

<a title="------" href="ссылка" style="margin-right:10px;">
    <span>
        <div style="display: inline-block; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 1</b>
</span></a>
<span style="padding: 0px 20px;">&nbsp;</span>
<a title="------" href="ссылка" style="margin-right:10px;">
    <span>
        <div style="display: inline-block; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 2</b>
</span></a>
<span style="padding: 0px 20px;">&nbsp;</span>
<a title="------" href="ссылка" style="margin-right:10px;">
    <span>
        <div style="display: inline-block; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 2</b>
</span></a>

Спасибо большое, с меня плюс

еще добавил 2 строки для отступов, и класс))

а можно как нибудь добавить цвет этих ссылок?

#8 8 мая 2019 в 19:32

а можно как нибудь добавить цвет этих ссылок?
MrDinesh

<a title="------" href="ссылка" style="margin-right:10px;"> вот в этих строках добавьте еще color: #999; перед или после margin-right:10px;
а вообще не по царски так стили прописывать) создайте файл css и там всё с чувством с толком с расстановкой пропишите.

#9 8 мая 2019 в 21:10

<a title="------" href="ссылка" style="margin-right:10px;"> вот в этих строках добавьте еще color: #999; перед или после margin-right:10px;
Killer's dream

То что доктор прописал, спасибо Вам большое:)

Тему закрываю, проблема была решена:)

Вывод:

Спойлер

<a title="------" href="ссылка" style="margin-right:10px; color: #000;">
    <span>
        <div style="display: inline-block; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 1</b>
</span></a>
<span style="padding: 0px 20px;">&nbsp;</span>
<a title="------" href="ссылка" style="margin-right:10px; color: #000;">
    <span>
        <div style="display: inline-block; margin-right:10px;">
            <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
        </div>
    <b>Пункт 2</b>
</span></a>

Общее количество просмотров ст

Push в мобильном приложении

Меню для доски объявлений

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Доработка доски объявлений. Ищу исполнителя

[ЕСТЬ РЕШЕНИЕ] Нужна доска объявлений

[ЕСТЬ РЕШЕНИЕ] Организация доски объявлений

[ЕСТЬ РЕШЕНИЕ] Поля checkbox разными картинками

Автоматическая публикация контента с «Доски объявлений» на других сайтах

Фильтр доски объявлений и похожие объявления

InstantCMS Team

О проекте

Поддержка

Дополнения