Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Нужна помощь с адаптивной вёрсткой сайта

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Ray4

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте!
Решил поменять дизайн на сайте на дизайн с адаптивной вёрсткой. В качестве ПО использую 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 не должен проваливаться при изменении размера окна браузера. Буду благодарен если укажете на ошибки, препятствующие реализации задуманного. Все необходимые файлы залил в архив.

Всего записей: 10 | Зарегистр. 06-06-2012 | Отправлено: 13:31 27-07-2016 | Исправлено: Ray4, 14:45 27-07-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ray4
вам больше сюда - Вопросы по CSS

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

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

Цитата:
@media (max-width: 720px)

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

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

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

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 06:41 28-07-2016 | Исправлено: Mavrikii, 06:42 28-07-2016
Ray4

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
А в js-коде моей страницы идет привязка к каким-то конкретным изображениям ?
 
И зачем картинка слева (лого) влияет на блок меню, они разве не могут располагаться независимо друг от друга ?

Всего записей: 10 | Зарегистр. 06-06-2012 | Отправлено: 11:07 28-07-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ray4

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

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

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

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

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 18:23 28-07-2016
Ray4

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

Всего записей: 10 | Зарегистр. 06-06-2012 | Отправлено: 10:16 29-07-2016 | Исправлено: Ray4, 15:50 29-07-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ray4

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

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

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 18:48 29-07-2016
Ray4

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

Всего записей: 10 | Зарегистр. 06-06-2012 | Отправлено: 11:11 01-08-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

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

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

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 07:09 02-08-2016
Ray4

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
а как выравнивать тогда блоки без float ?

Всего записей: 10 | Зарегистр. 06-06-2012 | Отправлено: 09:25 02-08-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ray4

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

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

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 18:46 02-08-2016
Ray4

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
т.е. в вышеприведенном шаблоне меню не заезжает на лого только потому что кроме него там больше нет никаких крупных элементов ?

Всего записей: 10 | Зарегистр. 06-06-2012 | Отправлено: 11:04 03-08-2016
spidi2008

BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
если нет лишнего времени на решение вопросов, ответы на которые ты не знаешь, обратись к *** там ребята делают с нуля наверно возможен редизайн (без головняка)




Вот только не нужно спама.

Всего записей: 2 | Зарегистр. 16-08-2016 | Отправлено: 16:15 16-08-2016
Ray4

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Я хочу сам научиться.

Всего записей: 10 | Зарегистр. 06-06-2012 | Отправлено: 14:08 17-08-2016
Evilless

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Попробуй с помощью flex блоков (возможно, на форуме найдется инфа про это, иначе велком в поисковики)
 
+ Быстрая верстка, фреймворк типа бутстрапа не нужен будет
+ Быстрая загрузка сайта - не тащится весь функционал того же бутстрапа, который, обычно, на 90% не нужен
 
- Нужно разобраться.
Откажись от WYSIWYG редакторов, качай саблайм и ищи книги про CSS и HTML
2-3 упорных часа в день и за пару месяцев во всем разберешься )

Всего записей: 2 | Зарегистр. 03-09-2016 | Отправлено: 13:00 03-09-2016
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Нужна помощь с адаптивной вёрсткой сайта


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru