Помогите разобраться в графическом меню

Кошачий
На сайте с 12.10.2012
Offline
116
617

Буду благодарен, если поможете разобраться с такой задачей.

На сайте есть форма для вывода HTML-кода.

В этой форме я хочу сделать графическое меню - два ряда .png картинок, по три штуки в каждом ряду.

Как это можно реализовать? Если можно с примером кода. Мне кажется, это делается как-то так: <тег - ссылка на первую картинку, ссылка на страничку куда ведет картинка, ссылка на вторую, третью картинку в первом ряду, потом то же самое для второго ряда>.

Альты к картинкам и т.д.

Я не программист и в коде не особо понимаю, сейчас возникла острая необходимость в такой менюшке. Полагаю, здесь есть что-то общее с вики-разметкой в ВК (может быть я и ошибаюсь).

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

Очень нужно, выручайте :)

Пропорции поля для 6-ти картинок - 300x200px

Когда планета покроется котиками, она станет мягкой и пушистой ▲_▲ ▲_▲ Котосмайлы () на котофорум (/) ▲_▲
eis
На сайте с 18.10.2008
Offline
473
eis
#1

Вариант с помощью списков

- Здесь я покупаю вечные ссылки на свои сайты! (https://backlinkator.com) - сотни ссылок за копейки
izbushka
На сайте с 08.06.2007
Offline
110
#2

Что такое "форма для вывода HTML-кода"?

Задача не понятна.. В чем сложность? Не знаете как вывести три картинки в строку? css: display: inline-block например..

[Удален]
#3
izbushka:
Что такое "форма для вывода HTML-кода"?

Задача не понятна.. В чем сложность? Не знаете как вывести три картинки в строку? css: display: inline-block например..

Или так:

<div class=block>

<img1><img2><img3>

<img4><img5><img5>

</div>

Где block - это общий блок вашего графического меню, у которого в css есть следующее:

.block { overflow: hidden; width: нужная ширина; и другие ваши настройки }

и

.block img { float: left; width: нужная ширина; height: нужная высота; } - Это будет говорить о том, что картинки в этом блоке будут по левую сторону, и нужно подобрать ширину картинок так, чтоб 3 картинки помещалось в ширину общего блока, тогда следующие три (4, 5 и 6) пойдут во второй ряд, как вам и нужно.

Кошачий
На сайте с 12.10.2012
Offline
116
#4
eis:
Вариант с помощью списков

Вариант интересен, только как я понимаю, там идет три строки по две картинки в каждой. Мне, наоборот, нужно две строки, по три изображения в каждой.

izbushka:
Не знаете как вывести три картинки в строку? css: display: inline-block например..

Говорю же, я в коде не особо шарю... Форма для вывода кода - окно, поддерживающее отображение/исполнение любого кода. Хочешь картинку вставляешь, хочешь, рекламу гугловскую, что угодно в общем. Может, неправильно обозвал.

mrxmry, ваш вариант уже более понятен. То есть, мне нужно создать block.css, в котором обозначить условия отображения, верно? Не могли бы вы привести пример кода при следующих условиях: ширина блока 300х200 пикселей, ширина картинок 100х100 пикселей?

[Удален]
#5
Кошачий:
Вариант интересен, только как я понимаю, там идет три строки по две картинки в каждой. Мне, наоборот, нужно две строки, по три изображения в каждой.


Говорю же, я в коде не особо шарю... Форма для вывода кода - окно, поддерживающее отображение/исполнение любого кода. Хочешь картинку вставляешь, хочешь, рекламу гугловскую, что угодно в общем. Может, неправильно обозвал.

mrxmry, ваш вариант уже более понятен. То есть, мне нужно создать block.css, в котором обозначить условия отображения, верно? Не могли бы вы привести пример кода при следующих условиях: ширина блока 300х200 пикселей, ширина картинок 100х100 пикселей?

Типа того, только не block.css, а в вашем уже имеющемся файле css добавить новые значения для блока, по примеру выше.

Конкретно с вашими пропорциями нужно либо ширину картинки уменьшить, либо ширину блока увеличить, так как у вас ширина блока 300, а картинки 100 - картинок 3 штуки, и между ними наверно еще и расстояние (margin) есть, верно? например 5px от картинки - значит нужно посчитать и увеличить ширину блока, либо уменьшить ширину картинок. Если без расстояний, тогда картинки будут плотно друг к другу.

Кошачий
На сайте с 12.10.2012
Offline
116
#6
mrxmry:
Конкретно с вашими пропорциями нужно либо ширину картинки уменьшить, либо ширину блока увеличить, так как у вас ширина блока 300, а картинки 100 - картинок 3 штуки, и между ними наверно еще и расстояние (margin) есть, верно? например 5px от картинки - значит нужно посчитать и увеличить ширину блока, либо уменьшить ширину картинок. Если без расстояний, тогда картинки будут плотно друг к другу.

Верно. В принципе, расстояние значения не имеет, т.к. картинки на прозрачном фоне выполнены. По сути, визуально расстояние между ними будет нормальным.

eis
На сайте с 18.10.2008
Offline
473
eis
#7

Так ?

Кошачий
На сайте с 12.10.2012
Offline
116
#8

eis, оно, спасибо :) Сейчас будем внедрять))

О результатах отпишусь.

[Удален]
#9
Кошачий:
Верно. В принципе, расстояние значения не имеет, т.к. картинки на прозрачном фоне выполнены. По сути, визуально расстояние между ними будет нормальным.

ну тогда 3 картинки по 100 в блоке в 300 должны уместиться в ряд, если без расстояний. Ну а елси картинок 6 - значит будет вам 2 ряда.

Кошачий
На сайте с 12.10.2012
Offline
116
#10

Ни в какую не получается... вот шаблон проблемный - http://wordpress.org/extend/themes/responsive

Может кто работал с ним уже? Задача - убрать текст с правой половины экрана на главной странице и вставить туда графическое меню с нарисованными картинками. Все стили уже перешерстил, так и неясно ничего.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий