Нужна помощь или наставления (возможно не только за спасибо)

[мастер алекс]

Собственно никак не получается выкроить время на полноценное освоение материала по верстке. Хотел попросить помощи. Думаю со временем разберусь уже по готовой странице. Есть задумка небольшой галереи для дальних родственников, из шаблонов выбрал приблизительно, что хочу получить на выходе. Оказалось реализовать это с точностью, как в шаблоне, не по моим знаниям. Пробовал писать сайты лет 5 назад, но уже знаний не осталось - попытка вспамнить и освоить новые знания ни к чему не привели ( http://htmlforum.ru/index.php?showtopic=54188 ). 

 

Помогите наставлениями и протыкайте носом. Если нужно с меня "спасибо" в материальном эквиваленте.

 

1я страница должна быть такой:

 

2я страница (после нажатия на один из маленьких квадратиков):

 

Сегодня начал все с нуля https://jsfiddle.net/4Lxe564o/ Но точно раньше получалось выстраивать блоки по середине родительских))), а сейчас ступор с маленькими дивами под фотки.

 

Изначально думал сделать две колонки с лева и права от центральной-вертикальной линии (эффект дерева классный)). Теперь думаю проще маленькие блоки разместить по центру среднего блока+ так проще будет с позиционировать их при изменении разрешения экрана (показывать родственникам на планшете).  

 

Разбираясь как сделать все вокруг этих линий и масштабируемо(адаптивно), забыл напрочь основы(((.

[hypnocolor]

Ну вот вам примерный план действий для старта: http://jsfiddle.net/hypnocolor/exz5ed9j/. В целом ничего сложного в такой разметке нет.

[мастер алекс]

Класс)))))))))))). Сейчас попробую детально изучить.

Но я так понимаю если по верх этих картинок нужно будет написать краткий текст к примеру "фотографии 2014", то тут лучше будет divы использовать, или я ошибаюсь?

 

А чуметь)). Линия реализована через "бордер")? Думал по готовому разберусь, но уже когда "before" увидел, понял, что моих примитивных знаний маловато будет).

Edited October 14, 2015 by мастер алекс

[hypnocolor]

Линии можно сделать всякими способами, через псевдоэлемент это быстрее и проще всего.

По поводу текста поверх картинок — там тоже возможны варианты, всё зависит от того, что вы хотите в итоге получить. Дивы там не принципиальны в целом.

Если прям много вопросов, можете в скайп стукнуться, разберёмся.