Размещение меню поверх картинки.

[DarkEnot]

Уважаемые форумчане, подскажите, как расположить меню поверх картинки? 
Картинки и "Главная" находятся в одном div`e, но как их объединить - не знаю. Какая функция за это отвечает? В нужное русло направьте, а дальше я сам)
Заранее спасибо.

[klierik]

Начни чтение с этого — http://htmlbook.ru/css/position

[DarkEnot]

3 часа назад, klierik сказал:

Начни чтение с этого — http://htmlbook.ru/css/position

Прочитал, но не понял, как применить в моём случае. Если я не ошибаюсь, мне надо использовать "position: absolute;", ведь только этот метод опирается на родительский элемент, но если я прописываю это к нужной мне ссылке, то всё идёт коту под хвост.

[klierik]

В таком случае начни с   "Помогите мне с ..." — Как правильно оформить вопрос/проблему

[DarkEnot]

1 час назад, klierik сказал:

В таком случае начни с   "Помогите мне с ..." — Как правильно оформить вопрос/проблему

С этим постом ознакомлен, но перечитав своё первый пост, я понял, что задача мною не чётко выражена...
То, что я имею сейчас, есть в первом посте.
Тут я выкладываю вариант конечного результата. (С оформлением трудностей не возникнет, проблема конкретно в расположении ссылок поверх картинки (голубой фон - это картинка.) )

[klierik]

Цитата

1.3 Если проблема возникла в процессе создания блока/элемента страницы, выложи код сюда: jsfiddle.net

 

[DarkEnot]

37 минут назад, klierik сказал:

 

https://jsfiddle.net/omho4L6y/ 
Если я правильно понял, то изображения там нельзя загружать. 

[klierik]

Вот, тебе по образу и подобию делать надо: https://jsfiddle.net/2tzd5spu/

[DarkEnot]

43 минуты назад, klierik сказал:

Вот, тебе по образу и подобию делать надо: https://jsfiddle.net/2tzd5spu/

Результат вышел всё равно не таким...
Вот весь код на всякий случай https://jsfiddle.net/u0tx4140/
Левый блок с меню почему-то ушёл наверх. Это случилось после добавления: 

.top_menu{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

[DarkEnot]

Немного поковырявшись, пришёл к такому результату.
https://jsfiddle.net/dvaw36cw/1/
Всё же, как двигать эти ссылки в верхнем меню? top: Npx; не хочу использовать, ведь на разных экранах будет по разному.

[klierik]

Для того что бы реализовать то что на картинке надо внести изменения логику построения layout. Я скидывал выше пример для построения layout, но ты его уверенно проигнорировал и пошел своим путём. Не правильным, но своим. Так чего тогда ты удивляешься что у тебя работает не так как ты хочешь?

Так как у тебя не хватает времени выложить в интернет картинки и использовать их в песочнице (я-то за тебя этого делать тоже не собираюсь) то внося изменения в твою вёрстку пришлось отталкиваться от того что имеем и вот что вышло: https://jsfiddle.net/dvaw36cw/4/

И хватить писать в коде "</br>" — это не правильно. Надо писать: "<br />"

[DarkEnot]

15 минут назад, klierik сказал:

Для того что бы реализовать то что на картинке надо внести изменения логику построения layout. Я скидывал выше пример для построения layout, но ты его уверенно проигнорировал и пошел своим путём. Не правильным, но своим. Так чего тогда ты удивляешься что у тебя работает не так как ты хочешь?

Так как у тебя не хватает времени выложить в интернет картинки и использовать их в песочнице (я-то за тебя этого делать тоже не собираюсь) то внося изменения в твою вёрстку пришлось отталкиваться от того что имеем и вот что вышло: https://jsfiddle.net/dvaw36cw/4/

И хватить писать в коде "</br>" — это не правильно. Надо писать: "<br />"

Извиняюсь, насчёт картинок затупил.
https://jsfiddle.net/dvaw36cw/7/ Вариант с картинками. В идеале надо сделать, чтобы изображение было статичного размера, а поверх изображения были ссылки в статичных местах. Если экран маленький, то есть полоска прокрутки. 

[klierik]

Проанализируй CSS который я выложил — там есть ответ.