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

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

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

#1 8 мая 2019 в 18:01
Всем привет!

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



имею такой код:
  1. <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>
  2. <span style="padding: 0px 20px;">&nbsp;</span>
  3. <a title="------" href="ссылка"> <span><img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" /><b>Пункт 2</b></span> </a>
  4. <span style="padding: 0px 20px;">&nbsp;</span>
  5. <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
наверно потому что..
  1.  
  2. <a title="------" href="ссылка">
  3. <span>
  4. <div style="float:left; margin-right:10px;">
  5. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  6. </div>
  7. <b>Пункт 1</b>
  8. </span>
  9. </a>
  10.  
в первом пункте вы завернули картинку в div и задали margin-right:10px; а в последующих нет

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

MrDinesh
На этот вопрос вам могут ответить сотни человек, и каждый будет считать свой вариант правильным)))
#3 8 мая 2019 в 18:27

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

Killer's dream
Подскажите как бы Вы сделали этот код?)
#4 8 мая 2019 в 18:39

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

MrDinesh
Даже не знаю ))) как бы я сделал)))
#5 8 мая 2019 в 18:45
  1. <a title="------" href="ссылка">
  2. <span>
  3. <div style="float:left; margin-right:10px;">
  4. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  5. </div>
  6. <b>Пункт 1</b>
  7. </span></a>
  8.  
  9. <span style="padding: 0px 20px;">&nbsp;</span>
  10.  
  11. <a title="------" href="ссылка">
  12. <span>
  13. <div style="float:left; margin-right:10px;">
  14. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  15. </div>
  16. <b>Пункт 2</b>
  17. </span></a>
  18.  
  19. <span style="padding: 0px 20px;">&nbsp;</span>
  20.  
  21. <a title="------" href="ссылка">
  22. <span>
  23. <div style="float:left; margin-right:10px;">
  24. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  25. </div>
  26. <b>Пункт 3</b>
  27. </span></a>
Получаем такой вид:


scratch
#6 8 мая 2019 в 18:58
Вот так попробуйте
  1.  
  2. <a title="------" href="ссылка" style="margin-right:10px;">
  3. <span>
  4. <div style="display: inline-block; margin-right:10px;">
  5. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  6. </div>
  7. <b>Пункт 1</b>
  8. </span></a>
  9. <a title="------" href="ссылка" style="margin-right:10px;">
  10. <span>
  11. <div style="display: inline-block; margin-right:10px;">
  12. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  13. </div>
  14. <b>Пункт 2</b>
  15. </span></a>
  16. <a title="------" href="ссылка" style="margin-right:10px;">
  17. <span>
  18. <div style="display: inline-block; margin-right:10px;">
  19. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  20. </div>
  21. <b>Пункт 2</b>
  22. </span></a>
  23.  
#7 8 мая 2019 в 19:11

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

Killer's dream
  1. <a title="------" href="ссылка" style="margin-right:10px;">
  2. <span>
  3. <div style="display: inline-block; margin-right:10px;">
  4. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  5. </div>
  6. <b>Пункт 1</b>
  7. </span></a>
  8. <span style="padding: 0px 20px;">&nbsp;</span>
  9. <a title="------" href="ссылка" style="margin-right:10px;">
  10. <span>
  11. <div style="display: inline-block; margin-right:10px;">
  12. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  13. </div>
  14. <b>Пункт 2</b>
  15. </span></a>
  16. <span style="padding: 0px 20px;">&nbsp;</span>
  17. <a title="------" href="ссылка" style="margin-right:10px;">
  18. <span>
  19. <div style="display: inline-block; margin-right:10px;">
  20. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  21. </div>
  22. <b>Пункт 2</b>
  23. </span></a>
Спасибо большое, с меня плюс v
еще добавил 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
То что доктор прописал, спасибо Вам большое:)

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

Вывод:
  1. <a title="------" href="ссылка" style="margin-right:10px; color: #000;">
  2. <span>
  3. <div style="display: inline-block; margin-right:10px;">
  4. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  5. </div>
  6. <b>Пункт 1</b>
  7. </span></a>
  8. <span style="padding: 0px 20px;">&nbsp;</span>
  9. <a title="------" href="ссылка" style="margin-right:10px; color: #000;">
  10. <span>
  11. <div style="display: inline-block; margin-right:10px;">
  12. <img title="------" style="vertical-align: middle;" src="cats.png" alt="описание" height="60" width="60" />
  13. </div>
  14. <b>Пункт 2</b>
  15. </span></a>
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.