» Нужна помощь с адаптивной вёрсткой сайта

Здравствуйте!
Решил поменять дизайн на сайте на дизайн с адаптивной вёрсткой. В качестве ПО использую Adobe Dreamweaver CC 2015 с Bootstrap 3.3.7. Страницу сайта решил попробовать сделать на основе скачанного шаблона. По-скольку я еще плохо знаком с CSS, то адаптивная вёрстка дается мне с трудом, не получается сделать так как хочется. В частности есть проблемы с шапкой. Некоторые элементы заходят друг на друга, кнопки меню при изменении размера окна перемещаются не туда куда нужно, масштабирование действует не на все изображения (в частности лого не изменяется). Не знаю почему так происходит, может где-то стили перекрывают друг друга, может неправильные значения стоят или просто какой-то знак пропущен или лишний. Файлов с CSS-стилями несколько, основные прописаны в файлах eve-styles.css, inuit.css, SlideShow1.css, style.css и styless.css. Главный файл страницы index2.html. Визуально нужно чтобы шапка выглядела так:
и чтобы меню не сворачивалось столбиком и не гуляло по сайту. Блоки с адресом и графиком работы должны всегда оставаться справа, когда размер окна сократится до размера мелкого устройства (xs) должны исчезнуть. Плашка "social" тоже всегда должна быть справа. Header не должен проваливаться при изменении размера окна браузера. Буду благодарен если укажете на ошибки, препятствующие реализации задуманного. Все необходимые файлы залил в архив.

Ray4
вам больше сюда - Вопросы по CSS

Цитата:

масштабирование действует не на все изображения (в частности лого не изменяется)

оно автоматом и не работает всегда (зависит от используемого js кода) - на чистом css нужно смотреть блоки типа такого

Цитата:

@media (max-width: 720px)

и в каждом описывать свои css свойства элементов в разных разрешениях.

Цитата:

и чтобы меню не сворачивалось столбиком и не гуляло по сайту

оно плавает потому, что "натыкается" шириной на вашу картинку слева, поэтому у него не остается ничего другого, кроме как "свернуться".

если не понимаете что и почему происходит - правой кнопкой мыши на элементе и "исследовать элемент" - браузер покажет и размеры элемента и какие стили и свойства где применяются.

Mavrikii
А в js-коде моей страницы идет привязка к каким-то конкретным изображениям ?

И зачем картинка слева (лого) влияет на блок меню, они разве не могут располагаться независимо друг от друга ?

Ray4

Цитата:

А в js-коде моей страницы идет привязка к каким-то конкретным изображениям

скорее всего нет - слишком много всего, чтобы разбираться подробно.


Цитата:

они разве не могут располагаться независимо друг от друга ?

а не вы картинку вставили то? из за того, что используется float, они на одной линии. Как только ширина меню "упирается" в картинку - оно "складывается".
в оригинальной теме переключение и переход меню под картинку происходит именно как указал выше - при определенной ширине страницы (960 пикселей)

Mavrikii
Я думал стиль float задает параметр выравнивания применительно к одному селектору. Как тогда их выровнять и разделить? Через параметр align ? И по идее параметр z-index должен защищать блоки от наездов друг на друга. Почему он не работает ?

Ray4

Цитата:

И по идее параметр z-index должен защищать блоки от наездов друг на друга. Почему он не работает ?

насчет float я писал по поводу index.html, по поводу z-index и index1.html - это не "защита", а элементы расположены один над другим. Но ширина меню слишком большая, поэтому оно начинает вести себя иначе ранее, чем по ссылке на оригинальный шаблон.

из за абсолютного позиционирования картинок - они могут "залезать" друг под друга.
и вообще, если вы хотите делать адаптивную верстку, то не стоит использовать полную ширину страницы с многими элементами в одну строку - как вы их размещать будете при уменьшении ширины?

видимо в index2 это и пытались сделать, но меню расположено в очень узкой колонке, вот и сложено постоянно

Mavrikii
Нет, файлы index.html и index1.html рассматривать не нужно. Интересует только index2.html. Я тоже вижу что ширина колонки меню слишком узкая, но у меня складывается ощущение что эта колонка наследует ширину от колонки с адресом, почему так происходит, не понимаю.

Цитата:

почему так происходит, не понимаю.

почитайте внимательно как работает float.
в данной ситуации у вас как раз блоки выставились в ряд именно из за float:left;
сначала #logo, шириной в 215px, следующий .right-head2 с float:right, и все то, что осталось по ширине - остается .right-head с float:left
так аналогично работает трехколоночный дизайн без таблиц

Mavrikii
а как выравнивать тогда блоки без float ?

Ray4

Цитата:

а как выравнивать тогда блоки без float ?

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

Mavrikii
т.е. в вышеприведенном шаблоне меню не заезжает на лого только потому что кроме него там больше нет никаких крупных элементов ?

если нет лишнего времени на решение вопросов, ответы на которые ты не знаешь, обратись к *** там ребята делают с нуля наверно возможен редизайн (без головняка)

Я хочу сам научиться.

Попробуй с помощью flex блоков (возможно, на форуме найдется инфа про это, иначе велком в поисковики)

+ Быстрая верстка, фреймворк типа бутстрапа не нужен будет
+ Быстрая загрузка сайта - не тащится весь функционал того же бутстрапа, который, обычно, на 90% не нужен

- Нужно разобраться.
Откажись от WYSIWYG редакторов, качай саблайм и ищи книги про CSS и HTML
2-3 упорных часа в день и за пару месяцев во всем разберешься )